\r\n {label || i18n.getString(_TL_('How long do you want your ads to run?'))}\r\n
\r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nDateSetting.propTypes = {\r\n label: PropTypes.string,\r\n data: PropTypes.shape({\r\n StartDate: PropTypes.string,\r\n EndDate: PropTypes.string,\r\n TimeZone: PropTypes.string,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n formatDate: PropTypes.func.isRequired,\r\n }).isRequired,\r\n adGroupStatus: PropTypes.string,\r\n onChange: PropTypes.func.isRequired,\r\n activityLogger: PropTypes.shape({\r\n signal: PropTypes.func,\r\n }),\r\n};\r\n\r\nDateSetting.defaultProps = {\r\n label: '',\r\n activityLogger: null,\r\n adGroupStatus: undefined,\r\n};\r\n","import _ from 'underscore';\r\nimport React, { useState, useCallback, useContext, useMemo, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { withCustomValidation, withError } from '@bingads-webui-react/validation';\r\nimport { ActivityContext } from '@bingads-webui-react/hoc-with-signal';\r\nimport { toIANATimeZone } from '@bingads-webui-universal/time-zone-converter';\r\nimport { DateSetting } from './date-setting';\r\n\r\nconst DateSettingWithCustomValidation = ({\r\n validationProps, updateValidation, validateOnLoad, ...restProps\r\n}) => {\r\n const { data: dataSettings } = validationProps;\r\n const i18n = useContext(I18nContext);\r\n const activity = useContext(ActivityContext);\r\n const currentDate = useMemo(() => {\r\n const localDate = new Date(new Date().toLocaleString('en-US', { timeZone: toIANATimeZone(dataSettings.TimeZone) }));\r\n return new Date(localDate.getFullYear(), localDate.getMonth(), localDate.getDate(), 0, 0, 0, 0);\r\n }, [dataSettings.TimeZone]);\r\n const [isInvalidState, setIsInvalidState] = useState(false);\r\n const [updatedDateSettings, setUpdatedDateSettings] = useState(dataSettings);\r\n const validateDate = useCallback(({\r\n StartDate,\r\n EndDate,\r\n hasFixedStartDate = false,\r\n }) => {\r\n const validationErrors = [];\r\n // check wether date is valid\r\n if (_.isNull(StartDate) && !hasFixedStartDate) {\r\n validationErrors.push(i18n.getString(_TL_('Invalid start date')));\r\n } else if (StartDate < currentDate && !hasFixedStartDate) {\r\n validationErrors.push(i18n.getString(_TL_(\"Your start date must be after today. Today's date is calculated using your campaign time zone setting, not your actual local time.\")));\r\n } else if (!_.isNull(EndDate) && StartDate > EndDate) {\r\n validationErrors.push(i18n.getString(_TL_('End date must be later than start date')));\r\n }\r\n return validationErrors;\r\n }, [currentDate, i18n]);\r\n\r\n const onChange = useCallback((newData, shouldDirty = true) => {\r\n const validationError = validateDate(newData);\r\n updateValidation(validationError, newData, shouldDirty);\r\n\r\n setIsInvalidState(validationError.length > 0);\r\n\r\n if (activity) {\r\n activity.signal(`onDateSettingChange - ${JSON.stringify(newData)}`);\r\n }\r\n }, [validateDate, updateValidation, activity]);\r\n\r\n useEffect(() => {\r\n setUpdatedDateSettings(_.clone(dataSettings));\r\n }, [dataSettings, isInvalidState]);\r\n\r\n useEffect(() => {\r\n // trigger validation on initial load\r\n if (validateOnLoad) {\r\n onChange(dataSettings, false);\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, []);\r\n\r\n return (\r\n \r\n
\r\n);\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { TextField } from '@bingads-webui-react/fabric-with-signal';\r\n\r\nconst getStyles = () => ({\r\n container: {\r\n display: 'flex',\r\n },\r\n bid: {\r\n width: '150px',\r\n marginRight: '12px',\r\n },\r\n currency: {\r\n marginTop: '5px',\r\n },\r\n messageBar: {\r\n marginTop: '5px',\r\n },\r\n});\r\n\r\nexport const DefaultBid = ({\r\n // eslint-disable-next-line\r\n i18n, currencyCode, id, getRangeWaring, disabled, value,...rest\r\n}) => {\r\n const classes = useDefaultStyles(getStyles);\r\n return (\r\n \r\n
);\r\n};\r\n\r\nDefaultBid.propTypes = {\r\n i18n: PropTypes.shape({}).isRequired,\r\n currencyCode: PropTypes.string.isRequired,\r\n id: PropTypes.string,\r\n classes: PropTypes.shape({\r\n container: PropTypes.string.isRequired,\r\n bid: PropTypes.string.isRequired,\r\n currency: PropTypes.string.isRequired,\r\n }).isRequired,\r\n validationProps: PropTypes.shape({}).isRequired,\r\n getRangeWaring: PropTypes.func,\r\n disabled: PropTypes.bool,\r\n};\r\n\r\nDefaultBid.defaultProps = {\r\n id: '',\r\n getRangeWaring: () => null,\r\n disabled: false,\r\n};\r\n","import React, { useCallback, useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport { withControlErrorHandling, withControlErrors } from '@bingads-webui-campaign-react/error-handling';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport { withCustomValidation } from '@bingads-webui-react/validation';\r\nimport { ActivityContext } from '@bingads-webui-react/hoc-with-signal';\r\nimport { Label } from '@fluentui/react';\r\nimport { DefaultBid } from './default-bid';\r\n\r\nconst PriceModelToRange = {\r\n EnhancedCpc: 'KeywordBidRange',\r\n ManualCpc: 'KeywordBidRange',\r\n ManualCpv: 'KeywordCPVBidRange',\r\n ManualCpm: 'KeywordCPMBidRange',\r\n};\r\n\r\nconst DefaultBidWithValidation = withControlErrorHandling(withControlErrors(DefaultBid));\r\n\r\nconst DefaultBidWithWaring = (props) => {\r\n const {\r\n onValidate, value, field, Type, label, ...rest\r\n } = props;\r\n\r\n const serverContext = useContext(ServerContext);\r\n const activity = useContext(ActivityContext);\r\n\r\n const onChange = useCallback((result) => {\r\n onValidate(result);\r\n\r\n if (activity) {\r\n activity.signal(`onDefaultBidChanged - ${field}: ${result && result.data && result.data[field]}`);\r\n }\r\n }, [activity, field, onValidate]);\r\n\r\n const getBidRange = useCallback((type) => {\r\n const bidCeil = _.result(serverContext[PriceModelToRange[type]], 'CeilingValue');\r\n const bidFloor = _.result(serverContext[PriceModelToRange[type]], 'FloorValue');\r\n\r\n return { bidCeil, bidFloor };\r\n }, [serverContext]);\r\n\r\n const { bidCeil, bidFloor } = getBidRange(Type);\r\n\r\n return (\r\n <>\r\n {label &&\r\n \r\n }\r\n \r\n
\r\n {currencyCode}\r\n \r\n
\r\n );\r\n}\r\n\r\nStatusSection.propTypes = {\r\n details: PropTypes.arrayOf(PropTypes.shape({\r\n name: PropTypes.string.isRequired,\r\n status: PropTypes.oneOf(Object.values(Status)).isRequired,\r\n statusLabelMsg: PropTypes.string.isRequired,\r\n })).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n};\r\n","import { makeStyles, shorthands } from '@fluentui/react-components';\r\n\r\nexport const useStyles = makeStyles({\r\n actionCardsList: {\r\n marginTop: '16px',\r\n },\r\n card: {\r\n height: '165px',\r\n width: '360px',\r\n minWidth: '360px',\r\n ...shorthands.border('1px', 'solid', '#d1d1d1'),\r\n ...shorthands.padding('12px'),\r\n ...shorthands.borderRadius('4px'),\r\n // we are using carousel component to wrap cards, so we cannot use flex to set gap\r\n marginRight: '12px',\r\n },\r\n iconArea: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n alignItems: 'center',\r\n ...shorthands.gap('4px'),\r\n },\r\n divider: {\r\n marginTop: '16px',\r\n },\r\n cardsMessage: {\r\n marginTop: '16px',\r\n },\r\n cardTitle: {\r\n ...shorthands.overflow('hidden'),\r\n textOverflow: 'ellipsis',\r\n fontWeight: 'bold',\r\n marginTop: '10px',\r\n textWrap: 'nowrap',\r\n },\r\n cardMessage: {\r\n ...shorthands.overflow('hidden'),\r\n textOverflow: 'ellipsis',\r\n display: '-webkit-box',\r\n '-webkit-line-clamp': '2',\r\n '-webkit-box-orient': 'vertical',\r\n height: '40px',\r\n },\r\n cardButton: {\r\n },\r\n nameText: {\r\n color: '#605E5C',\r\n },\r\n footer: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n alignItems: 'center',\r\n justifyContent: 'space-between',\r\n marginTop: '16px',\r\n },\r\n});\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { Body1, Body2, Button, Tooltip, Link } from '@fluentui/react-components';\r\nimport { Status, StatusIcon } from '@bingads-webui-campaign-react/status-popover';\r\n\r\nimport { useStyles } from '../../styles/action-cards-styles';\r\n\r\nexport function ActionCard({\r\n name,\r\n status,\r\n cardTitle,\r\n cardMsg,\r\n onCardButtonClicked,\r\n cardButtonText,\r\n learnMoreLink,\r\n i18n,\r\n}) {\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n {items}\r\n
\r\n \r\n \r\n {cardTitle} \r\n \r\n \r\n {cardMsg} \r\n \r\n \r\n { onCardButtonClicked && cardButtonText &&\r\n \r\n {cardButtonText}\r\n \r\n }\r\n {learnMoreLink &&\r\n {i18n.getString(_TL_('Learn more'))}\r\n }\r\n \r\n
\r\n );\r\n}\r\n\r\nActionCard.propTypes = {\r\n name: PropTypes.string.isRequired,\r\n status: PropTypes.oneOf(Object.values(Status)).isRequired,\r\n cardTitle: PropTypes.string.isRequired,\r\n cardMsg: PropTypes.string.isRequired,\r\n onCardButtonClicked: PropTypes.func,\r\n cardButtonText: PropTypes.string,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n learnMoreLink: PropTypes.string,\r\n};\r\n\r\nActionCard.defaultProps = {\r\n learnMoreLink: undefined,\r\n onCardButtonClicked: undefined,\r\n cardButtonText: undefined,\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { Divider, Caption1 } from '@fluentui/react-components';\r\nimport { Carousel, SimpleCarousel } from '@bingads-webui-campaign-react/carousel';\r\n\r\nimport { Status } from '@bingads-webui-campaign-react/status-popover';\r\nimport { ActionCard } from './action-card';\r\nimport { useStyles } from '../../styles/action-cards-styles';\r\n\r\nexport function ActionCards({\r\n details,\r\n i18n,\r\n isSmallScreen,\r\n}) {\r\n const classes = useStyles();\r\n\r\n const contents = details.map(item => \r\n {name} \r\n
\r\n \r\n \r\n {i18n.getString(_TL_('Improve your campaign setup ({{count}})'), { count: details.length })}\r\n \r\n
\r\n );\r\n}\r\n\r\nActionCards.propTypes = {\r\n details: PropTypes.arrayOf(PropTypes.shape({\r\n name: PropTypes.string.isRequired,\r\n status: PropTypes.oneOf(Object.values(Status)).isRequired,\r\n cardTitle: PropTypes.string,\r\n cardMsg: PropTypes.string,\r\n onCardButtonClicked: PropTypes.func,\r\n cardButtonText: PropTypes.string,\r\n })).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n isSmallScreen: PropTypes.bool,\r\n};\r\n\r\nActionCards.defaultProps = {\r\n isSmallScreen: false,\r\n};\r\n","import { makeStyles } from '@fluentui/react-components';\r\n\r\nexport const useStyles = makeStyles({\r\n campaignTitle: {\r\n color: '#242424',\r\n },\r\n campaignMsg: {\r\n color: '#323130',\r\n },\r\n});\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport {\r\n Title2,\r\n Caption1,\r\n} from '@fluentui/react-components';\r\nimport { Status } from '@bingads-webui-campaign-react/status-popover';\r\n\r\nimport { ActionCards, StatusSection } from './components/index';\r\nimport { useStyles } from './styles/diagnostic-card-styles';\r\n\r\nexport function DiagnosticCard({\r\n campaignStatusTitle,\r\n campaignStatusMsg,\r\n details,\r\n i18n,\r\n responsiveSize,\r\n}) {\r\n const detailsToFix = details.filter(item => item.status !== Status.Active && item.cardTitle && (item.onCardButtonClicked || item.learnMoreLink));\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n {/* contentWidth is cardWidth + margin */}\r\n {isSmallScreen ?
\r\n \r\n {campaignStatusTitle} \r\n {campaignStatusMsg} \r\n
\r\n );\r\n}\r\n\r\nDiagnosticCard.propTypes = {\r\n campaignStatusTitle: PropTypes.string.isRequired,\r\n campaignStatusMsg: PropTypes.string.isRequired,\r\n details: PropTypes.arrayOf(PropTypes.shape({\r\n name: PropTypes.string.isRequired,\r\n status: PropTypes.oneOf(Object.values(Status)).isRequired,\r\n statusLabelMsg: PropTypes.string.isRequired,\r\n cardTitle: PropTypes.string,\r\n cardMsg: PropTypes.string,\r\n onCardButtonClicked: PropTypes.func,\r\n cardButtonText: PropTypes.string,\r\n })).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n responsiveSize: PropTypes.string.isRequired,\r\n};\r\n","import { AdTypes } from '@bingads-webui-campaign-react/campaign-onboarding-v2';\r\n\r\nexport const STEP_PATHS = {\r\n DISPLAY_AD: 'DISPLAY_AD',\r\n VIDEO_AD: 'VIDEO_AD',\r\n NATIVE_AD: 'NATIVE_AD',\r\n MULTI_NATIVE_AD: 'MULTI_NATIVE_AD',\r\n MULTI_AD_MANAGER: 'MULTI_AD_MANAGER',\r\n AD_GROUP: 'AD_GROUP',\r\n AD_GROUP_CREATION: 'AD_GROUP_CREATION',\r\n CAMPAIGN_CREATION: 'CAMPAIGN_CREATION',\r\n CAMPAIGN_EDIT: 'CAMPAIGN_EDIT',\r\n SUMMARY: 'SUMMARY',\r\n};\r\n\r\nexport const FLOWS = {\r\n DISPLAY_CAMPAIGNS: 'DISPLAY_CAMPAIGNS',\r\n VIDEO_CAMPAIGNS: 'VIDEO_CAMPAIGNS',\r\n AUDIENCE_CAMPAIGNS: 'AUDIENCE_CAMPAIGNS',\r\n CTV_CAMPAIGNS: 'CTV_CAMPAIGNS',\r\n DEAL_CAMPAIGNS: 'DEAL_CAMPAIGNS',\r\n MULTI_AUDIENCE_CAMPAIGNS: 'MULTI_AUDIENCE_CAMPAIGNS',\r\n AUDIENCE_CAMPAIGN_EDIT: 'AUDIENCE_CAMPAIGN_EDIT',\r\n AUDIENCE_AD_GROUP_EDIT: 'AUDIENCE_AD_GROUP_EDIT',\r\n AUDIENCE_AD_GROUP_CREATION: 'AUDIENCE_AD_GROUP_CREATION',\r\n\r\n AUDIENCE_CAMPAIGN_CTV_EDIT: 'AUDIENCE_CAMPAIGN_CTV_EDIT',\r\n AUDIENCE_AD_GROUP_CTV_EDIT: 'AUDIENCE_AD_GROUP_CTV_EDIT',\r\n AUDIENCE_AD_GROUP_CTV_CREATION: 'AUDIENCE_AD_GROUP_CTV_CREATION',\r\n\r\n AUDIENCE_CAMPAIGN_DEAL_EDIT: 'AUDIENCE_CAMPAIGN_DEAL_EDIT',\r\n AUDIENCE_AD_GROUP_DEAL_CREATION: 'AUDIENCE_AD_GROUP_DEAL_CREATION',\r\n AUDIENCE_AD_GROUP_DEAL_EDIT: 'AUDIENCE_AD_GROUP_DEAL_EDIT',\r\n\r\n AUDIENCE_AD_GROUP_MULTI_AD_CREATION: 'AUDIENCE_AD_GROUP_MULTI_AD_CREATION',\r\n};\r\n\r\nexport const AD_TYPES_TO_FLOWS = {\r\n [AdTypes.Display]: FLOWS.DISPLAY_CAMPAIGNS,\r\n [AdTypes.Video]: FLOWS.VIDEO_CAMPAIGNS,\r\n [AdTypes.Native]: FLOWS.AUDIENCE_CAMPAIGNS,\r\n [AdTypes.AudienceVideo]: FLOWS.CTV_CAMPAIGNS,\r\n [AdTypes.Netflix]: FLOWS.DEAL_CAMPAIGNS,\r\n};\r\n\r\nexport const WIZARD_TYPES = {\r\n AUDIENCE_CAMPAIGN_EDIT: 'AUDIENCE_CAMPAIGN_EDIT',\r\n AUDIENCE_AD_GROUP_EDIT: 'AUDIENCE_AD_GROUP_EDIT',\r\n AUDIENCE_AD_GROUP_CREATION: 'AUDIENCE_AD_GROUP_CREATION',\r\n\r\n AUDIENCE_CAMPAIGN_CTV_EDIT: 'AUDIENCE_CAMPAIGN_CTV_EDIT',\r\n AUDIENCE_AD_GROUP_CTV_EDIT: 'AUDIENCE_AD_GROUP_CTV_EDIT',\r\n AUDIENCE_AD_GROUP_CTV_CREATION: 'AUDIENCE_AD_GROUP_CTV_CREATION',\r\n\r\n AUDIENCE_CAMPAIGN_DEAL_EDIT: 'AUDIENCE_CAMPAIGN_DEAL_EDIT',\r\n AUDIENCE_AD_GROUP_DEAL_EDIT: 'AUDIENCE_AD_GROUP_DEAL_EDIT',\r\n AUDIENCE_AD_GROUP_DEAL_CREATION: 'AUDIENCE_AD_GROUP_DEAL_CREATION',\r\n};\r\n\r\nexport const WIZARD_TYPE_TO_FLOW = {\r\n [WIZARD_TYPES.AUDIENCE_CAMPAIGN_EDIT]: FLOWS.AUDIENCE_CAMPAIGN_EDIT,\r\n [WIZARD_TYPES.AUDIENCE_AD_GROUP_EDIT]: FLOWS.AUDIENCE_AD_GROUP_EDIT,\r\n [WIZARD_TYPES.AUDIENCE_AD_GROUP_CREATION]: FLOWS.AUDIENCE_AD_GROUP_CREATION,\r\n\r\n [WIZARD_TYPES.AUDIENCE_CAMPAIGN_CTV_EDIT]: FLOWS.AUDIENCE_CAMPAIGN_CTV_EDIT,\r\n [WIZARD_TYPES.AUDIENCE_AD_GROUP_CTV_EDIT]: FLOWS.AUDIENCE_AD_GROUP_CTV_EDIT,\r\n [WIZARD_TYPES.AUDIENCE_AD_GROUP_CTV_CREATION]: FLOWS.AUDIENCE_AD_GROUP_CTV_CREATION,\r\n\r\n [WIZARD_TYPES.AUDIENCE_CAMPAIGN_DEAL_EDIT]: FLOWS.AUDIENCE_CAMPAIGN_DEAL_EDIT,\r\n [WIZARD_TYPES.AUDIENCE_AD_GROUP_DEAL_EDIT]: FLOWS.AUDIENCE_AD_GROUP_DEAL_EDIT,\r\n [WIZARD_TYPES.AUDIENCE_AD_GROUP_DEAL_CREATION]: FLOWS.AUDIENCE_AD_GROUP_DEAL_CREATION,\r\n};\r\n\r\nexport const FLOWS_TO_FIRST_STEP = {\r\n [FLOWS.DISPLAY_CAMPAIGNS]: STEP_PATHS.DISPLAY_AD,\r\n [FLOWS.VIDEO_CAMPAIGNS]: STEP_PATHS.VIDEO_AD,\r\n [FLOWS.CTV_CAMPAIGNS]: STEP_PATHS.VIDEO_AD,\r\n [FLOWS.DEAL_CAMPAIGNS]: STEP_PATHS.VIDEO_AD,\r\n [FLOWS.AUDIENCE_CAMPAIGNS]: STEP_PATHS.NATIVE_AD,\r\n [FLOWS.MULTI_AUDIENCE_CAMPAIGNS]: STEP_PATHS.MULTI_AD_MANAGER,\r\n [FLOWS.AUDIENCE_CAMPAIGN_EDIT]: STEP_PATHS.CAMPAIGN_EDIT,\r\n};\r\n\r\nexport const isAudienceCampaign = flow => flow === FLOWS.AUDIENCE_CAMPAIGNS || flow === FLOWS.MULTI_AUDIENCE_CAMPAIGNS;\r\n\r\nexport const isAudienceCampaignEdit = flow => flow === FLOWS.AUDIENCE_CAMPAIGN_EDIT;\r\nexport const isCTVCampaignEdit = flow => flow === FLOWS.AUDIENCE_CAMPAIGN_CTV_EDIT;\r\nexport const isDealCampaignEdit = flow => flow === FLOWS.AUDIENCE_CAMPAIGN_DEAL_EDIT;\r\n\r\nexport const isAudienceAdGroupEdit = flow => flow === FLOWS.AUDIENCE_AD_GROUP_EDIT;\r\nexport const isDealAdGroupEdit = flow => flow === FLOWS.AUDIENCE_AD_GROUP_DEAL_EDIT;\r\nexport const isCTVAdGroupEdit = flow => flow === FLOWS.AUDIENCE_AD_GROUP_CTV_EDIT;\r\n\r\nexport const isAudienceAdGroupCreation = flow => flow === FLOWS.AUDIENCE_AD_GROUP_CREATION;\r\nexport const isCTVAdGroupCreation = flow => flow === FLOWS.AUDIENCE_AD_GROUP_CTV_CREATION;\r\nexport const isDealAdGroupCreation = flow => flow === FLOWS.AUDIENCE_AD_GROUP_DEAL_CREATION;\r\n\r\nexport const isAudienceAdGroupMultiAdCreation = flow => flow === FLOWS.AUDIENCE_AD_GROUP_MULTI_AD_CREATION;\r\n\r\nexport const isAudience = flow => isAudienceCampaign(flow) ||\r\n isAudienceCampaignEdit(flow) ||\r\n isAudienceAdGroupCreation(flow) ||\r\n isAudienceAdGroupMultiAdCreation(flow) ||\r\n isAudienceAdGroupEdit(flow);\r\n\r\n// Note: Update these functions when adding ad group creation and editing to display and video.\r\nexport const isAdGroupCreation = flow => isAudienceAdGroupCreation(flow);\r\nexport const isEdit = flow => isAudienceCampaignEdit(flow) || isAudienceAdGroupEdit(flow) || isCTVCampaignEdit(flow) || isCTVAdGroupEdit(flow) || isDealCampaignEdit(flow) || isDealAdGroupEdit(flow);\r\n\r\nexport const isMultiAdsAudienceCampaign = flow => flow === FLOWS.MULTI_AUDIENCE_CAMPAIGNS || flow === FLOWS.AUDIENCE_AD_GROUP_CREATION;\r\n\r\nexport const isDisplayAdsCampaign = flow => flow === FLOWS.DISPLAY_CAMPAIGNS;\r\n\r\nexport const isVideoAdsCampaign = flow => flow === FLOWS.VIDEO_CAMPAIGNS;\r\n\r\nexport const isCTVCampaign = flow => flow === FLOWS.CTV_CAMPAIGNS || isCTVCampaignEdit(flow) || isCTVAdGroupEdit(flow) || isCTVAdGroupCreation(flow);\r\nexport const isDealCampaign = flow => flow === FLOWS.DEAL_CAMPAIGNS || isDealCampaignEdit(flow) || isDealAdGroupEdit(flow) || isDealAdGroupCreation(flow);\r\nexport const isCTVOrDeal = flow => isCTVCampaign(flow) || isDealCampaign(flow);\r\n\r\nexport const shouldEnableBidAdjustment = (flow, serverContext) => {\r\n const {\r\n DynamicPermissions: {\r\n EnableMSANDisplayCampaigns,\r\n EnableMSANVideoCampaigns,\r\n },\r\n } = serverContext;\r\n\r\n const isMSANDisplay = EnableMSANDisplayCampaigns && flow === FLOWS.DISPLAY_CAMPAIGNS;\r\n const isMSANVideo = EnableMSANVideoCampaigns && flow === FLOWS.VIDEO_CAMPAIGNS;\r\n\r\n if (isAudienceCampaign(flow) || isMSANDisplay || isMSANVideo) {\r\n if (serverContext.Permissions.IsAmplifyEnabled) {\r\n return false;\r\n }\r\n return true;\r\n }\r\n return false;\r\n};\r\n","import _ from 'underscore';\r\nimport { STEP_PATHS, FLOWS, isAudienceCampaign, isAudienceCampaignEdit, isAudienceAdGroupEdit, isAudienceAdGroupCreation, shouldEnableBidAdjustment, isCTVCampaign, isDealCampaign } from './step-constants';\r\n\r\nconst addSummaryStep = ({ steps, permissions }) => {\r\n if (permissions.dynamic.DisplayPlusSummaryPage) {\r\n steps.push(STEP_PATHS.SUMMARY);\r\n return steps;\r\n }\r\n\r\n return steps;\r\n};\r\n\r\nexport const getFlow = ({ flow, permissions }) => {\r\n if (flow === FLOWS.VIDEO_CAMPAIGNS || flow === FLOWS.CTV_CAMPAIGNS || flow === FLOWS.DEAL_CAMPAIGNS) {\r\n const steps = [\r\n STEP_PATHS.VIDEO_AD,\r\n STEP_PATHS.AD_GROUP,\r\n STEP_PATHS.CAMPAIGN_CREATION,\r\n ];\r\n\r\n return addSummaryStep({ steps, permissions });\r\n }\r\n\r\n if (flow === FLOWS.AUDIENCE_CAMPAIGNS) {\r\n const steps = [\r\n STEP_PATHS.NATIVE_AD,\r\n STEP_PATHS.AD_GROUP,\r\n STEP_PATHS.CAMPAIGN_CREATION,\r\n ];\r\n\r\n return addSummaryStep({ steps, permissions });\r\n }\r\n\r\n if (flow === FLOWS.MULTI_AUDIENCE_CAMPAIGNS) {\r\n const steps = [\r\n STEP_PATHS.MULTI_AD_MANAGER,\r\n STEP_PATHS.MULTI_NATIVE_AD,\r\n STEP_PATHS.AD_GROUP,\r\n STEP_PATHS.CAMPAIGN_CREATION,\r\n ];\r\n\r\n return addSummaryStep({ steps, permissions });\r\n }\r\n\r\n if (flow === FLOWS.DISPLAY_CAMPAIGNS) {\r\n const steps = [\r\n STEP_PATHS.DISPLAY_AD,\r\n STEP_PATHS.AD_GROUP,\r\n STEP_PATHS.CAMPAIGN_CREATION,\r\n ];\r\n\r\n return addSummaryStep({ steps, permissions });\r\n }\r\n\r\n if (flow === FLOWS.AUDIENCE_CAMPAIGN_EDIT || flow === FLOWS.AUDIENCE_CAMPAIGN_CTV_EDIT || flow === FLOWS.AUDIENCE_CAMPAIGN_DEAL_EDIT) {\r\n return [\r\n STEP_PATHS.CAMPAIGN_EDIT,\r\n ];\r\n }\r\n\r\n if (flow === FLOWS.AUDIENCE_AD_GROUP_EDIT || flow === FLOWS.AUDIENCE_AD_GROUP_CTV_EDIT || flow === FLOWS.AUDIENCE_AD_GROUP_DEAL_EDIT) {\r\n return [\r\n STEP_PATHS.AD_GROUP,\r\n ];\r\n }\r\n\r\n if (flow === FLOWS.AUDIENCE_AD_GROUP_CREATION) {\r\n return [\r\n STEP_PATHS.AD_GROUP,\r\n STEP_PATHS.NATIVE_AD,\r\n ];\r\n }\r\n\r\n if (flow === FLOWS.AUDIENCE_AD_GROUP_CTV_CREATION || flow === FLOWS.AUDIENCE_AD_GROUP_DEAL_CREATION) {\r\n return [\r\n STEP_PATHS.AD_GROUP,\r\n STEP_PATHS.VIDEO_AD,\r\n ];\r\n }\r\n\r\n if (flow === FLOWS.AUDIENCE_AD_GROUP_MULTI_AD_CREATION) {\r\n return [\r\n STEP_PATHS.AD_GROUP,\r\n STEP_PATHS.MULTI_NATIVE_AD,\r\n STEP_PATHS.MULTI_AD_MANAGER,\r\n ];\r\n }\r\n\r\n // return video by default\r\n return [\r\n STEP_PATHS.VIDEO_AD,\r\n STEP_PATHS.AD_GROUP,\r\n STEP_PATHS.CAMPAIGN_CREATION,\r\n ];\r\n};\r\n\r\nexport const getAdGroupPanels = (flow, serverContext = {}) => {\r\n const {\r\n DynamicPermissions: {\r\n XandrDeviceTarget,\r\n DisplayPlusAmplify,\r\n Enable1PPlacementTargeting,\r\n EnableMSANDisplayCampaigns,\r\n EnableMSANVideoCampaigns,\r\n DeviceTargetingForDisplay,\r\n EnableKeywordCustomSegments,\r\n MultiAdFormat,\r\n InMarketAudienceRedesign,\r\n ContentTargeting,\r\n PremiumStreaming,\r\n GenreTargets,\r\n },\r\n Permissions,\r\n } = serverContext;\r\n\r\n if (isCTVCampaign(flow) || isDealCampaign(flow)) {\r\n const options = {\r\n basicOptions: [\r\n 'ad-group-name',\r\n 'bid-value',\r\n 'location-target',\r\n 'ad-schedule',\r\n ],\r\n advancedOptions: [],\r\n };\r\n\r\n if (GenreTargets) {\r\n options.basicOptions.push('genre-targets');\r\n }\r\n\r\n if (isCTVCampaign(flow)) {\r\n options.basicOptions.push('netflix-tc', 'gender-target', 'age-target');\r\n options.advancedOptions.push('audience-target');\r\n\r\n if (InMarketAudienceRedesign) {\r\n options.advancedOptions.push('interests-target');\r\n }\r\n\r\n if (PremiumStreaming) {\r\n options.advancedOptions.push('device-target');\r\n }\r\n }\r\n\r\n return options;\r\n }\r\n\r\n if (isAudienceCampaign(flow) || isAudienceAdGroupCreation(flow)) {\r\n const is1PPlacementEnabled = Enable1PPlacementTargeting && !Permissions.IsAmplifyEnabled;\r\n const options = {\r\n basicOptions: [\r\n 'ad-group-name',\r\n isAudienceAdGroupCreation(flow) && 'bid-value',\r\n isAudienceAdGroupCreation(flow) && 'start-end-date',\r\n 'location-target',\r\n 'gender-target',\r\n 'age-target',\r\n 'predictive-targeting',\r\n ],\r\n advancedOptions: Permissions.IsDomesticSimplifiedChineseEnabled ?\r\n [\r\n 'audience-target',\r\n 'predictive-targeting-control',\r\n ] :\r\n _.compact([\r\n 'audience-target',\r\n MultiAdFormat && 'device-target',\r\n 'company-target',\r\n 'industry-target',\r\n 'job-target',\r\n is1PPlacementEnabled && !ContentTargeting && 'placements-1P-target',\r\n 'placements-target',\r\n isAudienceAdGroupCreation(flow) && 'ad-schedule',\r\n 'predictive-targeting-control',\r\n ]),\r\n };\r\n\r\n if (Permissions.IsAmplifyEnabled && DisplayPlusAmplify) {\r\n options.basicOptions.push('placement-target');\r\n options.basicOptions.push('contextual-target');\r\n }\r\n\r\n if (EnableKeywordCustomSegments) {\r\n options.advancedOptions.push('custom-segments');\r\n }\r\n\r\n if (InMarketAudienceRedesign) {\r\n options.advancedOptions.push('interests-target');\r\n }\r\n\r\n if (ContentTargeting) {\r\n options.advancedOptions.push('content-targeting-placements');\r\n }\r\n\r\n return options;\r\n } else if (isAudienceAdGroupEdit(flow)) {\r\n const is1PPlacementEnabled = Enable1PPlacementTargeting && !Permissions.IsAmplifyEnabled && !Permissions.IsDomesticSimplifiedChineseEnabled;\r\n const options = {\r\n basicOptions: [\r\n 'ad-group-name',\r\n 'start-end-date',\r\n 'bid-value',\r\n 'location-target',\r\n 'gender-target',\r\n 'age-target',\r\n 'predictive-targeting',\r\n ],\r\n advancedOptions: [\r\n 'audience-target',\r\n 'device-target',\r\n 'company-target',\r\n 'industry-target',\r\n 'job-target',\r\n 'advanced-url-options',\r\n 'ad-rotation',\r\n 'ad-schedule',\r\n 'web-exclusions',\r\n 'predictive-targeting-control',\r\n ],\r\n };\r\n\r\n if (EnableKeywordCustomSegments) {\r\n options.advancedOptions.push('custom-segments');\r\n }\r\n if (Permissions.IsAmplifyEnabled && DisplayPlusAmplify) {\r\n options.basicOptions.push('placement-target');\r\n options.basicOptions.push('contextual-target');\r\n }\r\n\r\n if (InMarketAudienceRedesign) {\r\n options.advancedOptions.push('interests-target');\r\n }\r\n\r\n if (ContentTargeting) {\r\n options.advancedOptions.push('content-targeting-placements');\r\n } else if (is1PPlacementEnabled) {\r\n options.advancedOptions.push('placements-1P-target');\r\n }\r\n\r\n return options;\r\n } else if (flow === FLOWS.DISPLAY_CAMPAIGNS) {\r\n const options = {\r\n basicOptions: [\r\n 'ad-group-name',\r\n 'location-target',\r\n 'gender-target',\r\n 'age-target',\r\n ],\r\n advancedOptions: [\r\n 'audience-target',\r\n DeviceTargetingForDisplay && 'device-target',\r\n 'ad-schedule',\r\n ],\r\n };\r\n\r\n if (EnableMSANDisplayCampaigns) {\r\n options.basicOptions.push('predictive-targeting');\r\n options.advancedOptions.push('company-target');\r\n options.advancedOptions.push('industry-target');\r\n options.advancedOptions.push('job-target');\r\n options.advancedOptions.push('predictive-targeting-control');\r\n }\r\n\r\n if (EnableKeywordCustomSegments) {\r\n options.advancedOptions.push('custom-segments');\r\n }\r\n\r\n if (InMarketAudienceRedesign) {\r\n options.advancedOptions.push('interests-target');\r\n }\r\n\r\n if (ContentTargeting) {\r\n options.advancedOptions.push('content-targeting-placements');\r\n }\r\n\r\n return options;\r\n }\r\n\r\n const options = {\r\n basicOptions: [\r\n 'ad-group-name',\r\n 'location-target',\r\n 'gender-target',\r\n 'age-target',\r\n ],\r\n advancedOptions: [\r\n 'audience-target',\r\n XandrDeviceTarget && 'device-target',\r\n 'ad-schedule',\r\n ],\r\n };\r\n\r\n if (EnableMSANVideoCampaigns) {\r\n options.basicOptions.push('predictive-targeting');\r\n options.advancedOptions.push('company-target');\r\n options.advancedOptions.push('industry-target');\r\n options.advancedOptions.push('job-target');\r\n options.advancedOptions.push('predictive-targeting-control');\r\n }\r\n\r\n if (EnableKeywordCustomSegments) {\r\n options.advancedOptions.push('custom-segments');\r\n }\r\n\r\n if (InMarketAudienceRedesign) {\r\n options.advancedOptions.push('interests-target');\r\n }\r\n\r\n if (ContentTargeting) {\r\n options.advancedOptions.push('content-targeting-placements');\r\n }\r\n\r\n return options;\r\n};\r\n\r\nexport const getCampaignPanels = (flow, serverContext) => {\r\n const {\r\n DynamicPermissions: {\r\n EnableMSANDisplayCampaigns,\r\n EnableMSANVideoCampaigns,\r\n AudienceMMACTAOptOut,\r\n EnableDoubleVerify,\r\n CampaignLifetimeBudget,\r\n },\r\n Permissions: {\r\n IsMSANDisclaimerEnabled,\r\n IsMSANISPOTEnabled,\r\n IsDomesticSimplifiedChineseEnabled,\r\n IsAmplifyEnabled,\r\n },\r\n } = serverContext;\r\n\r\n const isMSANDisplay = EnableMSANDisplayCampaigns && flow === FLOWS.DISPLAY_CAMPAIGNS;\r\n const isMSANVideo = EnableMSANVideoCampaigns && flow === FLOWS.VIDEO_CAMPAIGNS;\r\n\r\n if (isCTVCampaign(flow) || isDealCampaign(flow)) {\r\n const options = {\r\n basicOptions: [\r\n 'campaign-name',\r\n 'bid-and-budget',\r\n ],\r\n advancedOptions: [],\r\n };\r\n\r\n if (IsMSANISPOTEnabled) {\r\n options.advancedOptions.push('third-party-measurement-settings');\r\n }\r\n\r\n return options;\r\n }\r\n\r\n if (flow === FLOWS.AUDIENCE_CAMPAIGN_EDIT) {\r\n const options = {\r\n basicOptions: [\r\n 'campaign-name',\r\n 'bid-and-budget',\r\n CampaignLifetimeBudget && 'start-end-dates',\r\n 'conversions',\r\n 'location-target',\r\n ],\r\n advancedOptions: [\r\n 'ad-schedule',\r\n 'device-target',\r\n 'advanced-url-options',\r\n 'web-exclusions',\r\n ],\r\n };\r\n\r\n // We do not allow disclaimer for domestic simplified chinese since they do not support pop up disclaimer\r\n if (!IsDomesticSimplifiedChineseEnabled && IsMSANDisclaimerEnabled) {\r\n options.basicOptions.push('disclaimer');\r\n }\r\n\r\n if (AudienceMMACTAOptOut && !serverContext.Permissions.IsAmplifyEnabled) {\r\n options.basicOptions.push('call-to-action-opt-out');\r\n }\r\n\r\n if (IsMSANISPOTEnabled || EnableDoubleVerify) {\r\n options.advancedOptions.push('third-party-measurement-settings');\r\n }\r\n\r\n if (IsAmplifyEnabled) {\r\n options.basicOptions.push('campaign-goal');\r\n }\r\n\r\n return options;\r\n }\r\n\r\n if (isAudienceCampaign(flow)) {\r\n const options = {\r\n basicOptions: [\r\n 'campaign-name',\r\n 'budget-date-settings',\r\n 'bid-and-budget',\r\n 'bid-value',\r\n 'conversions',\r\n 'start-end-dates',\r\n ],\r\n advancedOptions: [\r\n 'ad-schedule',\r\n ],\r\n };\r\n\r\n if (shouldEnableBidAdjustment(flow, serverContext)) {\r\n options.advancedOptions.push('bid-adjustment');\r\n }\r\n\r\n if (!IsDomesticSimplifiedChineseEnabled && IsMSANDisclaimerEnabled) {\r\n options.basicOptions.push('disclaimer');\r\n }\r\n\r\n if (IsMSANISPOTEnabled || EnableDoubleVerify) {\r\n options.advancedOptions.push('third-party-measurement-settings');\r\n }\r\n\r\n return options;\r\n } else if (flow === FLOWS.VIDEO_CAMPAIGNS || flow === FLOWS.DISPLAY_CAMPAIGNS) {\r\n const options = {\r\n basicOptions: [\r\n 'campaign-name',\r\n 'bid-and-budget',\r\n 'bid-value',\r\n 'conversions',\r\n (isMSANDisplay || isMSANVideo) && 'start-end-dates',\r\n ],\r\n advancedOptions: _.compact([\r\n (shouldEnableBidAdjustment(flow, serverContext) &&\r\n (isMSANDisplay || isMSANVideo)) && 'bid-adjustment',\r\n ]),\r\n };\r\n\r\n if (IsMSANISPOTEnabled || EnableDoubleVerify) {\r\n options.advancedOptions.push('third-party-measurement-settings');\r\n }\r\n\r\n return options;\r\n }\r\n\r\n return {\r\n basicOptions: [\r\n 'campaign-name',\r\n 'bid-and-budget',\r\n 'bid-value',\r\n 'start-end-dates',\r\n ],\r\n advancedOptions: [],\r\n };\r\n};\r\n\r\nexport const getNativeAdPanels = (serverContext) => {\r\n const panels = {\r\n basicPanels: [\r\n 'images',\r\n 'business-name',\r\n 'text',\r\n ],\r\n advancedPanels: [\r\n 'mobile-final-url',\r\n 'advanced-url-options',\r\n 'impression-tracking-URLs',\r\n 'third-party-measurement',\r\n ],\r\n };\r\n\r\n if (serverContext.Permissions.IsAmplifyEnabled && serverContext.DynamicPermissions.DisplayPlusAmplify) {\r\n panels.basicPanels.push('logos');\r\n panels.basicPanels.push('hotspot-panel');\r\n panels.basicPanels.push('portrait-images');\r\n\r\n panels.advancedPanels.push('anchor-ad');\r\n panels.advancedPanels.push('call-to-action');\r\n } else if (serverContext.Permissions.IsMSANLogoAndCTAForMMAEnabled) {\r\n panels.basicPanels.push('logos', 'call-to-action');\r\n }\r\n\r\n return panels;\r\n};\r\n\r\nexport const getIsEditScenario = flow => isAudienceCampaignEdit(flow) || isAudienceAdGroupEdit(flow);\r\n","import React, { useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\n\r\nexport const StepHeader = ({\r\n title,\r\n description,\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n\r\n return (\r\n \r\n {i18n.getString(title)}\r\n
\r\n {description &&\r\n\r\n {i18n.getString(description)}\r\n
\r\n }\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n {ads.data && getBasicSettingsSection()}\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nVideoAds.propTypes = {\r\n data: PropTypes.shape({\r\n data: PropTypes.shape({}),\r\n }),\r\n onDataChange: PropTypes.func.isRequired,\r\n error: PropTypes.shape({\r\n errors: PropTypes.arrayOf(PropTypes.shape({})),\r\n }),\r\n hideFooter: PropTypes.bool,\r\n};\r\n\r\nVideoAds.defaultProps = {\r\n data: {},\r\n error: {},\r\n hideFooter: false,\r\n};\r\n","import { generateNameSuggestionSuffix } from '@bingads-webui-campaign/audience-campaign-shared';\r\nimport { DeviceKeys } from '@bingads-webui-campaign-react/xandr-campaign';\r\n\r\nexport const BiddingSchemes = {\r\n EnhancedCpc: 'EnhancedCpc',\r\n MaxConversions: 'MaxConversions',\r\n ManualCpm: 'ManualCpm',\r\n ManualCpV: 'ManualCpv',\r\n};\r\n\r\nexport const BidTypes = {\r\n SearchBid: 'SearchBid',\r\n CpmBid: 'CpmBid',\r\n CpvBid: 'CpvBid',\r\n};\r\n\r\nexport const BiddingSchemeToBidType = {\r\n EnhancedCpc: BidTypes.SearchBid,\r\n ManualCpc: BidTypes.SearchBid,\r\n ManualCpm: BidTypes.CpmBid,\r\n};\r\n\r\nexport const BudgetTypes = {\r\n DailyStandard: 'DailyStandard',\r\n LifetimeBudgetStandard: 'LifetimeBudgetStandard',\r\n};\r\n\r\n\r\nexport const PriceModelToRange = {\r\n EnhancedCpc: 'KeywordBidRange',\r\n ManualCpc: 'KeywordBidRange',\r\n ManualCpv: 'KeywordCPVBidRange',\r\n ManualCpm: 'KeywordCPMBidRange',\r\n};\r\n\r\nexport const AgeRanges = {\r\n EighteenToTwentyFive: 'EighteenToTwentyFive',\r\n TwentyFiveToThirtyFive: 'TwentyFiveToThirtyFive',\r\n ThirtyFiveToFifty: 'ThirtyFiveToFifty',\r\n FiftyToSixtyFive: 'FiftyToSixtyFive',\r\n SixtyFiveAndAbove: 'SixtyFiveAndAbove',\r\n Unknown: 'Unknown',\r\n};\r\n\r\nexport const GenderTypes = {\r\n Female: 'Female',\r\n Male: 'Male',\r\n Unknown: 'Unknown',\r\n};\r\n\r\nexport const DeviceTypes = {\r\n Computers: DeviceKeys.Computers,\r\n Tablets: DeviceKeys.Tablets,\r\n Smartphones: DeviceKeys.Smartphones,\r\n};\r\n\r\nexport const getInitialAdGroupData = ({ i18n }) => ({\r\n Status: 'Active',\r\n Name: generateNameSuggestionSuffix(i18n.getString(_TL_('Ad group'))),\r\n locationTargets: {\r\n bidMode: false,\r\n currentLevelSettings: {\r\n initLocations: [],\r\n peopleInLocation: true,\r\n peopleSearchingForLocation: true,\r\n targetOption: 'everywhere',\r\n },\r\n parentLevelSettings: {},\r\n useParentLevel: false,\r\n },\r\n adSchedules: {\r\n adScheduleUseSearcherTimeZone: undefined,\r\n dayTimeRanges: [],\r\n timeZone: undefined,\r\n },\r\n});\r\n\r\nexport const getInitialAdData = ({ i18n }) => ({\r\n Status: 'Active',\r\n Name: generateNameSuggestionSuffix(i18n.getString(_TL_('Ad'))),\r\n locationTargets: {\r\n bidMode: false,\r\n currentLevelSettings: {\r\n initLocations: [],\r\n peopleInLocation: true,\r\n peopleSearchingForLocation: true,\r\n targetOption: 'everywhere',\r\n },\r\n parentLevelSettings: {},\r\n useParentLevel: false,\r\n },\r\n adSchedules: {\r\n adScheduleUseSearcherTimeZone: undefined,\r\n dayTimeRanges: [],\r\n timeZone: undefined,\r\n },\r\n images: {\r\n\r\n },\r\n});\r\n\r\nexport const AdGroupCriterions = {\r\n 0: {\r\n Criterion: {\r\n BidAdjustment: 0,\r\n DayTimeCriterion: {\r\n Id: '',\r\n Day: 'Sunday',\r\n FromHour: 0,\r\n FromMinute: 0,\r\n ToHour: 24,\r\n ToMinute: 0,\r\n },\r\n Type: 'DayTime',\r\n },\r\n CriterionType: 'DayTime',\r\n Id: '',\r\n },\r\n 1: {\r\n Criterion: {\r\n BidAdjustment: 0,\r\n DayTimeCriterion: {\r\n Id: '',\r\n Day: 'Monday',\r\n FromHour: 0,\r\n FromMinute: 0,\r\n ToHour: 24,\r\n ToMinute: 0,\r\n },\r\n Type: 'DayTime',\r\n },\r\n CriterionType: 'DayTime',\r\n Id: '',\r\n },\r\n 2: {\r\n Criterion: {\r\n BidAdjustment: 0,\r\n DayTimeCriterion: {\r\n Id: '',\r\n Day: 'Tuesday',\r\n FromHour: 0,\r\n FromMinute: 0,\r\n ToHour: 24,\r\n ToMinute: 0,\r\n },\r\n Type: 'DayTime',\r\n },\r\n CriterionType: 'DayTime',\r\n Id: '',\r\n },\r\n 3: {\r\n Criterion: {\r\n BidAdjustment: 0,\r\n DayTimeCriterion: {\r\n Id: '',\r\n Day: 'Wednesday',\r\n FromHour: 0,\r\n FromMinute: 0,\r\n ToHour: 24,\r\n ToMinute: 0,\r\n },\r\n Type: 'DayTime',\r\n },\r\n CriterionType: 'DayTime',\r\n Id: '',\r\n },\r\n 4: {\r\n Criterion: {\r\n BidAdjustment: 0,\r\n DayTimeCriterion: {\r\n Id: '',\r\n Day: 'Thursday',\r\n FromHour: 0,\r\n FromMinute: 0,\r\n ToHour: 24,\r\n ToMinute: 0,\r\n },\r\n Type: 'DayTime',\r\n },\r\n CriterionType: 'DayTime',\r\n Id: '',\r\n },\r\n 5: {\r\n Criterion: {\r\n BidAdjustment: 0,\r\n DayTimeCriterion: {\r\n Id: '',\r\n Day: 'Friday',\r\n FromHour: 0,\r\n FromMinute: 0,\r\n ToHour: 24,\r\n ToMinute: 0,\r\n },\r\n Type: 'DayTime',\r\n },\r\n CriterionType: 'DayTime',\r\n Id: '',\r\n },\r\n 6: {\r\n Criterion: {\r\n BidAdjustment: 0,\r\n DayTimeCriterion: {\r\n Id: '',\r\n Day: 'Saturday',\r\n FromHour: 0,\r\n FromMinute: 0,\r\n ToHour: 24,\r\n ToMinute: 0,\r\n },\r\n Type: 'DayTime',\r\n },\r\n CriterionType: 'DayTime',\r\n Id: '',\r\n },\r\n};\r\n\r\nexport const BundleLocationCriterions = [\r\n {\r\n Status: 'Active',\r\n SelectionStatus: 'Included',\r\n Campaign: null,\r\n CriterionType: 'Location',\r\n Criterion: {\r\n Type: 'Location',\r\n BidAdjustment: 0,\r\n OriginalBidAdjustment: 0,\r\n LocationCriterion: {\r\n LocationId: 32,\r\n Name: 'Canada',\r\n NameTypeCombo: 'Canada (country/region)',\r\n Latitude: 62.5724,\r\n Longitude: -96.5672,\r\n CountryCode: 'CA',\r\n LocationType: 'Country',\r\n EnclosingLocationIds: [],\r\n Type: 'Location',\r\n LesLocationType: 'Country',\r\n },\r\n },\r\n },\r\n {\r\n Status: 'Active',\r\n SelectionStatus: 'Included',\r\n Campaign: null,\r\n CriterionType: 'Location',\r\n Criterion: {\r\n Type: 'Location',\r\n BidAdjustment: 0,\r\n OriginalBidAdjustment: 0,\r\n LocationCriterion: {\r\n LocationId: 190,\r\n Name: 'United States',\r\n NameTypeCombo: 'United States (country/region)',\r\n Latitude: 39.5036,\r\n Longitude: -99.0183,\r\n CountryCode: 'US',\r\n LocationType: 'Country',\r\n EnclosingLocationIds: [],\r\n Type: 'Location',\r\n LesLocationType: 'Country',\r\n },\r\n },\r\n },\r\n];\r\n\r\nexport const BundleCountries = [\r\n {\r\n Country: 'Canada',\r\n LocationId: 32,\r\n },\r\n {\r\n Country: 'US',\r\n LocationId: 190,\r\n },\r\n];\r\n\r\nexport const AdPreviewOverideStylesByKey = {\r\n mma_191x100: { imagePreviewHeight: 153, imagePreviewWidth: 292 },\r\n edge_178x100: { imagePreviewHeight: 220, imagePreviewWidth: 390 },\r\n msan_191x100: { imagePreviewHeight: 200, imagePreviewWidth: 382 },\r\n msan_150x100: { imagePreviewHeight: 200, imagePreviewWidth: 300 },\r\n};\r\n\r\nconst CampaignGoal = {\r\n ConvertCustomers: 'ConvertCustomers',\r\n Consideration: 'Consideration',\r\n BrandAwareness: 'BrandAwareness',\r\n SellProducts: 'SellProducts',\r\n PromoteApp: 'PromoteMyApp',\r\n SkipGoals: 'SkipGoals',\r\n NoneSelected: 'None',\r\n};\r\n\r\nexport const CampaignObjectiveType = {\r\n Unknown: 'Unknown',\r\n Acquisition: 'Acquisition',\r\n Engagement: 'Engagement',\r\n Awareness: 'Awareness',\r\n};\r\n\r\nexport const getActualGoalFromCampaignGoal = (goal) => {\r\n switch (goal) {\r\n case CampaignGoal.ConvertCustomers:\r\n return CampaignObjectiveType.Acquisition;\r\n case CampaignGoal.Consideration:\r\n return CampaignObjectiveType.Engagement;\r\n case CampaignGoal.BrandAwareness:\r\n return CampaignObjectiveType.Awareness;\r\n case CampaignGoal.SellProducts:\r\n return CampaignObjectiveType.Acquisition;\r\n case CampaignGoal.PromoteApp:\r\n return CampaignObjectiveType.Acquisition;\r\n default:\r\n return CampaignObjectiveType.Unknown;\r\n }\r\n};\r\n","import { pick, get } from 'underscore';\r\nimport { useEffect, useState, useContext } from 'react';\r\nimport appConfig from '@bingads-webui-component-legacy/config/index';\r\nimport localStorage from '@bingads-webui-component-legacy/storage/localStorage';\r\nimport { ObjectiveIDs } from '@bingads-webui-campaign-react/campaign-onboarding-v2';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport { edmCampaign } from '@bingads-webui/edm-campaign';\r\nimport { useWizardService } from '@bingads-webui-react/wizard';\r\nimport { BiddingSchemes } from './constants';\r\n\r\nconst getDisplayPlusCampaignObjective = () => {\r\n let displayPlusCampaignObjective = appConfig.get('CampaignObjective');\r\n if (!displayPlusCampaignObjective) {\r\n if (localStorage && localStorage.supportsStorage()) {\r\n displayPlusCampaignObjective = localStorage.get('CampaignObjective');\r\n displayPlusCampaignObjective = displayPlusCampaignObjective && displayPlusCampaignObjective.type;\r\n appConfig.set('CampaignObjective', displayPlusCampaignObjective);\r\n }\r\n }\r\n\r\n return displayPlusCampaignObjective;\r\n};\r\n\r\nconst readConversionGoalDetails = (cid, aid) =>\r\n edmCampaign\r\n .Customers.$withKey(cid)\r\n .Accounts.$withKey(aid)['Default.ConversionGoalDetails']\r\n .$makeCall()\r\n .toPromise();\r\n\r\nconst whitelistedSchemaPropertyKeys = [\r\n 'IsActiveConversionGoalPresent', 'IsActiveConversionGoalPresentWithValidRevenueValue',\r\n];\r\n\r\nconst getConversionGoalsDetails = (cid, aid) => readConversionGoalDetails(cid, aid)\r\n .then(model => pick(model, whitelistedSchemaPropertyKeys));\r\n\r\nconst getBiddingSchemeForConversions = (cid, aid) =>\r\n getConversionGoalsDetails(cid, aid).then((goalDetails) => {\r\n if (goalDetails.IsActiveConversionGoalPresent) {\r\n return BiddingSchemes.MaxConversions;\r\n }\r\n\r\n return BiddingSchemes.EnhancedCpc;\r\n });\r\n\r\nexport const getBiddingScheme = (cid, aid) => {\r\n const objective = getDisplayPlusCampaignObjective();\r\n\r\n switch (objective) {\r\n case ObjectiveIDs.Conversions:\r\n return getBiddingSchemeForConversions(cid, aid);\r\n case ObjectiveIDs.Consideration:\r\n return new Promise((resolve) => {\r\n resolve(BiddingSchemes.EnhancedCpc);\r\n });\r\n case ObjectiveIDs.Awareness:\r\n return new Promise((resolve) => {\r\n resolve(BiddingSchemes.ManualCpm);\r\n });\r\n default:\r\n return new Promise((resolve) => {\r\n resolve(undefined);\r\n });\r\n }\r\n};\r\n\r\nexport const useBiddingScheme = ({\r\n cid, aid, getDefaultCampaign, i18n,\r\n}) => {\r\n const [biddingScheme, setBiddingScheme] = useState(null);\r\n const { state } = useWizardService();\r\n\r\n const serverContext = useContext(ServerContext);\r\n\r\n useEffect(() => {\r\n const biddingSchemeContext = get(state, ['context', 'wizardData', 'campaign', 'BiddingScheme', 'Type']);\r\n if (biddingSchemeContext) {\r\n setBiddingScheme(biddingSchemeContext);\r\n return;\r\n }\r\n\r\n getBiddingScheme(cid, aid).then((biddingSchemeRes) => {\r\n if (biddingSchemeRes) {\r\n setBiddingScheme(biddingSchemeRes);\r\n } else {\r\n setBiddingScheme(getDefaultCampaign(i18n, serverContext).data.BiddingScheme.Type);\r\n }\r\n });\r\n }, [cid, aid, state, getDefaultCampaign, i18n, serverContext]);\r\n\r\n return biddingScheme;\r\n};\r\n\r\n","export class AdsError {\r\n constructor(message, property, code) {\r\n this.message = message;\r\n this.property = property;\r\n this.code = code;\r\n }\r\n\r\n toString() {\r\n return this.message;\r\n }\r\n}\r\n","import { useWizardService, WIZARD_EVENTS } from '@bingads-webui-react/wizard';\r\n\r\nexport const useSkipAdCreationState = () => {\r\n const { state: wizardState, send: wizardSend } = useWizardService();\r\n\r\n return [\r\n wizardState.context.wizardData.isSkipAdCreation,\r\n value => wizardSend(WIZARD_EVENTS.UPDATE_WIZARD_DATA, { isSkipAdCreation: value }),\r\n ];\r\n};\r\n","import { useContext, useCallback } from 'react';\r\nimport _ from 'underscore';\r\nimport Promise from 'bluebird';\r\nimport { useWizardService, WIZARD_EVENTS } from '@bingads-webui-react/wizard';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport { ScopeContext } from '@bingads-webui-react/scope-service';\r\nimport { saveCampaign, saveAdGroup } from '@bingads-webui-campaign-react/xandr-campaign';\r\nimport { ActivityContext, ScenarioContext } from '@bingads-webui-react/hoc-with-signal';\r\nimport { PermissionsContext } from '@bingads-webui-react/hoc-with-permissions';\r\nimport { RecommendationContext } from '@bingads-webui-campaign-react/perf-max-recommendation';\r\nimport { logCopilotRecommendations } from '@bingads-webui-campaign-react/copilot-common';\r\nimport { getGlobalSelectedCampaignObjective } from '@bingads-webui-campaign-react/campaign-onboarding-v2';\r\nimport { useCopilotLoggers } from '@bingads-webui-campaign-react/copilot-loggers';\r\nimport { AdFormat } from '@bingads-webui-campaign-react/display-plus-native-ads';\r\nimport { ImageOData } from '@bingads-webui-campaign/image-odata';\r\nimport { getVideoDeal, modelConstraints, getODataConfig } from '@bingads-webui-campaign-react/xandr-video-campaign-shared-components';\r\nimport { getBiddingScheme } from './bidding-schemes';\r\nimport { BundleLocationCriterions, BundleCountries, getActualGoalFromCampaignGoal } from './constants';\r\nimport { AdsError } from './adsError';\r\nimport { useSkipAdCreationState } from './use-skip-ad-creation';\r\nimport { isAudience as isAudienceFlow, isDisplayAdsCampaign, isDealCampaign } from '../step-constants';\r\n\r\nexport const useAdsRepository = ({\r\n saveAds: saveAsParam, defaultCampaign, defaultAdGroup,\r\n}) => {\r\n const { send, state } = useWizardService();\r\n const [isSkipAdCreation, setSkipAdCreation] = useSkipAdCreationState();\r\n const i18n = useContext(I18nContext);\r\n const serverContext = useContext(ServerContext);\r\n const permissions = useContext(PermissionsContext);\r\n const [recommendationContext] = useContext(RecommendationContext);\r\n const { scope } = useContext(ScopeContext) || {};\r\n const scenarioContext = useContext(ScenarioContext);\r\n const activityContext = useContext(ActivityContext);\r\n\r\n const oDataConfig = getODataConfig(serverContext);\r\n\r\n const imageOdata = new ImageOData(scope.values.cid, scope.values.aid, oDataConfig);\r\n\r\n const { logSuggestionsApplied } = useCopilotLoggers();\r\n\r\n const { flow } = state.context.wizardData;\r\n\r\n const isImageFittingEnabled = _.result(permissions.dynamic, 'ImageFittingMVP', false)\r\n && !_.result(permissions.dynamic, 'ImageFittingExlcudeMAE', true)\r\n && _.result(permissions.dynamic, 'ImageFittingUnifiedImageROI', false);\r\n\r\n const saveAds = useCallback((...args) => saveAsParam(...args, { isImageFittingEnabled }), [isImageFittingEnabled, saveAsParam]);\r\n\r\n const load = useCallback(() => new Promise((resolve) => {\r\n if (state.context.wizardData.ads) {\r\n const isAudience = isAudienceFlow(flow);\r\n\r\n if (!isAudience || (isAudience && !permissions.dynamic.DisplayPlusMultipleAds)) {\r\n resolve(state.context.wizardData.ads.ads);\r\n } else {\r\n const { editingAdId } = state.context.wizardData;\r\n\r\n if (!editingAdId) {\r\n const ids = _.keys(state.context.wizardData.ads.ads);\r\n\r\n if (ids.length > 0) {\r\n resolve(state.context.wizardData.ads.ads[ids[0]]);\r\n } else {\r\n resolve({\r\n data: [],\r\n isValid: false,\r\n isDirty: false,\r\n currentPageIndex: 1,\r\n });\r\n }\r\n } else {\r\n resolve(state.context.wizardData.ads.ads[editingAdId] || {});\r\n }\r\n }\r\n } else {\r\n const isDealFlow = isDealCampaign(flow);\r\n if (isDealFlow) {\r\n const deal = getVideoDeal();\r\n if (deal) {\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, { deal });\r\n }\r\n }\r\n\r\n resolve({\r\n data: [],\r\n isValid: false,\r\n isDirty: false,\r\n currentPageIndex: 1,\r\n });\r\n }\r\n }), [flow, permissions.dynamic.DisplayPlusMultipleAds, send, state.context.wizardData]);\r\n\r\n const createSaveCampaignPromise = useCallback(() => {\r\n if (state.context.wizardData.campaign) {\r\n return new Promise((resolve) => {\r\n resolve({ campaign: { data: state.context.wizardData.campaign } });\r\n });\r\n }\r\n\r\n return getBiddingScheme(scope.values.cid, scope.values.aid).then((biddingScheme) => {\r\n if (biddingScheme) {\r\n // eslint-disable-next-line no-param-reassign\r\n defaultCampaign.data.BiddingScheme.Type = biddingScheme;\r\n }\r\n\r\n if (permissions.IsAmplifyEnabled && permissions.IsBoostPassCampaignGoalEnabled && getGlobalSelectedCampaignObjective()) {\r\n const objectiveType = getActualGoalFromCampaignGoal(getGlobalSelectedCampaignObjective());\r\n // eslint-disable-next-line no-param-reassign\r\n defaultCampaign.data.CampaignObjectiveSetting = {\r\n CampaignObjectiveSettingType: objectiveType,\r\n };\r\n }\r\n\r\n return saveCampaign({\r\n campaign: defaultCampaign,\r\n }, {\r\n scenario: scenarioContext.name,\r\n activityLogger: scenarioContext.createActivity('saveDefaultCampaign'),\r\n i18n,\r\n });\r\n });\r\n }, [defaultCampaign, i18n, scenarioContext, state.context.wizardData.campaign, scope.values.cid, scope.values.aid, permissions.IsAmplifyEnabled, permissions.IsBoostPassCampaignGoalEnabled]);\r\n\r\n const createSaveAdGroupPromise = useCallback(saveCampaignPromise => saveCampaignPromise.then((campaignData) => {\r\n if (state.context.wizardData.adGroup) {\r\n return new Promise((resolve) => {\r\n resolve({ adGroup: { data: state.context.wizardData.adGroup } });\r\n });\r\n }\r\n\r\n const campaignMtModel = campaignData.campaign.data;\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, { campaign: campaignMtModel, isDefaultCampaignStepModel: true });\r\n\r\n let adGroupModelWithConstraintsPromise = Promise.resolve(defaultAdGroup.data);\r\n\r\n if (isDealCampaign(flow) && defaultAdGroup.data.deal) {\r\n adGroupModelWithConstraintsPromise = modelConstraints(defaultAdGroup.data.deal, defaultAdGroup.data, serverContext);\r\n }\r\n\r\n return adGroupModelWithConstraintsPromise\r\n .then(constraintAdGroupModel => saveAdGroup({\r\n adGroup: { data: constraintAdGroupModel },\r\n campaign: campaignMtModel,\r\n BundleLocationCriterions,\r\n BundleCountries,\r\n isDisplayPlus: true,\r\n flow: state.context.wizardData.flow,\r\n }, {\r\n scenario: scenarioContext.name,\r\n activityLogger: scenarioContext.createActivity('saveDefaultAdGroup'),\r\n i18n,\r\n serverContext,\r\n }));\r\n }), [defaultAdGroup, flow, i18n, scenarioContext, send, serverContext, state.context.wizardData.adGroup, state.context.wizardData.flow]);\r\n\r\n const createAds = useCallback(\r\n (saveCampaignPromise, saveAdGroupPromise, adsData) => Promise.all([saveCampaignPromise, saveAdGroupPromise])\r\n .then(([campaignData, adGroupData]) => {\r\n const campaignMtModel = campaignData.campaign.data;\r\n const adGroupMtModel = adGroupData.adGroup.data;\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, { adGroup: adGroupMtModel, isDefaultAdGroupStepModel: true });\r\n\r\n if (isSkipAdCreation) {\r\n return Promise.resolve().then(() => {\r\n if (activityContext) {\r\n activityContext.signal('onAdsSaved - skip ad save}');\r\n activityContext.signal(`campaignId - ${campaignMtModel.Id}`);\r\n }\r\n\r\n setSkipAdCreation(false);\r\n });\r\n }\r\n\r\n return saveAds({\r\n ads: adsData,\r\n campaign: campaignMtModel,\r\n adGroup: adGroupMtModel,\r\n oldAdsModel: adsData,\r\n activity: activityContext,\r\n imageOdata,\r\n permissions,\r\n }, {\r\n scenario: scenarioContext.name,\r\n activityLogger: scenarioContext.createActivity('saveAds'),\r\n i18n,\r\n serverContext,\r\n }).then((adData) => {\r\n const isAudience = isAudienceFlow(state.context.wizardData.flow);\r\n const isDisplayAdsCampaignFlow = isDisplayAdsCampaign(state.context.wizardData.flow);\r\n const isMultiAdFormatEnabled = permissions.dynamic.MultiAdFormat;\r\n\r\n if (isAudience && permissions.dynamic.DisplayPlusMultipleAds) {\r\n const { ads: createdAd } = adData;\r\n\r\n const savedAds = state.context.wizardData.ads && state.context.wizardData.ads.ads;\r\n const updatedAds = {\r\n serverErrors: [],\r\n systemErrors: [],\r\n ads: { ...savedAds },\r\n };\r\n\r\n if (!isMultiAdFormatEnabled) {\r\n updatedAds.ads[createdAd.data.Id] = { ...createdAd };\r\n } else if (adsData.adSubType === AdFormat.Native) {\r\n updatedAds.ads[createdAd.data.Id] = { ...createdAd, adSubType: adsData.adSubType };\r\n } else {\r\n _.forEach(createdAd.data, (ad) => {\r\n updatedAds.ads[ad.Id] = { ...createdAd, adSubType: adsData.adSubType, data: [ad] };\r\n });\r\n }\r\n\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, { ads: updatedAds });\r\n } else {\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, { ads: adData });\r\n }\r\n\r\n if (isAudience && permissions.dynamic.DisplayPlusCopilotRecommendations\r\n && (!isMultiAdFormatEnabled || (isMultiAdFormatEnabled && adsData.adSubType === AdFormat.Native))\r\n ) {\r\n logCopilotRecommendations({\r\n recommendationContext,\r\n assetGroup: adData.ads.data,\r\n campaignId: campaignMtModel.Id,\r\n });\r\n }\r\n\r\n if ((isDisplayAdsCampaignFlow && permissions.dynamic.DisplayPlusCopilotAssetGeneration) ||\r\n (isMultiAdFormatEnabled && adsData.adSubType === AdFormat.Display)\r\n ) {\r\n // get total copilot ads\r\n const totalCopilotAds = _.filter(adsData.data, adD => adD.data.creativeData);\r\n const suggestionIds = totalCopilotAds.map(ad => ad.data.creativeData.creativeMeta.recommendationId);\r\n\r\n logSuggestionsApplied(\r\n campaignMtModel.Id,\r\n adGroupMtModel.Id,\r\n undefined /* textSuggestions */,\r\n suggestionIds\r\n );\r\n\r\n if (activityContext) {\r\n activityContext.signal(`[DisplayAdsCopilot] - Saved copilot ads: ${totalCopilotAds.length}`);\r\n }\r\n }\r\n if (activityContext) {\r\n activityContext.signal(`onAdsSaved - ${JSON.stringify(adData)}`);\r\n activityContext.signal(`campaignId - ${campaignMtModel.Id}`);\r\n }\r\n return adData;\r\n });\r\n })\r\n // eslint-disable-next-line prefer-promise-reject-errors\r\n .catch(error => Promise.reject({ error: { errors: error.serverErrors } })),\r\n [send, isSkipAdCreation, saveAds, activityContext, scenarioContext, i18n, setSkipAdCreation, state.context.wizardData.flow, state.context.wizardData.ads, permissions.dynamic.DisplayPlusMultipleAds, permissions.dynamic.DisplayPlusCopilotRecommendations, permissions.dynamic.MultiAdFormat, permissions.dynamic.DisplayPlusCopilotAssetGeneration, recommendationContext, logSuggestionsApplied]\r\n );\r\n\r\n const save = useCallback(({ data }) => {\r\n if (_.isEmpty(data.data) && !isSkipAdCreation) {\r\n // eslint-disable-next-line prefer-promise-reject-errors\r\n return Promise.reject({\r\n error: {\r\n errors: [new AdsError(i18n.getString(_TL_('Please create an ad')), 'Ad', 'AdCreationMustCreateAtLeastOneAd')],\r\n },\r\n });\r\n }\r\n\r\n const saveCampaignPromise = createSaveCampaignPromise();\r\n\r\n const saveAdGroupPromise = createSaveAdGroupPromise(saveCampaignPromise);\r\n\r\n return createAds(saveCampaignPromise, saveAdGroupPromise, data);\r\n }, [createAds, createSaveAdGroupPromise, createSaveCampaignPromise, i18n, isSkipAdCreation]);\r\n\r\n return {\r\n load,\r\n save,\r\n };\r\n};\r\n","export const getDaysInTheFuture = (numDaysInTheFuture) => {\r\n const futureDate = new Date();\r\n futureDate.setDate(futureDate.getDate() + numDaysInTheFuture);\r\n return futureDate;\r\n};\r\n\r\nexport const getTomorrow = () => getDaysInTheFuture(1);\r\n","import { CampaignTypes, CampaignSubTypes, CampaignSubTypeTextMapping } from '@bingads-webui-campaign-react/constants';\r\nimport { PriceModelToRange } from '../../common/constants';\r\n\r\n/**\r\n * Default values for bid recommendations by ([CampaignType][CampaignSubType][BiddingScheme][Currency]).\r\n * Keys to arrays of [ bidRecommendation, bidFloor, bidCeil ] (array for code compression vs. objects)\r\n *\r\n * Source: https://microsoft.sharepoint.com/:x:/r/teams/MAPPMteamFTE/Shared%20Documents/Area%20Documents/MSAN/AWF/Audience%20Demand%20Analysis/DNV%20Recommended%20Bids.xlsx?d=w8a013bcda74d4804ad645dacf03f2c73&csf=1&web=1&e=AIpi0t\r\n * Snapshot as of 2024-10-10\r\n */\r\nexport const DNVBidRecommendations = {\r\n [CampaignTypes.Audience]: {\r\n [CampaignSubTypes.AudienceStatic]: {\r\n CPC: {\r\n USD: [1.2, 1, 3], ALL: [106.2, 88.5, 265.5], DZD: [158.7, 132.3, 396.8], XCD: [3.2, 2.7, 8.1], ARS: [1163.7, 969.8, 2909.3], AUD: [1.7, 1.4, 4.3], EUR: [1.1, 0.9, 2.7], BDT: [143.9, 119.9, 359.7], BWP: [15.6, 13.0, 39.1], BRL: [6.5, 5.4, 16.3], BZD: [2.4, 2.0, 6.0], BND: [1.5, 1.3, 3.8], BGN: [2.1, 1.8, 5.3], BYN: [3.9, 3.3, 9.8], XAF: [716.3, 596.9, 1790.7], CAD: [1.6, 1.4, 4.1], LKR: [355.4, 296.2, 888.6], CLP: [1077.5, 897.9, 2693.7], TWD: [38.0, 31.6, 94.9], COP: [5008.8, 4174.0, 12522.1], CRC: [622.4, 518.7, 1556.0], HRK: [8.1, 6.8, 20.3], CZK: [27.1, 22.6, 67.8], XOF: [703.5, 586.2, 1758.7], DKK: [8.0, 6.7, 20.0], DOP: [72.4, 60.3, 181.0], ETB: [142.8, 119.0, 357.0], GHS: [19.0, 15.8, 47.4], GTQ: [9.3, 7.7, 23.2], HUF: [427.0, 355.9, 1067.6], ISK: [162.0, 135.0, 405.1], INR: [100.6, 83.8, 251.4], IDR: [18168.0, 15140.0, 45420.0], JMD: [188.7, 157.2, 471.7], JPY: [171.6, 143.0, 429.1], KZT: [577.0, 480.8, 1442.4], KES: [154.8, 129.0, 387.0], KRW: [1569.2, 1307.7, 3923.1], KGS: [101.0, 84.2, 252.6], CHF: [1.0, 0.8, 2.5], MWK: [2080.8, 1734.0, 5202.0], MYR: [4.9, 4.1, 12.4], MVR: [18.5, 15.4, 46.1], MUR: [55.1, 45.9, 137.7], MXN: [23.5, 19.6, 58.8], MNT: [4081.2, 3401.0, 10203.0], MAD: [11.7, 9.7, 29.1], NZD: [1.9, 1.6, 4.7], NGN: [2004.0, 1670.0, 5010.0], NOK: [12.6, 10.5, 31.6], PKR: [333.5, 277.9, 833.6], PEN: [4.5, 3.7, 11.2], PHP: [67.2, 56.0, 168.1], PLN: [4.6, 3.8, 11.5], RUB: [111.8, 93.1, 279.4], RWF: [1605.0, 1337.5, 4012.5], SGD: [1.5, 1.3, 3.8], VND: [29478.0, 24565.0, 73695.0], ZAR: [20.7, 17.2, 51.7], SEK: [12.2, 10.1, 30.4], THB: [38.6, 32.2, 96.5], TOP: [2.8, 2.3, 7.0], TTD: [8.1, 6.7, 20.2], TRY: [41.0, 34.2, 102.6], UGX: [4424.4, 3687.0, 11061.0], MKD: [66.3, 55.2, 165.7], EGP: [58.0, 48.3, 144.9], GBP: [0.9, 0.7, 2.2], TZS: [3255.0, 2712.5, 8137.5], UYU: [50.0, 41.7, 125.0], UZS: [15258.5, 12715.4, 38146.2], ZMW: [31.7, 26.4, 79.3], FJD: [2.7, 2.2, 6.6], HKD: [9.3, 7.8, 23.3], MOP: [9.6, 8.0, 24.0], AZN: [2.0, 1.7, 5.1], BHD: [0.5, 0.4, 1.1], AMD: [464.7, 387.3, 1161.9], GEL: [3.3, 2.7, 8.2], ILS: [4.5, 3.7, 11.2], JOD: [0.9, 0.7, 2.1], KWD: [0.4, 0.3, 0.9], LBP: [107411.4, 89509.5, 268528.5], OMR: [0.5, 0.4, 1.2], QAR: [4.4, 3.6, 10.9], SAR: [4.5, 3.8, 11.3], TND: [3.6, 3.0, 9.1],\r\n },\r\n CPM: {\r\n USD: [0.4, 0.3, 1], ALL: [35.4, 26.6, 88.5], DZD: [52.9, 39.7, 132.3], XCD: [1.1, 0.8, 2.7], ARS: [387.9, 290.9, 969.8], AUD: [0.6, 0.4, 1.4], EUR: [0.4, 0.3, 0.9], BDT: [48.0, 36.0, 119.9], BWP: [5.2, 3.9, 13.0], BRL: [2.2, 1.6, 5.4], BZD: [0.8, 0.6, 2.0], BND: [0.5, 0.4, 1.3], BGN: [0.7, 0.5, 1.8], BYN: [1.3, 1.0, 3.3], XAF: [238.8, 179.1, 596.9], CAD: [0.5, 0.4, 1.4], LKR: [118.5, 88.9, 296.2], CLP: [359.2, 269.4, 897.9], TWD: [12.7, 9.5, 31.6], COP: [1669.6, 1252.2, 4174.0], CRC: [207.5, 155.6, 518.7], HRK: [2.7, 2.0, 6.8], CZK: [9.0, 6.8, 22.6], XOF: [234.5, 175.9, 586.2], DKK: [2.7, 2.0, 6.7], DOP: [24.1, 18.1, 60.3], ETB: [47.6, 35.7, 119.0], GHS: [6.3, 4.7, 15.8], GTQ: [3.1, 2.3, 7.7], HUF: [142.3, 106.8, 355.9], ISK: [54.0, 40.5, 135.0], INR: [33.5, 25.1, 83.8], IDR: [6056.0, 4542.0, 15140.0], JMD: [62.9, 47.2, 157.2], JPY: [57.2, 42.9, 143.0], KZT: [192.3, 144.2, 480.8], KES: [51.6, 38.7, 129.0], KRW: [523.1, 392.3, 1307.7], KGS: [33.7, 25.3, 84.2], CHF: [0.3, 0.3, 0.8], MWK: [693.6, 520.2, 1734.0], MYR: [1.6, 1.2, 4.1], MVR: [6.2, 4.6, 15.4], MUR: [18.4, 13.8, 45.9], MXN: [7.8, 5.9, 19.6], MNT: [1360.4, 1020.3, 3401.0], MAD: [3.9, 2.9, 9.7], NZD: [0.6, 0.5, 1.6], NGN: [668.0, 501.0, 1670.0], NOK: [4.2, 3.2, 10.5], PKR: [111.2, 83.4, 277.9], PEN: [1.5, 1.1, 3.7], PHP: [22.4, 16.8, 56.0], PLN: [1.5, 1.2, 3.8], RUB: [37.3, 27.9, 93.1], RWF: [535.0, 401.2, 1337.5], SGD: [0.5, 0.4, 1.3], VND: [9826.0, 7369.5, 24565.0], ZAR: [6.9, 5.2, 17.2], SEK: [4.1, 3.0, 10.1], THB: [12.9, 9.7, 32.2], TOP: [0.9, 0.7, 2.3], TTD: [2.7, 2.0, 6.7], TRY: [13.7, 10.3, 34.2], UGX: [1474.8, 1106.1, 3687.0], MKD: [22.1, 16.6, 55.2], EGP: [19.3, 14.5, 48.3], GBP: [0.3, 0.2, 0.7], TZS: [1085.0, 813.7, 2712.5], UYU: [16.7, 12.5, 41.7], UZS: [5086.2, 3814.6, 12715.4], ZMW: [10.6, 7.9, 26.4], FJD: [0.9, 0.7, 2.2], HKD: [3.1, 2.3, 7.8], MOP: [3.2, 2.4, 8.0], AZN: [0.7, 0.5, 1.7], BHD: [0.2, 0.1, 0.4], AMD: [154.9, 116.2, 387.3], GEL: [1.1, 0.8, 2.7], ILS: [1.5, 1.1, 3.7], JOD: [0.3, 0.2, 0.7], KWD: [0.1, 0.1, 0.3], LBP: [35803.8, 26852.8, 89509.5], OMR: [0.2, 0.1, 0.4], QAR: [1.5, 1.1, 3.6], SAR: [1.5, 1.1, 3.8], TND: [1.2, 0.9, 3.0],\r\n },\r\n },\r\n [CampaignSubTypes.DisplayAds]: {\r\n CPC: {\r\n USD: [0.6, 0.3, 1.2], ALL: [49.6, 26.6, 106.2], DZD: [74.1, 39.7, 158.7], XCD: [1.5, 0.8, 3.2], ARS: [543.1, 290.9, 1163.7], AUD: [0.8, 0.4, 1.7], EUR: [0.5, 0.3, 1.1], BDT: [67.1, 36.0, 143.9], BWP: [7.3, 3.9, 15.6], BRL: [3.0, 1.6, 6.5], BZD: [1.1, 0.6, 2.4], BND: [0.7, 0.4, 1.5], BGN: [1.0, 0.5, 2.1], BYN: [1.8, 1.0, 3.9], XAF: [334.3, 179.1, 716.3], CAD: [0.8, 0.4, 1.6], LKR: [165.9, 88.9, 355.4], CLP: [502.8, 269.4, 1077.5], TWD: [17.7, 9.5, 38.0], COP: [2337.5, 1252.2, 5008.8], CRC: [290.5, 155.6, 622.4], HRK: [3.8, 2.0, 8.1], CZK: [12.7, 6.8, 27.1], XOF: [328.3, 175.9, 703.5], DKK: [3.7, 2.0, 8.0], DOP: [33.8, 18.1, 72.4], ETB: [66.6, 35.7, 142.8], GHS: [8.8, 4.7, 19.0], GTQ: [4.3, 2.3, 9.3], HUF: [199.3, 106.8, 427.0], ISK: [75.6, 40.5, 162.0], INR: [46.9, 25.1, 100.6], IDR: [8478.4, 4542.0, 18168.0], JMD: [88.1, 47.2, 188.7], JPY: [80.1, 42.9, 171.6], KZT: [269.3, 144.2, 577.0], KES: [72.2, 38.7, 154.8], KRW: [732.3, 392.3, 1569.2], KGS: [47.2, 25.3, 101.0], CHF: [0.5, 0.3, 1.0], MWK: [971.0, 520.2, 2080.8], MYR: [2.3, 1.2, 4.9], MVR: [8.6, 4.6, 18.5], MUR: [25.7, 13.8, 55.1], MXN: [11.0, 5.9, 23.5], MNT: [1904.6, 1020.3, 4081.2], MAD: [5.4, 2.9, 11.7], NZD: [0.9, 0.5, 1.9], NGN: [935.2, 501.0, 2004.0], NOK: [5.9, 3.2, 12.6], PKR: [155.6, 83.4, 333.5], PEN: [2.1, 1.1, 4.5], PHP: [31.4, 16.8, 67.2], PLN: [2.1, 1.2, 4.6], RUB: [52.2, 27.9, 111.8], RWF: [749.0, 401.2, 1605.0], SGD: [0.7, 0.4, 1.5], VND: [13756.4, 7369.5, 29478.0], ZAR: [9.7, 5.2, 20.7], SEK: [5.7, 3.0, 12.2], THB: [18.0, 9.7, 38.6], TOP: [1.3, 0.7, 2.8], TTD: [3.8, 2.0, 8.1], TRY: [19.1, 10.3, 41.0], UGX: [2064.7, 1106.1, 4424.4], MKD: [30.9, 16.6, 66.3], EGP: [27.0, 14.5, 58.0], GBP: [0.4, 0.2, 0.9], TZS: [1519.0, 813.7, 3255.0], UYU: [23.3, 12.5, 50.0], UZS: [7120.6, 3814.6, 15258.5], ZMW: [14.8, 7.9, 31.7], FJD: [1.2, 0.7, 2.7], HKD: [4.3, 2.3, 9.3], MOP: [4.5, 2.4, 9.6], AZN: [1.0, 0.5, 2.0], BHD: [0.2, 0.1, 0.5], AMD: [216.9, 116.2, 464.7], GEL: [1.5, 0.8, 3.3], ILS: [2.1, 1.1, 4.5], JOD: [0.4, 0.2, 0.9], KWD: [0.2, 0.1, 0.4], LBP: [50125.3, 26852.8, 107411.4], OMR: [0.2, 0.1, 0.5], QAR: [2.0, 1.1, 4.4], SAR: [2.1, 1.1, 4.5], TND: [1.7, 0.9, 3.6],\r\n },\r\n CPM: {\r\n USD: [1.3, 1, 2], ALL: [115.1, 88.5, 177.0], DZD: [172.0, 132.3, 264.5], XCD: [3.5, 2.7, 5.4], ARS: [1260.7, 969.8, 1939.5], AUD: [1.9, 1.4, 2.9], EUR: [1.2, 0.9, 1.8], BDT: [155.9, 119.9, 239.8], BWP: [16.9, 13.0, 26.1], BRL: [7.1, 5.4, 10.9], BZD: [2.6, 2.0, 4.0], BND: [1.7, 1.3, 2.6], BGN: [2.3, 1.8, 3.5], BYN: [4.3, 3.3, 6.5], XAF: [776.0, 596.9, 1193.8], CAD: [1.8, 1.4, 2.7], LKR: [385.1, 296.2, 592.4], CLP: [1167.3, 897.9, 1795.8], TWD: [41.1, 31.6, 63.3], COP: [5426.3, 4174.0, 8348.1], CRC: [674.3, 518.7, 1037.4], HRK: [8.8, 6.8, 13.5], CZK: [29.4, 22.6, 45.2], XOF: [762.1, 586.2, 1172.5], DKK: [8.7, 6.7, 13.4], DOP: [78.4, 60.3, 120.7], ETB: [154.7, 119.0, 238.0], GHS: [20.5, 15.8, 31.6], GTQ: [10.0, 7.7, 15.4], HUF: [462.6, 355.9, 711.7], ISK: [175.5, 135.0, 270.1], INR: [108.9, 83.8, 167.6], IDR: [19682.0, 15140.0, 30280.0], JMD: [204.4, 157.2, 314.5], JPY: [186.0, 143.0, 286.1], KZT: [625.1, 480.8, 961.6], KES: [167.7, 129.0, 258.0], KRW: [1700.0, 1307.7, 2615.4], KGS: [109.5, 84.2, 168.4], CHF: [1.1, 0.8, 1.7], MWK: [2254.2, 1734.0, 3468.0], MYR: [5.4, 4.1, 8.2], MVR: [20.0, 15.4, 30.8], MUR: [59.7, 45.9, 91.8], MXN: [25.5, 19.6, 39.2], MNT: [4421.3, 3401.0, 6802.0], MAD: [12.6, 9.7, 19.4], NZD: [2.0, 1.6, 3.1], NGN: [2171.0, 1670.0, 3340.0], NOK: [13.7, 10.5, 21.1], PKR: [361.2, 277.9, 555.8], PEN: [4.8, 3.7, 7.4], PHP: [72.8, 56.0, 112.1], PLN: [5.0, 3.8, 7.7], RUB: [121.1, 93.1, 186.3], RWF: [1738.7, 1337.5, 2675.0], SGD: [1.7, 1.3, 2.6], VND: [31934.5, 24565.0, 49130.0], ZAR: [22.4, 17.2, 34.5], SEK: [13.2, 10.1, 20.3], THB: [41.8, 32.2, 64.4], TOP: [3.0, 2.3, 4.7], TTD: [8.8, 6.7, 13.5], TRY: [44.4, 34.2, 68.4], UGX: [4793.1, 3687.0, 7374.0], MKD: [71.8, 55.2, 110.5], EGP: [62.8, 48.3, 96.6], GBP: [1.0, 0.7, 1.5], TZS: [3526.2, 2712.5, 5425.0], UYU: [54.2, 41.7, 83.4], UZS: [16530.0, 12715.4, 25430.8], ZMW: [34.4, 26.4, 52.8], FJD: [2.9, 2.2, 4.4], HKD: [10.1, 7.8, 15.5], MOP: [10.4, 8.0, 16.0], AZN: [2.2, 1.7, 3.4], BHD: [0.5, 0.4, 0.8], AMD: [503.5, 387.3, 774.6], GEL: [3.5, 2.7, 5.5], ILS: [4.8, 3.7, 7.4], JOD: [0.9, 0.7, 1.4], KWD: [0.4, 0.3, 0.6], LBP: [116362.3, 89509.5, 179019.0], OMR: [0.5, 0.4, 0.8], QAR: [4.7, 3.6, 7.3], SAR: [4.9, 3.8, 7.5], TND: [3.9, 3.0, 6.1],\r\n },\r\n },\r\n [CampaignSubTypes.BrandAwarenessVideoAds]: {\r\n CPC: {\r\n USD: [3.9, 1, 4], ALL: [340.7, 88.5, 354.0], DZD: [509.2, 132.3, 529.1], XCD: [10.4, 2.7, 10.8], ARS: [3733.6, 969.8, 3879.1], AUD: [5.5, 1.4, 5.8], EUR: [3.4, 0.9, 3.6], BDT: [461.6, 119.9, 479.6], BWP: [50.2, 13.0, 52.1], BRL: [21.0, 5.4, 21.8], BZD: [7.7, 2.0, 8.0], BND: [4.9, 1.3, 5.1], BGN: [6.7, 1.8, 7.0], BYN: [12.6, 3.3, 13.1], XAF: [2298.1, 596.9, 2387.6], CAD: [5.2, 1.4, 5.4], LKR: [1140.4, 296.2, 1184.8], CLP: [3456.9, 897.9, 3591.6], TWD: [121.8, 31.6, 126.6], COP: [16070.1, 4174.0, 16696.2], CRC: [1996.9, 518.7, 2074.7], HRK: [26.0, 6.8, 27.0], CZK: [87.0, 22.6, 90.4], XOF: [2257.1, 586.2, 2345.0], DKK: [25.7, 6.7, 26.7], DOP: [232.3, 60.3, 241.3], ETB: [458.1, 119.0, 476.0], GHS: [60.8, 15.8, 63.2], GTQ: [29.7, 7.7, 30.9], HUF: [1370.0, 355.9, 1423.4], ISK: [519.9, 135.0, 540.1], INR: [322.6, 83.8, 335.2], IDR: [58289.0, 15140.0, 60560.0], JMD: [605.4, 157.2, 629.0], JPY: [550.7, 143.0, 572.2], KZT: [1851.1, 480.8, 1923.2], KES: [496.6, 129.0, 516.0], KRW: [5034.6, 1307.7, 5230.8], KGS: [324.2, 84.2, 336.8], CHF: [3.2, 0.8, 3.4], MWK: [6675.9, 1734.0, 6936.0], MYR: [15.9, 4.1, 16.5], MVR: [59.2, 15.4, 61.5], MUR: [176.7, 45.9, 183.6], MXN: [75.5, 19.6, 78.4], MNT: [13093.9, 3401.0, 13604.0], MAD: [37.4, 9.7, 38.8], NZD: [6.1, 1.6, 6.3], NGN: [6429.5, 1670.0, 6680.0], NOK: [40.6, 10.5, 42.1], PKR: [1069.8, 277.9, 1111.5], PEN: [14.3, 3.7, 14.9], PHP: [215.7, 56.0, 224.1], PLN: [14.8, 3.8, 15.3], RUB: [358.5, 93.1, 372.5], RWF: [5149.4, 1337.5, 5350.0], SGD: [4.9, 1.3, 5.1], VND: [94575.3, 24565.0, 98260.1], ZAR: [66.3, 17.2, 68.9], SEK: [39.0, 10.1, 40.5], THB: [123.9, 32.2, 128.7], TOP: [9.0, 2.3, 9.3], TTD: [26.0, 6.7, 27.0], TRY: [131.6, 34.2, 136.7], UGX: [14195.0, 3687.0, 14748.0], MKD: [212.7, 55.2, 220.9], EGP: [186.0, 48.3, 193.2], GBP: [2.9, 0.7, 3.0], TZS: [10443.1, 2712.5, 10850.0], UYU: [160.5, 41.7, 166.7], UZS: [48954.3, 12715.4, 50861.7], ZMW: [101.7, 26.4, 105.7], FJD: [8.5, 2.2, 8.8], HKD: [29.9, 7.8, 31.1], MOP: [30.8, 8.0, 32.0], AZN: [6.5, 1.7, 6.8], BHD: [1.5, 0.4, 1.5], AMD: [1491.1, 387.3, 1549.2], GEL: [10.5, 2.7, 10.9], ILS: [14.3, 3.7, 14.9], JOD: [2.7, 0.7, 2.8], KWD: [1.2, 0.3, 1.2], LBP: [344611.5, 89509.5, 358038.0], OMR: [1.5, 0.4, 1.5], QAR: [14.0, 3.6, 14.6], SAR: [14.4, 3.8, 15.0], TND: [11.7, 3.0, 12.1],\r\n },\r\n CPM: {\r\n USD: [5.5, 4, 6], ALL: [486.8, 354.0, 531.0], DZD: [727.5, 529.1, 793.6], XCD: [14.9, 10.8, 16.2], ARS: [5333.7, 3879.1, 5818.6], AUD: [7.9, 5.8, 8.6], EUR: [4.9, 3.6, 5.4], BDT: [659.4, 479.6, 719.4], BWP: [71.7, 52.1, 78.2], BRL: [30.0, 21.8, 32.7], BZD: [11.0, 8.0, 12.0], BND: [7.1, 5.1, 7.7], BGN: [9.6, 7.0, 10.5], BYN: [18.0, 13.1, 19.6], XAF: [3282.9, 2387.6, 3581.4], CAD: [7.4, 5.4, 8.1], LKR: [1629.1, 1184.8, 1777.2], CLP: [4938.4, 3591.6, 5387.4], TWD: [174.1, 126.6, 189.9], COP: [22957.2, 16696.2, 25044.2], CRC: [2852.7, 2074.7, 3112.1], HRK: [37.1, 27.0, 40.5], CZK: [124.3, 90.4, 135.6], XOF: [3224.4, 2345.0, 3517.5], DKK: [36.7, 26.7, 40.1], DOP: [331.8, 241.3, 362.0], ETB: [654.4, 476.0, 713.9], GHS: [86.9, 63.2, 94.8], GTQ: [42.5, 30.9, 46.3], HUF: [1957.2, 1423.4, 2135.1], ISK: [742.7, 540.1, 810.2], INR: [460.9, 335.2, 502.8], IDR: [83270.0, 60560.0, 90840.0], JMD: [864.8, 629.0, 943.4], JPY: [786.7, 572.2, 858.2], KZT: [2644.5, 1923.2, 2884.9], KES: [709.5, 516.0, 774.0], KRW: [7192.4, 5230.8, 7846.2], KGS: [463.1, 336.8, 505.2], CHF: [4.6, 3.4, 5.1], MWK: [9537.1, 6936.0, 10404.1], MYR: [22.7, 16.5, 24.7], MVR: [84.6, 61.5, 92.3], MUR: [252.5, 183.6, 275.4], MXN: [107.8, 78.4, 117.6], MNT: [18705.5, 13604.0, 20406.0], MAD: [53.4, 38.8, 58.3], NZD: [8.6, 6.3, 9.4], NGN: [9185.0, 6680.0, 10020.0], NOK: [57.9, 42.1, 63.2], PKR: [1528.3, 1111.5, 1667.3], PEN: [20.5, 14.9, 22.3], PHP: [308.2, 224.1, 336.2], PLN: [21.1, 15.3, 23.0], RUB: [512.2, 372.5, 558.8], RWF: [7356.2, 5350.0, 8025.0], SGD: [7.1, 5.1, 7.7], VND: [135107.6, 98260.1, 147390.1], ZAR: [94.8, 68.9, 103.4], SEK: [55.8, 40.5, 60.8], THB: [177.0, 128.7, 193.1], TOP: [12.8, 9.3, 14.0], TTD: [37.1, 27.0, 40.4], TRY: [188.0, 136.7, 205.1], UGX: [20278.5, 14748.0, 22122.0], MKD: [303.8, 220.9, 331.4], EGP: [265.6, 193.2, 289.8], GBP: [4.1, 3.0, 4.5], TZS: [14918.7, 10850.0, 16275.0], UYU: [229.2, 166.7, 250.1], UZS: [69934.8, 50861.7, 76292.5], ZMW: [145.3, 105.7, 158.5], FJD: [12.1, 8.8, 13.3], HKD: [42.7, 31.1, 46.6], MOP: [44.0, 32.0, 48.0], AZN: [9.4, 6.8, 10.2], BHD: [2.1, 1.5, 2.3], AMD: [2130.1, 1549.2, 2323.7], GEL: [15.0, 10.9, 16.4], ILS: [20.5, 14.9, 22.3], JOD: [3.9, 2.8, 4.3], KWD: [1.7, 1.2, 1.8], LBP: [492302.2, 358038.0, 537056.9], OMR: [2.1, 1.5, 2.3], QAR: [20.0, 14.6, 21.8], SAR: [20.6, 15.0, 22.5], TND: [16.6, 12.1, 18.2],\r\n },\r\n },\r\n },\r\n};\r\n\r\nexport const getBidRecommendationsRange = (campaignBidTypeInfo) => {\r\n if (!campaignBidTypeInfo) {\r\n return null;\r\n }\r\n\r\n const { campaignType, campaignSubType, biddingSchemeType, currencyCode } = campaignBidTypeInfo;\r\n\r\n const campaignTypeRecommendations = campaignType ? DNVBidRecommendations[campaignType] : null;\r\n if (!campaignTypeRecommendations) {\r\n return null;\r\n }\r\n\r\n // Convert between CampaignSubType Id & String Key\r\n const campaignSubTypeKey = campaignSubType in campaignTypeRecommendations ? campaignSubType : CampaignSubTypeTextMapping[campaignSubType];\r\n const campaignSubTypeRecommendations = campaignSubTypeKey ? campaignTypeRecommendations[campaignSubTypeKey] : null;\r\n if (!campaignSubTypeRecommendations) {\r\n return null;\r\n }\r\n\r\n // Normalize: EnhancedCPC, ManualCpc, ManualCpm\r\n const biddingSchemeKey = ['CPC', 'CPM'].find(key => (biddingSchemeType ? biddingSchemeType.toUpperCase().includes(key) : false));\r\n const biddingSchemeRecommendations = biddingSchemeKey ? campaignSubTypeRecommendations[biddingSchemeKey] : null;\r\n if (!biddingSchemeRecommendations) {\r\n return null;\r\n }\r\n\r\n // const data = DNVBidRecommendations?.[campaignType]?.[campaignSubType]?.[biddingSchemeKey]?.[currencyCode];\r\n const bidRecommendationsData = biddingSchemeRecommendations[currencyCode];\r\n if (!bidRecommendationsData) {\r\n return null;\r\n }\r\n\r\n // convert array to keys-object\r\n const bidRecommendationRange = {\r\n bidFloor: bidRecommendationsData[1],\r\n bidRecommendation: bidRecommendationsData[0],\r\n bidCeil: bidRecommendationsData[2],\r\n currencyCode,\r\n };\r\n return bidRecommendationRange;\r\n};\r\n\r\nexport const getBidRecommendations = (serverContext, campaignSubType, _cpmBidRange = null, campaignType = CampaignTypes.Audience) => {\r\n const currencyCode = serverContext.CurrentAccount.CurrencyCode;\r\n\r\n const cpmRange = !_cpmBidRange && serverContext ? serverContext[PriceModelToRange.ManualCpm] : _cpmBidRange;\r\n const cpmRecommendation = getBidRecommendationsRange({\r\n campaignType, campaignSubType, biddingSchemeType: 'CPM', currencyCode,\r\n });\r\n const CpmBid = (cpmRecommendation ? cpmRecommendation.bidRecommendation : null) || (cpmRange ? cpmRange.FloorValue : null);\r\n\r\n const cpcRange = serverContext ? serverContext[PriceModelToRange.EnhancedCpc] : null;\r\n const cpcRecommendation = getBidRecommendationsRange({\r\n campaignType, campaignSubType, biddingSchemeType: 'CPC', currencyCode,\r\n });\r\n const SearchBid = (cpcRecommendation ? cpcRecommendation.bidRecommendation : null) || (cpcRange ? cpcRange.FloorValue : null);\r\n\r\n // Return both CpmBid and SearchBid to the bidRecommendations, the appropriate field is chosen during AdGroup creation\r\n return { SearchBid, CpmBid };\r\n};\r\n","import { Devices, DeviceKeys } from '@bingads-webui-campaign-react/xandr-campaign';\r\nimport { Scopes } from '@bingads-webui-campaign-react/goal-selector';\r\nimport { CampaignSubTypes } from '@bingads-webui-campaign-react/constants';\r\nimport { MinXandrDailyBudgetRangePerCurrency } from '@bingads-webui-campaign-legacy/common-grid-config/budget/get-budget-range';\r\nimport { generateNameSuggestionSuffix } from '@bingads-webui-campaign/audience-campaign-shared';\r\nimport { getConvertedCurrencyDealMinimumBid, getAccountExchangeRateFromLocalStorage } from '@bingads-webui-campaign-react/xandr-video-campaign-shared-components';\r\nimport { getTomorrow } from '../../shared/helper/format-date';\r\nimport { AdGroupCriterions, AgeRanges, GenderTypes } from '../../common/constants';\r\nimport { isCTVCampaign, isDealCampaign } from '../../step-constants';\r\nimport { getBidRecommendations } from '../../shared/components/bid-recommendations-data';\r\n\r\nconst getInitDeviceTypes = (permissions, isCTVFlow) => {\r\n if (isCTVFlow && permissions.PremiumStreaming) {\r\n return Object.keys(Devices);\r\n }\r\n\r\n if (permissions.XandrDeviceTarget) {\r\n return [DeviceKeys.Computers, DeviceKeys.Tablets, DeviceKeys.Smartphones];\r\n }\r\n\r\n return Object.keys(Devices);\r\n};\r\n\r\nconst getDealMiniumBid = (deal, serverContext) => {\r\n const exchangeRateMapping = getAccountExchangeRateFromLocalStorage(serverContext);\r\n return getConvertedCurrencyDealMinimumBid(deal.MinimumBid, deal.Currency, serverContext.CurrentAccount.CurrencyCode, exchangeRateMapping.val);\r\n};\r\n\r\nexport const getDefaultCampaign = (i18n, serverContext, flow, deal) => {\r\n const defaultCampaign = {\r\n data: {\r\n Status: 'Paused',\r\n Name: generateNameSuggestionSuffix(i18n.getString(_TL_('Video views campaign'))),\r\n Budget: {\r\n Amount: MinXandrDailyBudgetRangePerCurrency[serverContext.CurrentAccount.CurrencyCode],\r\n Type: 'DailyStandard',\r\n },\r\n Languages: [\r\n 'All',\r\n ],\r\n BiddingScheme: {\r\n Type: isCTVCampaign(flow) ? 'ManualCpv' : 'ManualCpm',\r\n },\r\n Target: null,\r\n CampaignSubType: 4,\r\n CampaignType: 'Audience',\r\n conversionGoals: {\r\n originalConversionGoals: [],\r\n goalSelection: [],\r\n goalScopeSelection: Scopes.ACCOUNT,\r\n },\r\n },\r\n isValid: true,\r\n isDirty: false,\r\n messages: [],\r\n };\r\n\r\n if (isDealCampaign(flow) && deal) {\r\n defaultCampaign.data.Budget.Amount = Math.ceil(getDealMiniumBid(deal, serverContext) * 10);\r\n defaultCampaign.data.Target = deal.Id;\r\n defaultCampaign.data.deal = deal;\r\n }\r\n\r\n return defaultCampaign;\r\n};\r\n\r\nexport const getDefaultAdGroup = (i18n, serverContext, flow, deal) => {\r\n const bidRecommendations = getBidRecommendations(serverContext, CampaignSubTypes.BrandAwarenessVideoAds, serverContext.VideoViewsCPMBidRange);\r\n const CpmBid = (isDealCampaign(flow) && deal) ? getDealMiniumBid(deal, serverContext) : bidRecommendations.CpmBid;\r\n const isCTVFlow = isCTVCampaign(flow);\r\n\r\n return {\r\n data: {\r\n ...AdGroupCriterions,\r\n Status: 'Paused',\r\n Name: generateNameSuggestionSuffix(i18n.getString(_TL_('Ad group'))),\r\n StartDate: getTomorrow(),\r\n locationTargets: {\r\n bidMode: false,\r\n currentLevelSettings: {\r\n initLocations: [],\r\n peopleInLocation: true,\r\n peopleSearchingForLocation: true,\r\n targetOption: 'everywhere',\r\n },\r\n parentLevelSettings: {},\r\n useParentLevel: false,\r\n },\r\n adSchedules: {\r\n dayTimeRanges: [],\r\n },\r\n deviceTypes: getInitDeviceTypes(serverContext.DynamicPermissions, isCTVFlow),\r\n initialDeviceTypes: getInitDeviceTypes(serverContext.DynamicPermissions).map(device => ({\r\n criterion: device,\r\n bidAdjustment: -100,\r\n })),\r\n ageRanges: [\r\n AgeRanges.EighteenToTwentyFive,\r\n AgeRanges.TwentyFiveToThirtyFive,\r\n AgeRanges.ThirtyFiveToFifty,\r\n AgeRanges.FiftyToSixtyFive,\r\n AgeRanges.SixtyFiveAndAbove,\r\n AgeRanges.Unknown,\r\n ],\r\n initialAgeRanges: [],\r\n genderTypes: [\r\n GenderTypes.Female,\r\n GenderTypes.Male,\r\n GenderTypes.Unknown,\r\n ],\r\n initialGenderTypes: [],\r\n audiences: [],\r\n initialAudiences: [],\r\n interests: [],\r\n initialInterests: [],\r\n FrequencyCapSettings: [\r\n {},\r\n ],\r\n genreTargets: [],\r\n initialGenreTargets: [],\r\n\r\n CpmBid,\r\n SearchBid: bidRecommendations.SearchBid,\r\n\r\n reachEstimation: null,\r\n ...isDealCampaign(flow) && deal ? { deal } : {},\r\n },\r\n isValid: true,\r\n isDirty: true,\r\n messages: [],\r\n };\r\n};\r\n","import Promise from 'bluebird';\r\nimport _ from 'underscore';\r\nimport { useContext } from 'react';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport { saveAds, getODataConfig } from '@bingads-webui-campaign-react/xandr-video-campaign-shared-components';\r\nimport { InstrumentationContext } from '@bingads-webui-react/hoc-with-instrumentation';\r\nimport { PermissionsContext } from '@bingads-webui-react/hoc-with-permissions';\r\nimport { getLogVersion } from '@bingads-webui-campaign-react/asset-library-model';\r\nimport { newVideoFromMTObject } from '@bingads-webui-campaign-react/image-experience-video-part';\r\nimport { useCopilotLoggers } from '@bingads-webui-campaign-react/copilot-loggers';\r\nimport { useWizardService } from '@bingads-webui-react/wizard';\r\n\r\nimport {\r\n getLoggerWithoutPageInfo,\r\n createVideoRepository,\r\n createImageRepository,\r\n createFolderRepository,\r\n uploadVideoMetadata,\r\n} from '@bingads-webui-campaign-react/asset-library-services';\r\n\r\nimport { useAdsRepository } from '../../common/use-ads-repository';\r\nimport { getDefaultCampaign, getDefaultAdGroup } from './constants';\r\n\r\nexport const useVideoAdsRepository = (defaultCampaign, defaultAdGroup) => {\r\n const i18n = useContext(I18nContext);\r\n const { state } = useWizardService();\r\n const instrumentation = useContext(InstrumentationContext);\r\n const permissions = useContext(PermissionsContext);\r\n const { logSuggestionsApplied } = useCopilotLoggers();\r\n\r\n const scenario = instrumentation.createScenario('XandrVideoAdsAdStep');\r\n const activity = scenario.createActivity('Ad');\r\n const versionForLog = getLogVersion(permissions);\r\n const logger = getLoggerWithoutPageInfo(activity, versionForLog, 'XandrVideoAdsAdStep');\r\n const serverContext = useContext(ServerContext);\r\n const cid = serverContext.CurrentCustomer.Id;\r\n const aid = serverContext.CurrentAccount.Id;\r\n const oDataConfig = getODataConfig(serverContext);\r\n const { flow, deal } = state.context.wizardData;\r\n\r\n const videoRepository = createVideoRepository({\r\n oDataConfig,\r\n aid,\r\n cid,\r\n });\r\n const folderRepository = createFolderRepository({\r\n i18n,\r\n logger,\r\n oDataConfig,\r\n aid,\r\n cid,\r\n });\r\n const imageRepository = createImageRepository({\r\n oDataConfig,\r\n aid,\r\n cid,\r\n logger,\r\n i18n,\r\n activity,\r\n });\r\n\r\n const uploadVideoIfNeeded = ({ ads }) => {\r\n const videoPromises = [];\r\n ads.data.forEach((ad) => {\r\n if (ad.data && ad.data.video && !ad.data.video.id) {\r\n videoPromises.push(uploadVideoMetadata({\r\n videoMetadata: ad.data.video,\r\n newVideoFromMTObject,\r\n folderRepository,\r\n imageRepository,\r\n videoRepository,\r\n }).then((video) => {\r\n _.extend(ad.data.video, video);\r\n }));\r\n }\r\n });\r\n\r\n if (_.isEmpty(videoPromises)) {\r\n return Promise.resolve(ads);\r\n }\r\n\r\n return Promise.all(videoPromises).then(() => ads);\r\n };\r\n\r\n const saveAdsWithMetadata = (data, context) => uploadVideoIfNeeded(data)\r\n .then(() => saveAds(data, context))\r\n .then((adData) => {\r\n const suggestionIds = _.chain(data.ads.data)\r\n .map(ad => ad.data.video.recommendationId).compact().value();\r\n const appliedVideoAssetIds = _.chain(data.ads.data)\r\n .map(ad => ad.data.video.idString).compact().value();\r\n\r\n logSuggestionsApplied(\r\n data.campaign.Id,\r\n data.adGroup.Id,\r\n undefined /* textSuggestions */,\r\n undefined /* imageSuggestionIds */,\r\n suggestionIds,\r\n appliedVideoAssetIds\r\n );\r\n return adData;\r\n });\r\n\r\n const { load, save } = useAdsRepository({\r\n saveAds: saveAdsWithMetadata,\r\n defaultCampaign: defaultCampaign || getDefaultCampaign(i18n, serverContext, flow, deal),\r\n defaultAdGroup: defaultAdGroup || getDefaultAdGroup(i18n, serverContext, flow, deal),\r\n });\r\n\r\n return {\r\n load,\r\n save,\r\n };\r\n};\r\n","import React, { useState, useCallback, useContext, useMemo, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport { Stack, mergeStyles } from '@fluentui/react';\r\nimport { useImagePicker } from '@bingads-webui-campaign-react/add-image-hooks';\r\nimport { AdPreview, DisplayAdsContainer, PopulateImages, imagePlacementsToImage, getODataConfig } from '@bingads-webui-campaign-react/xandr-display-ads-campaign-shared-components';\r\nimport { ScopeContext } from '@bingads-webui-react/scope-service';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { PerformanceMarkerContext } from '@bingads-webui-campaign-react/performance-marker-provider';\r\nimport { useFormService } from '@bingads-webui-react/form';\r\nimport { useWizardService, matchStepState, STEP_STATES } from '@bingads-webui-react/wizard';\r\nimport { ActivityContext } from '@bingads-webui-react/hoc-with-signal';\r\nimport { FormErrorGroup, UnmappedFormErrors } from '@bingads-webui-campaign-react/form-error';\r\nimport { AttentionBeaconGroup } from '@bingads-webui-campaign-react/attention-beacon';\r\nimport { ActuationGroup } from '@bingads-webui-campaign-react/actuator';\r\nimport { StepHeader } from '../../shared/step-header';\r\n\r\nconst adCreatorStyles = mergeStyles({\r\n width: 500,\r\n});\r\n\r\nconst headerStyles = mergeStyles({\r\n width: 450,\r\n});\r\n\r\nexport const DisplayAds = ({\r\n data,\r\n onDataChange,\r\n error,\r\n}) => {\r\n const {\r\n errors = [],\r\n } = error || {};\r\n\r\n const { scope } = useContext(ScopeContext) || {};\r\n const { cid, aid } = scope.values;\r\n\r\n const activity = useContext(ActivityContext);\r\n\r\n const { state } = useWizardService();\r\n\r\n const { campaign = {} } = state.context.wizardData;\r\n\r\n const { Id: campaignId } = campaign;\r\n\r\n const currentStates = state.toStrings()[1];\r\n\r\n const i18n = useContext(I18nContext);\r\n\r\n const serverContext = useContext(ServerContext);\r\n const { Permissions, DynamicPermissions } = serverContext || { };\r\n const permissions = useMemo(() => ({ dynamic: { ...DynamicPermissions }, ...Permissions }), [DynamicPermissions, Permissions]);\r\n\r\n const perfMarker = useContext(PerformanceMarkerContext);\r\n\r\n const [currentImageIndex, setCurrentImageIndex] = useState(0);\r\n\r\n const oDataConfig = useMemo(() => getODataConfig(serverContext), [serverContext]);\r\n\r\n const { state: { context: { saveFailed } } } = useFormService();\r\n\r\n const {\r\n displayImagePicker,\r\n setDisplayImagePicker,\r\n selectedMediaPanelSource,\r\n setSelectedMediaPanelSource,\r\n } = useImagePicker();\r\n\r\n const removeEmptyAds = newAdsData => newAdsData.filter(ad => !_.isEmpty(ad.data));\r\n\r\n const onNewImageSelected = useCallback((imagePlacements) => {\r\n const newAds = imagePlacements.map(imagePlacement => (imagePlacementsToImage({\r\n crops: imagePlacement,\r\n defaults: {\r\n FinalUrls: [],\r\n isValid: false,\r\n isDirty: false,\r\n },\r\n })));\r\n const result = {\r\n data: [...newAds],\r\n isValid: false,\r\n isDirty: true,\r\n };\r\n onDataChange({ data: result, isValid: result.isValid });\r\n setDisplayImagePicker(false);\r\n }, [onDataChange, setDisplayImagePicker]);\r\n\r\n const onAdsValidation = useCallback((results) => {\r\n const { data: newAdsData, ...restResults } = results;\r\n\r\n const newAds = removeEmptyAds(newAdsData);\r\n\r\n const dataPatch = {\r\n data: [\r\n ...newAds,\r\n ],\r\n ...restResults,\r\n };\r\n onDataChange({ data: dataPatch, isValid: dataPatch.isValid });\r\n }, [onDataChange]);\r\n\r\n useEffect(() => {\r\n if (activity && matchStepState(state, STEP_STATES.LOADING)) {\r\n activity.signal(`onDisplayAdsStepLoading - ${currentStates}`);\r\n }\r\n\r\n if (activity && matchStepState(state, STEP_STATES.SAVING)) {\r\n activity.signal(`onDisplayAdsStepSaving - ${currentStates}`);\r\n }\r\n }, [activity, currentStates, state]);\r\n\r\n return (\r\n \r\n
\r\n\r\n );\r\n};\r\n\r\nDisplayAds.propTypes = {\r\n data: PropTypes.shape({\r\n data: PropTypes.shape({}),\r\n }),\r\n onDataChange: PropTypes.func.isRequired,\r\n error: PropTypes.shape({\r\n errors: PropTypes.arrayOf(PropTypes.shape({})),\r\n }),\r\n};\r\n\r\nDisplayAds.defaultProps = {\r\n data: {},\r\n error: {},\r\n};\r\n","import { DeviceKeys, Devices } from '@bingads-webui-campaign-react/xandr-campaign';\r\nimport { Scopes } from '@bingads-webui-campaign-react/goal-selector';\r\nimport { MinXandrDailyBudgetRangePerCurrency } from '@bingads-webui-campaign-legacy/common-grid-config/budget/get-budget-range';\r\nimport { generateNameSuggestionSuffix } from '@bingads-webui-campaign/audience-campaign-shared';\r\nimport { CampaignSubTypes } from '@bingads-webui-campaign-react/constants';\r\nimport { getTomorrow } from '../../shared/helper/format-date';\r\nimport { AdGroupCriterions, AgeRanges, GenderTypes } from '../../common/constants';\r\nimport { getBidRecommendations } from '../../shared/components/bid-recommendations-data';\r\n\r\n\r\nexport const getDefaultCampaign = (i18n, serverContext) => ({\r\n data: {\r\n Status: 'Paused',\r\n Name: generateNameSuggestionSuffix(i18n.getString(_TL_('Display ads'))),\r\n Budget: {\r\n Amount: MinXandrDailyBudgetRangePerCurrency[serverContext.CurrentAccount.CurrencyCode],\r\n Type: 'DailyStandard',\r\n },\r\n Languages: [\r\n 'All',\r\n ],\r\n BiddingScheme: {\r\n Type: 'ManualCpm',\r\n },\r\n CampaignSubType: 5,\r\n CampaignType: 'Audience',\r\n conversionGoals: {\r\n originalConversionGoals: [],\r\n goalSelection: [],\r\n goalScopeSelection: Scopes.ACCOUNT,\r\n },\r\n },\r\n isValid: true,\r\n isDirty: false,\r\n messages: [],\r\n});\r\n\r\nexport const getDefaultAdGroup = (i18n, serverContext) => {\r\n const { CpmBid, SearchBid } = getBidRecommendations(serverContext, CampaignSubTypes.DisplayAds);\r\n\r\n return {\r\n data: {\r\n ...AdGroupCriterions,\r\n Status: 'Paused',\r\n Name: generateNameSuggestionSuffix(i18n.getString(_TL_('Ad group'))),\r\n StartDate: getTomorrow(),\r\n locationTargets: {\r\n bidMode: false,\r\n currentLevelSettings: {\r\n initLocations: [],\r\n peopleInLocation: true,\r\n peopleSearchingForLocation: true,\r\n targetOption: 'everywhere',\r\n },\r\n parentLevelSettings: {},\r\n useParentLevel: false,\r\n },\r\n adSchedules: {\r\n dayTimeRanges: [],\r\n },\r\n deviceTypes: [\r\n DeviceKeys.Computers,\r\n DeviceKeys.Tablets,\r\n DeviceKeys.Smartphones,\r\n ],\r\n initialDeviceTypes: Object.keys(Devices).map(device => ({\r\n criterion: device,\r\n bidAdjustment: -100,\r\n })),\r\n ageRanges: [\r\n AgeRanges.EighteenToTwentyFive,\r\n AgeRanges.TwentyFiveToThirtyFive,\r\n AgeRanges.ThirtyFiveToFifty,\r\n AgeRanges.FiftyToSixtyFive,\r\n AgeRanges.SixtyFiveAndAbove,\r\n AgeRanges.Unknown,\r\n ],\r\n initialAgeRanges: [],\r\n genderTypes: [\r\n GenderTypes.Female,\r\n GenderTypes.Male,\r\n GenderTypes.Unknown,\r\n ],\r\n initialGenderTypes: [],\r\n audiences: [],\r\n initialAudiences: [],\r\n interests: [],\r\n initialInterests: [],\r\n FrequencyCapSettings: [\r\n {},\r\n ],\r\n genreTargets: [],\r\n initialGenreTargets: [],\r\n\r\n CpmBid,\r\n SearchBid,\r\n\r\n reachEstimation: null,\r\n },\r\n isValid: true,\r\n isDirty: true,\r\n messages: [],\r\n };\r\n};\r\n","import { useContext } from 'react';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport { saveAds } from '@bingads-webui-campaign-react/xandr-video-campaign-shared-components';\r\nimport { useAdsRepository } from '../../common/use-ads-repository';\r\nimport { getDefaultCampaign, getDefaultAdGroup } from './constants';\r\n\r\nexport const useDisplayAdsRepository = (defaultCampaign, defaultAdGroup) => {\r\n const i18n = useContext(I18nContext);\r\n\r\n const serverContext = useContext(ServerContext);\r\n\r\n const { load, save } = useAdsRepository({\r\n saveAds,\r\n defaultCampaign: defaultCampaign || getDefaultCampaign(i18n, serverContext),\r\n defaultAdGroup: defaultAdGroup || getDefaultAdGroup(i18n, serverContext),\r\n });\r\n\r\n return {\r\n load,\r\n save,\r\n };\r\n};\r\n","import React, { useContext, useEffect, useState } from 'react';\r\nimport { Activity } from '@bingads-webui-react/hoc-with-signal';\r\nimport { PermissionsContext } from '@bingads-webui-react/hoc-with-permissions';\r\nimport { DisplayAdsWithCopilot } from '@bingads-webui-campaign-react/xandr-display-ads-campaign-shared-components';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport { isCopilotRegionRestricted } from '@bingads-webui-react/copilot-utils';\r\nimport { DisplayAds as DisplayAdsWithoutCopilot } from './display-ads';\r\n\r\nexport const DisplayAds = (props) => {\r\n const permissions = useContext(PermissionsContext);\r\n const serverContext = useContext(ServerContext);\r\n\r\n const [isCopilotEnabled, setIsCopilotEnabled] = useState(false);\r\n useEffect(() => {\r\n // check if copilot is restricted in this region\r\n isCopilotRegionRestricted({\r\n feature: 'Recommendations',\r\n permissions,\r\n serverContext,\r\n }).then(isRegionRestricted => setIsCopilotEnabled(!isRegionRestricted));\r\n }, [permissions, serverContext]);\r\n\r\n if (permissions.dynamic.DisplayPlusCopilotAssetGeneration && isCopilotEnabled) {\r\n return \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {data && _.isEmpty(data.data) &&\r\n
\r\n {!_.isEmpty(data.data) &&\r\n \r\n
\r\n }\r\n \r\n
\r\n );\r\n};\r\n","import _ from 'underscore';\r\nimport { Scopes } from '@bingads-webui-campaign-react/goal-selector';\r\nimport { DeviceKeys, Devices } from '@bingads-webui-campaign-react/xandr-campaign';\r\nimport { getBudgetRange } from '@bingads-webui-campaign-legacy/common-grid-config/budget/get-budget-range';\r\nimport { UAPPlacementTypeAlias as EPT } from '@bingads-webui-campaign-react/unified-ad-preview-library-cmui';\r\nimport { CampaignSubTypes } from '@bingads-webui-campaign-react/constants';\r\nimport { ROTATION_OPTIONS } from '@bingads-webui-react/ad-rotation';\r\nimport { generateNameSuggestionSuffix } from '@bingads-webui-campaign/audience-campaign-shared';\r\nimport { getDaysInTheFuture } from '../../shared/helper/format-date';\r\nimport { AdGroupCriterions, AgeRanges, GenderTypes } from '../../common/constants';\r\nimport { getBidRecommendations } from '../../shared/components/bid-recommendations-data';\r\n\r\n\r\nexport const AdPreviewSurfacePlacementKeys = {\r\n Msn: ['msan_191x100', 'edge_178x100', 'msan_150x100', 'msan_1x1', 'msan_133x100'],\r\n};\r\n\r\nconst getDefaultBidForCPCBiddingScheme = (i18n, serverContext) => {\r\n const bid = _.isUndefined(serverContext.RecommendCPCBid) || _.isNull(serverContext.RecommendCPCBid) ? 3.3 : serverContext.RecommendCPCBid;\r\n return i18n.formatDecimal(bid, {\r\n maximumFractionDigits: 2,\r\n minimumFractionDigits: 2,\r\n });\r\n};\r\n\r\nexport const getDefaultCampaign = (i18n, serverContext) => {\r\n const { DynamicPermissions = {} } = serverContext || {};\r\n const {\r\n CampaignLifetimeBudget: IsCampaignLifetimeBudgetEnabled,\r\n } = DynamicPermissions;\r\n\r\n let lifetimeBudgetProperties = {};\r\n if (IsCampaignLifetimeBudgetEnabled) {\r\n lifetimeBudgetProperties = {\r\n StartDate: getDaysInTheFuture(2),\r\n UseCampaignLevelDates: true,\r\n };\r\n }\r\n\r\n return ({\r\n data: {\r\n Status: 'Paused',\r\n Name: generateNameSuggestionSuffix(i18n.getString(_TL_('Audience Static'))),\r\n Budget: {\r\n Amount: getBudgetRange(serverContext.CurrentAccount.CurrencyCode).Daily.Default,\r\n Type: 'DailyStandard',\r\n },\r\n Languages: [\r\n 'All',\r\n ],\r\n BiddingScheme: {\r\n Type: 'EnhancedCpc',\r\n },\r\n CampaignSubType: 0,\r\n CampaignType: 'Audience',\r\n conversionGoals: {\r\n originalConversionGoals: [],\r\n goalSelection: [],\r\n goalScopeSelection: Scopes.ACCOUNT,\r\n },\r\n ...lifetimeBudgetProperties,\r\n },\r\n isValid: true,\r\n isDirty: false,\r\n messages: [],\r\n });\r\n};\r\n\r\nexport const getDefaultAdGroup = (i18n, serverContext) => {\r\n const bidRecommendations = getBidRecommendations(serverContext, CampaignSubTypes.AudienceStatic);\r\n\r\n return {\r\n data: {\r\n ...AdGroupCriterions,\r\n Status: 'Paused',\r\n Name: generateNameSuggestionSuffix(i18n.getString(_TL_('Ad group'))),\r\n StartDate: getDaysInTheFuture(2),\r\n locationTargets: {\r\n bidMode: false,\r\n currentLevelSettings: {\r\n initLocations: [],\r\n peopleInLocation: true,\r\n peopleSearchingForLocation: true,\r\n targetOption: 'everywhere',\r\n },\r\n parentLevelSettings: {},\r\n useParentLevel: false,\r\n },\r\n adSchedules: {\r\n dayTimeRanges: [],\r\n },\r\n deviceTypes: [\r\n DeviceKeys.Computers,\r\n DeviceKeys.Tablets,\r\n DeviceKeys.Smartphones,\r\n ],\r\n initialDeviceTypes: Object.keys(Devices).map(device => ({\r\n criterion: device,\r\n bidAdjustment: -100,\r\n })),\r\n ageRanges: [\r\n AgeRanges.EighteenToTwentyFive,\r\n AgeRanges.TwentyFiveToThirtyFive,\r\n AgeRanges.ThirtyFiveToFifty,\r\n AgeRanges.FiftyToSixtyFive,\r\n AgeRanges.SixtyFiveAndAbove,\r\n AgeRanges.Unknown,\r\n ],\r\n initialAgeRanges: [],\r\n genderTypes: [\r\n GenderTypes.Female,\r\n GenderTypes.Male,\r\n GenderTypes.Unknown,\r\n ],\r\n TargetSetting: 'Age;Gender',\r\n initialGenderTypes: [],\r\n audiences: [],\r\n initialAudiences: [],\r\n interests: [],\r\n initialInterests: [],\r\n FrequencyCapSettings: [\r\n {},\r\n ],\r\n genreTargets: [],\r\n initialIndustryTargets: [],\r\n initialNegativeIndustryTargets: [],\r\n initialGenreTargets: [],\r\n initialJobTargets: [],\r\n initialNegativeJobTargets: [],\r\n initialCompanyNameTargets: [],\r\n initialNegativeCompanyNameTargets: [],\r\n companyNameTargets: [],\r\n negativeCompanyNameTargets: [],\r\n\r\n CpmBid: bidRecommendations.CpmBid,\r\n SearchBid: bidRecommendations.SearchBid || getDefaultBidForCPCBiddingScheme(i18n, serverContext),\r\n\r\n reachEstimation: null,\r\n UseOptimizedTargeting: true,\r\n AdRotation: ROTATION_OPTIONS.OPTIMIZED_FOR_CLICKS,\r\n },\r\n isValid: true,\r\n isDirty: true,\r\n messages: [],\r\n };\r\n};\r\n\r\n\r\nexport const AdModes = {\r\n SINGLE_AD: 'SINGLE_AD',\r\n MULTI_AD: 'MULTI_AD',\r\n};\r\n\r\n//\r\n// Ad Preview Constants\r\nexport const extraPlacementInfo = {\r\n [EPT.Responsive.MSAN.WideImage]: {\r\n previewTitle: _TL_('MSN feed'),\r\n previewHeaderTitle: _TL_('Ad preview (1.91 : 1 aspect ratio)'),\r\n customClassName: 'msan_191x100',\r\n imagePreviewHeight: 200,\r\n disclaimerMessage: _TL_('This is an example of how your ad could appear on other websites on the Microsoft Advertising Network. The final ad format is likely to change to match the look and feel of the website.'),\r\n editingPlacementType: EPT.MSAN.WideImage,\r\n },\r\n [EPT.Responsive.MSAN.MSEdgeSingleCarousel]: {\r\n previewTitle: _TL_('Microsoft Edge single carousel'),\r\n previewHeaderTitle: _TL_('Ad preview (1.78 : 1 aspect ratio)'),\r\n customClassName: 'edge_178x100',\r\n imagePreviewHeight: 220,\r\n editingPlacementType: EPT.MSAN.MSEdgeSingleCarousel,\r\n },\r\n [EPT.Responsive.MSAN.MSNInArticle]: {\r\n previewTitle: _TL_('MSN in-article ad'),\r\n previewHeaderTitle: _TL_('Ad preview (1.5 : 1 aspect ratio)'),\r\n customClassName: 'msan_150x100',\r\n imagePreviewHeight: 200,\r\n editingPlacementType: EPT.MSAN.MSNInArticle,\r\n },\r\n [EPT.Responsive.MSAN.MSNSmallHeadline]: {\r\n previewTitle: _TL_('MSN small headline'),\r\n previewHeaderTitle: _TL_('Ad preview (1.33 : 1 aspect ratio)'),\r\n customClassName: 'msan_133x100',\r\n imagePreviewHeight: 75,\r\n editingPlacementType: EPT.MSAN.MSNSmallHeadline,\r\n },\r\n [EPT.Responsive.MSAN.SquareImage]: {\r\n previewTitle: _TL_('MSN square image'),\r\n previewHeaderTitle: _TL_('Ad preview (1 : 1 aspect ratio)'),\r\n customClassName: 'msan_1x1',\r\n imagePreviewHeight: 75,\r\n disclaimerMessage: _TL_('This is an example of how your ad could appear on other websites on the Microsoft Advertising Network. The final ad format is likely to change to match the look and feel of the website.'),\r\n editingPlacementType: EPT.MSAN.SquareImage,\r\n },\r\n [EPT.Responsive.Outlook.Mobile]: {\r\n previewTitle: _TL_('Microsoft Outlook web (mobile)'),\r\n customClassName: 'outlook_text_mobile',\r\n editingPlacementType: EPT.Outlook.Mobile,\r\n },\r\n [EPT.Responsive.Outlook.Web]: {\r\n previewTitle: _TL_('Microsoft Outlook web (computer)'),\r\n customClassName: 'outlook_text_web',\r\n editingPlacementType: EPT.Outlook.Web,\r\n },\r\n [EPT.Responsive.Boost.WindowsSpotlight]: {\r\n previewTitle: _TL_('Windows Spotlight'),\r\n previewHeaderTitle: _TL_('Ad preview'),\r\n editingPlacementType: EPT.Boost.WindowsSpotlight,\r\n hideHeaderButtons: true,\r\n },\r\n [EPT.Responsive.Boost.DiscoverCard]: {\r\n previewTitle: _TL_('Discover card'),\r\n previewHeaderTitle: _TL_('Ad preview'),\r\n editingPlacementType: EPT.Boost.DiscoverCard,\r\n hideHeaderButtons: true,\r\n },\r\n [EPT.Responsive.Boost.StartMenu]: {\r\n previewTitle: _TL_('Start Menu'),\r\n previewHeaderTitle: _TL_('Ad preview'),\r\n editingPlacementType: EPT.Boost.StartMenu,\r\n hasLogo: true,\r\n hideHeaderButtons: true,\r\n },\r\n [EPT.Responsive.Boost.ActionCenter]: {\r\n previewTitle: _TL_('Action Center'),\r\n previewHeaderTitle: _TL_('Ad preview'),\r\n editingPlacementType: EPT.Boost.ActionCenter,\r\n hasLogo: true,\r\n hideHeaderButtons: true,\r\n },\r\n [EPT.Responsive.Boost.Banner]: {\r\n previewTitle: _TL_('Banner'),\r\n previewHeaderTitle: _TL_('Ad preview'),\r\n editingPlacementType: EPT.Boost.Banner,\r\n hasLogo: true,\r\n hideHeaderButtons: true,\r\n },\r\n [EPT.Responsive.Boost.Prong1Prong2Feed]: {\r\n previewTitle: _TL_('Prong 1 / Prong 2 / Feed'),\r\n previewHeaderTitle: _TL_('Ad preview'),\r\n editingPlacementType: EPT.Boost.Prong1Prong2Feed,\r\n hideHeaderButtons: true,\r\n },\r\n [EPT.Responsive.Boost.Coachmark]: {\r\n previewTitle: _TL_('CoachMark'),\r\n previewHeaderTitle: _TL_('Ad preview'),\r\n editingPlacementType: EPT.Boost.Coachmark,\r\n hideHeaderButtons: true,\r\n },\r\n};\r\n\r\nexport const responsiveMsanMMAConfig = [{\r\n placementSetName: 'responsiveMsanMMAConfig',\r\n placementTypes: [\r\n EPT.Responsive.MSAN.WideImage,\r\n EPT.Responsive.MSAN.MSEdgeSingleCarousel,\r\n EPT.Responsive.MSAN.MSNInArticle,\r\n EPT.Responsive.MSAN.MSNSmallHeadline,\r\n EPT.Responsive.MSAN.SquareImage,\r\n EPT.Responsive.Outlook.Web,\r\n EPT.Responsive.Outlook.Mobile,\r\n ],\r\n}];\r\n\r\nexport const msanMMAConfig = [{\r\n placementSetName: 'msanMMAConfig',\r\n placementTypes: [\r\n EPT.MSAN.WideImage,\r\n EPT.MSAN.MSEdgeSingleCarousel,\r\n EPT.MSAN.MSNInArticle,\r\n EPT.MSAN.MSNSmallHeadline,\r\n EPT.MSAN.SquareImage,\r\n EPT.Outlook.Web,\r\n EPT.Outlook.Mobile,\r\n ],\r\n}];\r\n\r\nexport const responsiveMsanMMABoostConfig = [{\r\n placementSetName: 'responsiveMsanMMABoostConfig',\r\n placementTypes: [\r\n EPT.Responsive.MSAN.WideImage,\r\n EPT.Responsive.MSAN.MSEdgeSingleCarousel,\r\n EPT.Responsive.MSAN.MSNInArticle,\r\n EPT.Responsive.MSAN.MSNSmallHeadline,\r\n EPT.Responsive.MSAN.SquareImage,\r\n EPT.Responsive.Boost.WindowsSpotlight,\r\n EPT.Responsive.Boost.DiscoverCard,\r\n EPT.Responsive.Boost.StartMenu,\r\n EPT.Responsive.Boost.ActionCenter,\r\n EPT.Responsive.Boost.Banner,\r\n EPT.Responsive.Boost.Prong1Prong2Feed,\r\n EPT.Responsive.Boost.Coachmark,\r\n ],\r\n}];\r\n\r\nexport const msanMMABoostConfig = [{\r\n placementSetName: 'msanMMABoostConfig',\r\n placementTypes: [\r\n EPT.MSAN.WideImage,\r\n EPT.MSAN.MSEdgeSingleCarousel,\r\n EPT.MSAN.MSNInArticle,\r\n EPT.MSAN.MSNSmallHeadline,\r\n EPT.MSAN.SquareImage,\r\n EPT.Boost.WindowsSpotlight,\r\n EPT.Boost.DiscoverCard,\r\n EPT.Boost.StartMenu,\r\n EPT.Boost.ActionCenter,\r\n EPT.Boost.Banner,\r\n EPT.Boost.Prong1Prong2Feed,\r\n EPT.Boost.Coachmark,\r\n ],\r\n}];\r\n","import { extensionEditorStyles } from '@bingads-webui-campaign-react/common-styles';\r\nimport { AdPreviewOverideStylesByKey } from '../../common/constants';\r\n\r\nconst IndicatorWidth = 10;\r\nconst IndicatorsGap = 8;\r\n\r\nconst getIndicatorsWidth = placements => (placements * IndicatorWidth) + ((placements - 1) * IndicatorsGap);\r\n\r\nexport const getStyles = (_, { palette = {} }) => ({\r\n '@global': {\r\n ...extensionEditorStyles({ palette }),\r\n },\r\n nativeAdStepShell: {\r\n width: '100%',\r\n },\r\n 'nativeAdStepShell-l': {\r\n width: 'calc(100% - 64px)',\r\n },\r\n nativeAdImagePreviewCarousel: {\r\n position: 'sticky',\r\n width: 420,\r\n top: '0px',\r\n '& .carousel-inner .ad-placement-preview': {\r\n height: 450,\r\n },\r\n '& .new-preview-carousel-container-adprelib': {\r\n // backgroundColor: '#ffffff',\r\n border: '1px solid #C8C8C8 !important',\r\n // borderRadius: '4px',\r\n // boxShadow: '0px 2px 4px 0px rgba(0, 0, 0, 0.10)',\r\n // maxWidth: '420px',\r\n minWidth: 'unset !important',\r\n\r\n '& .preview-string': {\r\n bottom: 'unset !important',\r\n },\r\n\r\n '& .ad-preview-actions': {\r\n display: 'flex',\r\n },\r\n '& .carousel-inner': {\r\n height: 450,\r\n },\r\n\r\n '& .carousel-indicators': {\r\n display: 'flex',\r\n gap: '8px',\r\n left: '50% !important',\r\n margin: '48px 0 !important',\r\n transform: 'translateX(-50%)',\r\n\r\n '& li': {\r\n margin: '0',\r\n },\r\n },\r\n\r\n '& .carousel-control': {\r\n display: 'flex',\r\n width: '12px',\r\n margin: '12px 0 !important',\r\n left: '50% !important',\r\n },\r\n\r\n '& .carousel-wrapper .carousel-control.left': {\r\n transform: ({ placements }) => {\r\n const transformations = [];\r\n\r\n // Move left arrow to the center\r\n transformations.push('translateX(-50%)');\r\n\r\n // Move left arrow to the left of the indicators\r\n const indicatorsWidth = getIndicatorsWidth(placements);\r\n transformations.push(`translateX(-${indicatorsWidth / 2}px)`);\r\n\r\n // Add extra space between the left arrow and the indicators\r\n transformations.push('translateX(-16px)');\r\n\r\n return transformations.join(' ');\r\n },\r\n bottom: 16,\r\n },\r\n\r\n '& .carousel-wrapper .carousel-control.right': {\r\n transform: ({ placements }) => {\r\n const transformations = [];\r\n\r\n // Move right arrow to the center\r\n transformations.push('translateX(-50%)');\r\n\r\n // Move right arrow to the right of the indicators\r\n const indicatorsWidth = getIndicatorsWidth(placements);\r\n transformations.push(`translateX(${indicatorsWidth / 2}px)`);\r\n\r\n // Add extra space between the right arrow and the indicators\r\n transformations.push('translateX(14px)');\r\n\r\n return transformations.join(' ');\r\n },\r\n bottom: 16,\r\n },\r\n\r\n '& .ad-preview-title': {\r\n height: '24px',\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n whiteSpace: 'nowrap',\r\n\r\n '& .preview-title-string-key': {\r\n color: '#323130',\r\n fontSize: '14px',\r\n fontWeight: 700,\r\n marginRight: '8px',\r\n },\r\n\r\n '& .preview-title-preview-type': {\r\n fontSize: '14px',\r\n },\r\n },\r\n\r\n '& .carousel-inner .ad-placement-preview, & .carousel-inner .ad-placement-card-preview': {\r\n overflow: 'hidden',\r\n\r\n '& .card-parent': {\r\n width: '100%',\r\n },\r\n\r\n '& .responsive-ad-preview-content': {\r\n boxSizing: 'border-box',\r\n width: '100%',\r\n },\r\n },\r\n '& .ad-placement-preview.boost-windows, & .ad-placement-card-preview.boost-windows': {\r\n '& .card-parent': {\r\n '& .responsive-ad-preview-content': {\r\n height: 'fit-content',\r\n width: 'fit-content',\r\n maxWidth: '100%',\r\n '& .text-container-apl': {\r\n maxWidth: 'calc(100% - 25px)',\r\n },\r\n },\r\n },\r\n },\r\n '& .ad-placement-preview.boost-start-menu, & .ad-placement-card-preview.boost-start-menu': {\r\n '& .new-responsive-ad-preview-container': {\r\n height: '100%',\r\n width: '100%',\r\n },\r\n },\r\n '& .ad-placement-preview.boost-actionCenter, & .ad-placement-card-preview.boost-actionCenter': {\r\n '& .new-responsive-ad-preview-container': {\r\n height: '100%',\r\n width: '100%',\r\n },\r\n },\r\n '& .ad-placement-preview.boost-banner, & .ad-placement-card-preview.boost-banner': {\r\n '& .new-responsive-ad-preview-container': {\r\n height: '100%',\r\n width: '100%',\r\n },\r\n },\r\n '& .ad-placement-preview.mma_191x100, & .ad-placement-card-preview.mma_191x100': {\r\n '& .card-parent': {\r\n maxWidth: AdPreviewOverideStylesByKey.mma_191x100.imagePreviewWidth,\r\n '& .text-container-apl': {\r\n padding: '5px 12px 12px 12px',\r\n '& .short-headline': {\r\n wordWrap: 'break-word',\r\n },\r\n '& .final-url': {\r\n whiteSpace: 'nowrap',\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n },\r\n },\r\n },\r\n },\r\n\r\n '& .ad-placement-preview.edge_178x100, & .ad-placement-card-preview.edge_178x100': {\r\n '& .card-parent': {\r\n '& .responsive-ad-preview-content': {\r\n height: 'fit-content',\r\n width: 'fit-content',\r\n maxWidth: '100%',\r\n '& .text-container-apl': {\r\n maxWidth: 'calc(100% - 25px)',\r\n },\r\n },\r\n },\r\n },\r\n\r\n '& .ad-placement-preview.msan_191x100, & .ad-placement-card-preview.msan_191x100': {\r\n '& .card-parent': {\r\n maxWidth: AdPreviewOverideStylesByKey.msan_191x100.imagePreviewWidth,\r\n },\r\n },\r\n\r\n '& .ad-placement-preview.msan_150x100, & .ad-placement-card-preview.msan_150x100': {\r\n '& .card-parent': {\r\n maxWidth: AdPreviewOverideStylesByKey.msan_150x100.imagePreviewWidth,\r\n },\r\n },\r\n\r\n '& .ad-placement-preview.msan_1x1, & .ad-placement-card-preview.msan_1x1': {\r\n padding: 20,\r\n },\r\n\r\n '& .ad-placement-preview.msan_133x100, & .ad-placement-card-preview.msan_133x100': {\r\n padding: 20,\r\n },\r\n\r\n '& .ad-placement-preview.bing_text, & .ad-placement-card-preview.bing_text': {\r\n '& .responsive-ad-preview-content': {\r\n '& .text-container-apl': {\r\n '& .final-url > .multi-line-processed-text': {\r\n whiteSpace: 'nowrap',\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n },\r\n },\r\n },\r\n },\r\n\r\n '& .ad-placement-preview.outlook_text_mobile, & .ad-placement-card-preview.outlook_text_mobile': {\r\n '& .responsive-ad-preview-content': {\r\n boxSizing: 'content-box',\r\n maxWidth: 'calc(100% - 50px)',\r\n '& .description': {\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n width: '100%',\r\n whiteSpace: 'nowrap',\r\n },\r\n },\r\n },\r\n\r\n '& .ad-placement-preview.outlook_text_web, & .ad-placement-card-preview.outlook_text_web': {\r\n padding: '0px 8px',\r\n\r\n '& .responsive-ad-preview-content': {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n minWidth: 0,\r\n '& .text-container-apl': {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n alignItems: 'center',\r\n whiteSpace: 'nowrap',\r\n minWidth: 0,\r\n '& .pre-headline-divider': {\r\n height: 2,\r\n },\r\n '& .description-parent': {\r\n flex: '1 1 0px',\r\n minWidth: 0,\r\n '& .description': {\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n width: '100%',\r\n },\r\n },\r\n },\r\n\r\n '& .business-name-with-ads': {\r\n marginRight: 10,\r\n },\r\n },\r\n },\r\n },\r\n },\r\n 'nativeAdImagePreviewCarousel-xxl': {\r\n '@media (min-width: 1400px)': {\r\n width: 530,\r\n },\r\n width: 420,\r\n },\r\n 'nativeAdImagePreviewCarousel-xl': {\r\n width: 420,\r\n },\r\n rightStyles: {\r\n // '@media (min-width: 1750px)': {\r\n // width: '50%',\r\n // },\r\n '& .image-experience-content': {\r\n minWidth: 'unset !important',\r\n },\r\n },\r\n container: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n width: '100%',\r\n gap: '32px',\r\n '& .text-input-container': {\r\n width: '100% !important',\r\n },\r\n '& .title-item': {\r\n width: 'auto',\r\n maxWidth: '100%',\r\n },\r\n },\r\n leftStyles: {\r\n width: '100%',\r\n maxWidth: '530px',\r\n },\r\n 'leftStyles-xxl': {\r\n width: '530px',\r\n },\r\n 'leftStyles-xl': {\r\n width: '430px',\r\n },\r\n headerStackStyles: {\r\n width: 'unset',\r\n },\r\n 'headerStackStyles-l': {\r\n width: '430px',\r\n },\r\n 'headerStackStyles-xl': {\r\n width: '430px',\r\n },\r\n 'headerStackStyles-xxl': {\r\n width: '530px',\r\n },\r\n imageExperienceStyle: {\r\n '& .image-experience-content': {\r\n minWidth: 'unset !important',\r\n },\r\n '& .image-list-choice-group .ms-ChoiceFieldGroup-flexContainer': {\r\n width: 'unset !important',\r\n },\r\n },\r\n textAssetStyle: {\r\n '& .text-assets-collection-container': {\r\n width: '100%',\r\n // '@media (max-width: 1750px)': {\r\n // width: 'unset !important',\r\n // },\r\n },\r\n },\r\n businessNameStyle: {\r\n '& .business-name-container': {\r\n width: '100%',\r\n // '@media (max-width: 1750px)': {\r\n // width: 'unset !important',\r\n // },\r\n },\r\n },\r\n imageListLoadingContainer: {\r\n minHeight: 84,\r\n '& .loading': {\r\n paddingTop: 30,\r\n },\r\n },\r\n imageListErrorContainer: {\r\n paddingTop: 10,\r\n '& .alert': {\r\n alignItems: 'center',\r\n padding: [4, 16, 4, 12],\r\n\r\n '& .alert-image:before': {\r\n lineHeight: '32px',\r\n },\r\n\r\n '& .alert__content': {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n flexGrow: 1,\r\n alignItems: 'center',\r\n },\r\n\r\n '& .alert__action': {\r\n marginLeft: 'auto',\r\n marginTop: 'unset',\r\n },\r\n },\r\n },\r\n adPreviewPlacementHeader: {\r\n '& > .ad-preview-title': {\r\n margin: '20px 24px 16px 24px',\r\n fontSize: 18,\r\n fontWeight: 'normal',\r\n lineHeight: '24px',\r\n },\r\n },\r\n adPreviewPlacementContainer: {\r\n height: 450,\r\n display: 'flex',\r\n justifyContent: 'flex-start',\r\n flexDirection: 'column',\r\n\r\n '&:hover .card-parent .placement-card-content': {\r\n borderColor: '#004578',\r\n },\r\n\r\n '& .ad-placement-card-preview': {\r\n overflow: 'visible !important', // to show the shadow\r\n margin: 'unset !important',\r\n\r\n },\r\n\r\n '& .ad-placement-card-preview.edge_178x100': {\r\n '& .card-parent': {\r\n maxWidth: 220 * 1.78,\r\n },\r\n },\r\n\r\n '& .ad-placement-card-preview.msan_133x100': {\r\n marginTop: '150px !important',\r\n paddingBottom: '0 !important',\r\n },\r\n\r\n '& .ad-placement-card-preview.msan_1x1': {\r\n marginTop: '150px !important',\r\n paddingBottom: '0 !important',\r\n },\r\n\r\n '& .ad-placement-card-preview.outlook_text_web': {\r\n marginTop: '150px !important',\r\n },\r\n\r\n '& .ad-placement-card-preview.outlook_text_mobile': {\r\n margin: '150px 11.5px 0 11.5px !important',\r\n },\r\n\r\n '& .preview-string': {\r\n width: '100%',\r\n fontSize: 14,\r\n textAlign: 'center',\r\n lineHeight: '20px',\r\n paddingTop: 12,\r\n },\r\n\r\n '& .additional-disclaimer-message': {\r\n position: 'absolute',\r\n left: 0,\r\n width: '100%',\r\n bottom: 0,\r\n padding: '0 24px',\r\n fontSize: 12,\r\n textAlign: 'left',\r\n lineHeight: '20px',\r\n },\r\n\r\n '& .placement-validation-message': {\r\n display: 'inline-block',\r\n width: '100%',\r\n fontSize: 14,\r\n textAlign: 'center',\r\n lineHeight: 2,\r\n marginRight: 16,\r\n },\r\n\r\n '& .responsive-boost-ad-placement-container': {\r\n display: 'flex',\r\n justifyContent: 'center',\r\n '& > .ad-placement-card-preview': {\r\n boxShadow: '0px 0.511px 1.533px rgb(0 0 0 / 10%), 0px 2.72533px 6.132px rgb(0 0 0 / 13%) !important',\r\n borderRadius: '5.11px !important',\r\n },\r\n },\r\n '& .responsive-boost-ad-placement-container.responsive-boost-start-menu': {\r\n marginTop: '30%',\r\n },\r\n '& .responsive-boost-ad-placement-container.responsive-boost-action-center': {\r\n marginTop: '20%',\r\n },\r\n '& .responsive-boost-ad-placement-container.responsive-boost-banner': {\r\n marginTop: '35%',\r\n marginLeft: 15,\r\n marginRight: 15,\r\n },\r\n },\r\n});\r\n","import classNames from 'classnames';\r\nimport React, { useCallback, useContext, useMemo, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { useResponsiveStyles } from '@bingads-webui-campaign-react/common-hooks';\r\nimport { useWizardService, matchStepState, STEP_STATES } from '@bingads-webui-react/wizard';\r\nimport { ActivityContext } from '@bingads-webui-react/hoc-with-signal';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { ActuationGroup } from '@bingads-webui-campaign-react/actuator';\r\nimport { AttentionBeaconGroup } from '@bingads-webui-campaign-react/attention-beacon';\r\nimport { FormErrorGroup, UnmappedFormErrors } from '@bingads-webui-campaign-react/form-error';\r\nimport { ValidationGroup } from '@bingads-webui-react/validation';\r\nimport { AssetGroup } from '@bingads-webui/campaign-odata-schemas';\r\nimport { useFormService } from '@bingads-webui-react/form';\r\nimport { DisplayPlusNativeAds } from '@bingads-webui-campaign-react/display-plus-native-ads';\r\nimport { withScope } from '@bingads-webui-react/scope-service';\r\n\r\nimport { NativeAdFooter } from './native-ad-footer';\r\nimport { getDefaultCampaign } from '../constants';\r\nimport { useBiddingScheme } from '../../../common/bidding-schemes';\r\nimport { getStyles } from '../../../shared/image-experience/style';\r\nimport { StepHeader } from '../../../shared/step-header';\r\n\r\nconst NativeAdInternal = ({\r\n data: ads,\r\n error,\r\n onDataChange,\r\n scope,\r\n hideFooter,\r\n supportImageFitting,\r\n loadClipchampPlayer = null,\r\n}) => {\r\n const {\r\n errors = [],\r\n } = error || {};\r\n const { data } = ads;\r\n\r\n const i18n = useContext(I18nContext);\r\n const activity = useContext(ActivityContext);\r\n const serverContext = useContext(ServerContext);\r\n\r\n const { Permissions, DynamicPermissions } = serverContext || {};\r\n const permissions = useMemo(() => ({ dynamic: { ...DynamicPermissions }, ...Permissions }), [DynamicPermissions, Permissions]);\r\n const finalHideFooter = hideFooter || !permissions.dynamic.DisplayPlusMultipleAds;\r\n\r\n const { state } = useWizardService();\r\n const { editingAdId } = state.context.wizardData;\r\n\r\n const { state: { context: { saveFailed } } } = useFormService();\r\n\r\n const { cid, aid } = scope.values || {};\r\n const biddingScheme = useBiddingScheme({\r\n cid, aid, getDefaultCampaign, i18n,\r\n });\r\n\r\n const currentStates = state.toStrings()[1];\r\n\r\n const { IsAmplifyEnabled } = Permissions;\r\n const { DisplayPlusAmplify } = DynamicPermissions;\r\n\r\n const stylingProps = useMemo(() =>\r\n ({ component: { placements: (IsAmplifyEnabled && DisplayPlusAmplify) ? 11 : 7 } }), [DisplayPlusAmplify, IsAmplifyEnabled]);\r\n\r\n const getClasses = useResponsiveStyles(getStyles, stylingProps);\r\n\r\n useEffect(() => {\r\n if (activity && matchStepState(state, STEP_STATES.LOADING)) {\r\n activity.signal(`onNativeAdsStepLoading - ${currentStates}`);\r\n }\r\n\r\n if (activity && matchStepState(state, STEP_STATES.SAVING)) {\r\n activity.signal(`onNativeAdsStepSaving - ${currentStates}`);\r\n }\r\n }, [activity, currentStates, state]);\r\n\r\n const onValidate = useCallback((result) => {\r\n onDataChange({\r\n data: {\r\n data: {\r\n ...data,\r\n ...result.data,\r\n },\r\n },\r\n isValid: result.isValid,\r\n });\r\n }, [data, onDataChange]);\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {!finalHideFooter &&
\r\n );\r\n};\r\n\r\nNativeAdInternal.propTypes = {\r\n data: PropTypes.shape({\r\n data: PropTypes.shape({\r\n FinalUrls: PropTypes.string,\r\n MobileFinalUrls: PropTypes.string,\r\n BusinessName: PropTypes.string,\r\n Headlines: PropTypes.arrayOf(PropTypes.string),\r\n LongHeadlines: PropTypes.arrayOf(PropTypes.string),\r\n Descriptions: PropTypes.arrayOf(PropTypes.string),\r\n Images: PropTypes.shape({}),\r\n TrackingUrlTemplate: PropTypes.string,\r\n FinalUrlSuffix: PropTypes.string,\r\n UrlCustomParameters: PropTypes.string,\r\n ImpressionTrackingUrls: PropTypes.string,\r\n VerifiedTrackingSettings: PropTypes.shape({}),\r\n FinalUrlForRecommendation: PropTypes.string,\r\n CallToAction: PropTypes.shape({\r\n cta: PropTypes.string,\r\n language: PropTypes.string,\r\n }),\r\n hotspots: PropTypes.shape({}),\r\n }),\r\n }).isRequired,\r\n onDataChange: PropTypes.func.isRequired,\r\n error: PropTypes.shape({}).isRequired,\r\n scope: PropTypes.shape({\r\n values: PropTypes.shape({\r\n cid: PropTypes.string,\r\n aid: PropTypes.string,\r\n }),\r\n }).isRequired,\r\n hideFooter: PropTypes.bool,\r\n supportImageFitting: PropTypes.bool,\r\n};\r\n\r\nNativeAdInternal.defaultProps = {\r\n hideFooter: false,\r\n supportImageFitting: false,\r\n};\r\n\r\nexport const NativeAd = withScope(NativeAdInternal);\r\n","import { isNumber, has } from 'underscore';\r\n\r\nenum ScaleUnit\r\n{\r\n Billion=1e9,\r\n Million=1e6,\r\n Thousand=1e3,\r\n None=1,\r\n}\r\n\r\nconst getValueWithUnit = (value: number, unit: string) => {\r\n if (isNumber(value) && has(ScaleUnit, unit)) {\r\n return value * ScaleUnit[unit];\r\n }\r\n return 0;\r\n};\r\n\r\nconst unitValueMap = {\r\n None: {\r\n value: 1,\r\n unit: '',\r\n },\r\n Thousand: {\r\n value: 1000,\r\n unit: 'K',\r\n },\r\n Million: {\r\n value: 1000000,\r\n unit: 'M',\r\n },\r\n Billion: {\r\n value: 1000000000,\r\n unit: 'B',\r\n },\r\n};\r\n\r\nexport { unitValueMap, getValueWithUnit };\r\n","import React, { useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { NativeAd } from './components/native-ad';\r\n\r\nexport const SingleNativeAdStepShell = ({\r\n data,\r\n error,\r\n onDataChange,\r\n}) => {\r\n const stepData = useMemo(() => (data || {}), [data]);\r\n\r\n const nativeAd = useMemo(() => (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nNativeAdsContainer.propTypes = {\r\n data: PropTypes.shape({}).isRequired,\r\n // onDataChange: PropTypes.func.isRequired,\r\n // error: PropTypes.shape({}).isRequired,\r\n // adMode: PropTypes.string.isRequired,\r\n};\r\n","import React, { useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { NativeAd } from './components/native-ad';\r\n\r\nexport const MultiAdsStepShell = ({\r\n data,\r\n error,\r\n onDataChange,\r\n}) => {\r\n const stepData = useMemo(() => (data || {}), [data]);\r\n\r\n const nativeAd = useMemo(() => (\r\n \r\n \r\n
\r\n {\r\n data && adIds.map((adId, idx) => (\r\n \r\n
\r\n );\r\n};\r\n\r\nEstimationMeter.propTypes = {\r\n low: PropTypes.number.isRequired,\r\n high: PropTypes.number,\r\n};\r\n\r\nEstimationMeter.defaultProps = {\r\n high: null,\r\n};\r\n","import {\r\n convertToLocalStyle,\r\n helpbuttonStyle,\r\n} from '@bingads-webui-campaign-react/common-styles';\r\n\r\nexport const getReachEstimateStyles = (_, { palette }) => ({\r\n reachEstimateControl: {\r\n width: 350,\r\n marginBottom: 10,\r\n },\r\n\r\n estimateHelpContent: {\r\n fontWeight: 600,\r\n fontSize: 14,\r\n lineHeight: '20px',\r\n color: '#292827',\r\n },\r\n\r\n estimateNote: {\r\n color: '#323130',\r\n fontSize: 12,\r\n width: 302,\r\n fontWeight: 400,\r\n lineHeight: '16px',\r\n marginTop: 10,\r\n height: 50,\r\n },\r\n\r\n panel: {\r\n minHeight: 161,\r\n position: 'relative',\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: 2,\r\n backgroundColor: `${palette && palette.white}`,\r\n },\r\n\r\n panelBody: {\r\n padding: 16,\r\n },\r\n\r\n reachEstimateTitle: {\r\n /* Potential available reach */\r\n width: 302,\r\n fontWeight: 600,\r\n fontSize: 18,\r\n lineHeight: '24px',\r\n /* identical to box height */\r\n display: 'flex',\r\n alignItems: 'center',\r\n color: '#323130',\r\n },\r\n\r\n impressionsCountMessage: {\r\n fontSize: 18,\r\n fontWeight: 'bold',\r\n '& a': {\r\n alignContent: 'center',\r\n },\r\n ...convertToLocalStyle(helpbuttonStyle({ palette })),\r\n },\r\n\r\n impressionsCount: {\r\n fontWeight: 700,\r\n fontSize: 24,\r\n lineHeight: '36px',\r\n color: '#323130',\r\n },\r\n\r\n meterContainer: {\r\n margin: '0px 0 13px 0',\r\n position: 'relative',\r\n fontSize: 12,\r\n top: -24,\r\n '& .specificMeter': {\r\n zIndex: 1,\r\n width: '10%',\r\n height: 24,\r\n backgroundColor: '#D13438',\r\n position: 'absolute',\r\n top: 17,\r\n },\r\n '& .broadMeter': {\r\n width: '90%',\r\n backgroundColor: '#C4C4C4',\r\n height: 24,\r\n position: 'absolute',\r\n top: 17,\r\n marginLeft: '10%',\r\n },\r\n },\r\n\r\n specificMeter: {\r\n width: '10%',\r\n height: 12,\r\n backgroundColor: '#C4C4C4',\r\n position: 'absolute',\r\n top: 17,\r\n },\r\n\r\n broadMeter: {\r\n width: '90%',\r\n backgroundColor: '#D13438',\r\n height: 24,\r\n position: 'absolute',\r\n top: 17,\r\n marginLeft: '10%',\r\n },\r\n\r\n audienceSpecificLabel: {\r\n position: 'absolute',\r\n top: 35,\r\n fontSize: 12,\r\n },\r\n\r\n audienceBroadLabel: {\r\n position: 'absolute',\r\n top: 35,\r\n fontSize: 12,\r\n right: 0,\r\n },\r\n\r\n arrow: {\r\n backgroundColor: 'white',\r\n top: 17,\r\n width: 1,\r\n height: 24,\r\n position: 'absolute',\r\n border: `4px solid ${palette.white} !important`,\r\n zIndex: 1,\r\n },\r\n});\r\n","/**\r\n * For impressions and clicks, 0-2 decimal places\r\n */\r\nexport const impreAndClicksOptions = {\r\n compact: 'short',\r\n minimumFractionDigits: 0,\r\n maximumFractionDigits: 2,\r\n};\r\n\r\n/**\r\n * For no decimals, 0 decimal places\r\n */\r\nexport const noDecimalOptions = {\r\n minimumFractionDigits: 0,\r\n maximumFractionDigits: 0,\r\n};\r\n\r\nexport const formatBigDecimal = (value, i18n) => {\r\n if (value > 999999) {\r\n return i18n.formatDecimal(value, impreAndClicksOptions);\r\n }\r\n return i18n.formatDecimal(value, noDecimalOptions);\r\n};\r\n","/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport React, { useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport {\r\n Accordion,\r\n AccordionHeader,\r\n AccordionItem,\r\n AccordionPanel,\r\n makeStyles,\r\n tokens,\r\n} from '@fluentui/react-components';\r\nimport { HorizontalBarChart } from '@fluentui/react-charting';\r\n\r\nimport { unitValueMap } from '../../../shared/helper/scale-unit';\r\nimport { formatBigDecimal } from '../../../shared/helper/format-big-decimal';\r\n\r\nconst formatBigNumber = (value, i18n) => {\r\n if (value === 0) {\r\n return i18n.getString(_TL_('Very narrow'));\r\n }\r\n return formatBigDecimal(value, i18n);\r\n};\r\n\r\nconst KEY = 'reach-formatEstimation-breakdown';\r\n\r\nconst formatEstimation = (data) => {\r\n const estimationAudienceUnit = _.get(data, ['EstAudienceSize', 'Unit']) || 'None';\r\n return unitValueMap[estimationAudienceUnit].value * (_.get(data, ['EstAudienceSize', 'Value']) || 0);\r\n};\r\n\r\nconst useStyles = makeStyles({\r\n chartContainer: {\r\n paddingBottom: tokens.spacingVerticalMNudge,\r\n },\r\n});\r\n\r\nexport const ReachEstimationBreakdown = React.memo(({\r\n ageOnlyEstimation,\r\n genderOnlyEstimation,\r\n locationOnlyEstimation,\r\n audienceOnlyEstimation,\r\n interestOnlyEstimation,\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n const classes = useStyles();\r\n const [openItems, setOpenItems] = React.useState([KEY]);\r\n const handleToggle = (_event, data) => {\r\n setOpenItems(data.openItems);\r\n };\r\n const estimations = [];\r\n const ageEstimation = formatEstimation(ageOnlyEstimation);\r\n const genderEstimation = formatEstimation(genderOnlyEstimation);\r\n const locationEstimation = formatEstimation(locationOnlyEstimation);\r\n const audienceEstimation = formatEstimation(audienceOnlyEstimation);\r\n const interestEstimation = formatEstimation(interestOnlyEstimation);\r\n\r\n if (ageOnlyEstimation !== null) {\r\n estimations.push({\r\n label: i18n.getString(_TL_('Age')),\r\n value: ageEstimation,\r\n yAxisCalloutData: formatBigNumber(ageEstimation, i18n),\r\n });\r\n }\r\n if (genderOnlyEstimation !== null) {\r\n estimations.push({\r\n label: i18n.getString(_TL_('Gender')),\r\n value: genderEstimation,\r\n yAxisCalloutData: formatBigNumber(genderEstimation, i18n),\r\n });\r\n }\r\n if (locationOnlyEstimation !== null) {\r\n estimations.push({\r\n label: i18n.getString(_TL_('Location')),\r\n value: locationEstimation,\r\n yAxisCalloutData: formatBigNumber(locationEstimation, i18n),\r\n });\r\n }\r\n if (audienceOnlyEstimation !== null) {\r\n estimations.push({\r\n label: i18n.getString(_TL_('Audience lists')),\r\n value: audienceEstimation,\r\n yAxisCalloutData: formatBigNumber(audienceEstimation, i18n),\r\n });\r\n }\r\n if (interestOnlyEstimation !== null) {\r\n estimations.push({\r\n label: i18n.getString(_TL_('Interest')),\r\n value: interestEstimation,\r\n yAxisCalloutData: formatBigNumber(interestEstimation, i18n),\r\n });\r\n }\r\n\r\n estimations.sort((a, b) => b.value - a.value);\r\n\r\n const data = estimations.map(estimation => ({\r\n chartTitle: estimation.label,\r\n chartData: [\r\n {\r\n legend: estimation.label,\r\n horizontalBarChartdata: { x: estimation.value, y: estimations[0].value },\r\n yAxisCalloutData: estimation.yAxisCalloutData,\r\n color: '#C1423F',\r\n },\r\n ],\r\n }));\r\n\r\n if (!data.length) {\r\n return null;\r\n }\r\n\r\n return (\r\n \r\n {yAxisCalloutData}\r\n
\r\n );\r\n }}\r\n />\r\n \r\n
\r\n );\r\n};\r\n\r\nReachEstimate.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n estimationData: PropTypes.shape({\r\n EstAudienceSize: PropTypes.number.isRequired,\r\n EstImpression: PropTypes.number.isRequired,\r\n }).isRequired,\r\n isLoading: PropTypes.bool.isRequired,\r\n pricingModel: PropTypes.string.isRequired,\r\n isImpressionTooSpecific: PropTypes.bool.isRequired,\r\n updateValidation: PropTypes.func.isRequired,\r\n validationProps: PropTypes.shape({\r\n field: PropTypes.string.isRequired,\r\n }).isRequired,\r\n isCampaignCreationPlannerIntegrationEnabled: PropTypes.bool,\r\n showImpressions: PropTypes.bool,\r\n privacyResult: PropTypes.string.isRequired,\r\n hasAudienceRemarketingList: PropTypes.bool.isRequired,\r\n showBreakdown: PropTypes.bool,\r\n isAudienceAdGroupEdit: PropTypes.bool.isRequired,\r\n audienceSize: PropTypes.shape({\r\n EstAudienceSize: PropTypes.shape({\r\n Value: PropTypes.number,\r\n Unit: PropTypes.string,\r\n }),\r\n }),\r\n ageOnlyEstimation: PropTypes.shape({}),\r\n genderOnlyEstimation: PropTypes.shape({}),\r\n locationOnlyEstimation: PropTypes.shape({}),\r\n audienceOnlyEstimation: PropTypes.shape({}),\r\n interestOnlyEstimation: PropTypes.shape({}),\r\n};\r\n\r\nReachEstimate.defaultProps = {\r\n isCampaignCreationPlannerIntegrationEnabled: false,\r\n showImpressions: true,\r\n audienceSize: null,\r\n ageOnlyEstimation: null,\r\n genderOnlyEstimation: null,\r\n locationOnlyEstimation: null,\r\n audienceOnlyEstimation: null,\r\n interestOnlyEstimation: null,\r\n showBreakdown: false,\r\n};\r\n\r\nconst validatedReachEstimate = withCustomValidation(ReachEstimate);\r\n\r\nexport { validatedReachEstimate as ReachEstimate };\r\n","import { CampaignSubTypeMapping, isXandrDisplayAdsCampaign } from '@bingads-webui-campaign-react/constants';\r\nimport {\r\n BidStrategyToDevices,\r\n AgeRangesCampaignToAdInsight,\r\n} from '@bingads-webui-campaign-react/xandr-campaign';\r\nimport timeZoneMapper from '@bingads-webui-component-legacy/timezonemapper/index';\r\n\r\nconst getLocationIds = ({ adGroup, bundleCountries }) => {\r\n const { locationTargets } = adGroup || {};\r\n if (locationTargets && locationTargets.currentLevelSettings) {\r\n const { targetOption, currentLocations } = locationTargets.currentLevelSettings;\r\n\r\n if (targetOption === 'bundle' && bundleCountries && bundleCountries.length > 0) {\r\n return bundleCountries.map(c => c.LocationId);\r\n }\r\n\r\n if (targetOption === 'specific' && currentLocations && currentLocations.length > 0) {\r\n return currentLocations.reduce((locationIds, cl) => {\r\n if (cl.SelectionStatus === 'Included' && cl.CriterionType !== 'Radius') {\r\n locationIds.push(cl.Criterion.LocationCriterion.LocationId);\r\n }\r\n return locationIds;\r\n }, []);\r\n }\r\n\r\n return [];\r\n }\r\n\r\n return [];\r\n};\r\n\r\nconst getRadiusCriterions = ({ adGroup }) => {\r\n const { locationTargets } = adGroup || {};\r\n if (locationTargets && locationTargets.currentLevelSettings) {\r\n const { currentLocations } = locationTargets.currentLevelSettings;\r\n\r\n if (currentLocations && currentLocations.length > 0) {\r\n return currentLocations.reduce((radiusTargets, cl) => {\r\n if (cl.CriterionType === 'Radius') {\r\n radiusTargets.push({\r\n CenterLatitude: cl.Criterion.RadiusCriterion.Latitude,\r\n CenterLongitude: cl.Criterion.RadiusCriterion.Longitude,\r\n Radius: cl.Criterion.RadiusCriterion.Radius,\r\n });\r\n }\r\n return radiusTargets;\r\n }, []);\r\n }\r\n\r\n return [];\r\n }\r\n\r\n return [];\r\n};\r\n\r\nconst getExcludedLocationIds = ({ adGroup }) => {\r\n const { locationTargets } = adGroup || {};\r\n if (locationTargets && locationTargets.currentLevelSettings) {\r\n const { targetOption, currentLocations } = locationTargets.currentLevelSettings;\r\n\r\n if (targetOption === 'specific' && currentLocations && currentLocations.length > 0) {\r\n return currentLocations.reduce((locationIds, cl) => {\r\n if (cl.SelectionStatus === 'Excluded' && cl.CriterionType !== 'Radius') {\r\n locationIds.push(cl.Criterion.LocationCriterion.LocationId);\r\n }\r\n return locationIds;\r\n }, []);\r\n }\r\n\r\n return [];\r\n }\r\n\r\n return [];\r\n};\r\n\r\nconst getAudienceCriterionIds = ({ adGroup, key, status }) => {\r\n if (adGroup && Array.isArray(adGroup[key])) {\r\n return adGroup[key].reduce((audienceIds, audience) => {\r\n if (audience.Status === status) {\r\n audienceIds.push(audience.Criterion.AudienceId);\r\n }\r\n return audienceIds;\r\n }, []);\r\n }\r\n return [];\r\n};\r\n\r\nexport const getInterestIds = ({ adGroup }) => getAudienceCriterionIds({ adGroup, key: 'interests', status: 'Active' });\r\n\r\nexport const getExcludedInterestIds = ({ adGroup }) => getAudienceCriterionIds({ adGroup, key: 'interests', status: 'Excluded' });\r\n\r\nexport const getOtherAudienceIds = ({ adGroup }) => getAudienceCriterionIds({ adGroup, key: 'audiences', status: 'Active' });\r\n\r\nexport const getExcludedOtherAudienceIds = ({ adGroup }) => getAudienceCriterionIds({ adGroup, key: 'audiences', status: 'Excluded' });\r\n\r\nexport const getAudienceIds = ({ adGroup }) => [...getInterestIds({ adGroup }), ...getOtherAudienceIds({ adGroup })];\r\n\r\nexport const getExcludedAudienceIds = ({ adGroup }) => [...getExcludedInterestIds({ adGroup }), ...getExcludedOtherAudienceIds({ adGroup })];\r\n\r\nconst getAgeRanges = ({ adGroup }) => adGroup.ageRanges && adGroup.ageRanges.map(ar => AgeRangesCampaignToAdInsight[ar]);\r\n\r\nconst getDevices = ({ adGroup, campaignBiddingScheme }) => {\r\n if (adGroup.dealDetails) {\r\n return adGroup.deviceTypes;\r\n }\r\n\r\n return BidStrategyToDevices[campaignBiddingScheme.Type];\r\n};\r\n\r\nconst getAdSchedule = ({ adGroup }) => {\r\n if (adGroup && adGroup.adSchedulesBulkUpsert && adGroup.adSchedulesBulkUpsert.length > 0) {\r\n return adGroup.adSchedulesBulkUpsert.map((a) => {\r\n const { Day, FromHour, ToHour } = a.Criterion.DayTimeCriterion;\r\n return {\r\n Day,\r\n StartHour: FromHour,\r\n EndHour: ToHour,\r\n };\r\n });\r\n }\r\n return [];\r\n};\r\n\r\nexport const formatReachEstimateData = ({\r\n adGroup,\r\n campaignSubtype,\r\n campaignBiddingScheme,\r\n bundleCountries,\r\n}) => {\r\n const reachEstimationTargets = {\r\n Age: {\r\n Includes: getAgeRanges({ adGroup }),\r\n },\r\n Gender: {\r\n Includes: adGroup.genderTypes,\r\n },\r\n Device: {\r\n Includes: getDevices({ adGroup, campaignBiddingScheme }),\r\n },\r\n Location: {\r\n Includes: getLocationIds({ adGroup, bundleCountries }),\r\n Excludes: getExcludedLocationIds({ adGroup }),\r\n },\r\n RadiusTargets: getRadiusCriterions({ adGroup }),\r\n Audience: {\r\n Includes: getAudienceIds({ adGroup }),\r\n Excludes: getExcludedAudienceIds({ adGroup }),\r\n },\r\n Day: getAdSchedule({ adGroup }),\r\n TimeZone: timeZoneMapper.getAccountIANATimeZone(),\r\n CampaignSubType: isXandrDisplayAdsCampaign(campaignSubtype) ? CampaignSubTypeMapping.DisplayAds : CampaignSubTypeMapping.BrandAwarenessVideoAds,\r\n };\r\n\r\n return reachEstimationTargets;\r\n};\r\n\r\nexport const areCriterionTargetsSet = (targets, negativeTargets) => (targets && targets.length > 0) || (negativeTargets && negativeTargets.length > 0);\r\n\r\nconst isTargetSet = (targetSetting, isEditFlow) => !isEditFlow || targetSetting;\r\n\r\nexport const getTargetSettingsFromCriterions = (adGroupData, isEditFlow) => {\r\n // target settings are the non empty criterions\r\n const targetSettings = [];\r\n\r\n if (isTargetSet(adGroupData.isTargetSetCompanyName, isEditFlow) && areCriterionTargetsSet(adGroupData.companyNameTargets, adGroupData.negativeCompanyNameTargets)) {\r\n targetSettings.push('CompanyName');\r\n }\r\n\r\n if (isTargetSet(adGroupData.isTargetSetJobFunction, isEditFlow) && areCriterionTargetsSet(adGroupData.jobTargets, adGroupData.negativeJobTargets)) {\r\n targetSettings.push('JobFunction');\r\n }\r\n\r\n if (isTargetSet(adGroupData.isTargetSetIndustry, isEditFlow) && areCriterionTargetsSet(adGroupData.industry, adGroupData.negativeIndustry)) {\r\n targetSettings.push('Industry');\r\n }\r\n\r\n if (isTargetSet(adGroupData.isTargetSetAudience, isEditFlow) && (areCriterionTargetsSet(adGroupData.audiences, null) || areCriterionTargetsSet(adGroupData.interests, null))) {\r\n targetSettings.push('Audience');\r\n }\r\n\r\n // we always add age and gender, the user can either select all age/gender or select only some, it cannot be empty.\r\n targetSettings.push('Age');\r\n targetSettings.push('Gender');\r\n\r\n return targetSettings.length > 0 ? targetSettings.join(';') : 'delete_value';\r\n};\r\n","import _ from 'underscore';\r\nimport React, { useContext, useMemo, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { PerformanceTile } from '@bingads-webui-campaign-react/performance-tile';\r\nimport { BidStrategy, CampaignSubTypeMapping } from '@bingads-webui-campaign/audience-campaign-shared';\r\nimport { AgeRangesCampaignToAdInsight } from '@bingads-webui-campaign-react/xandr-campaign';\r\nimport { ActivityContext } from '@bingads-webui-react/hoc-with-signal';\r\n\r\nimport { useTargetingEstimationCaller } from './use-targeting-estimation-caller';\r\n// import { formatBigDecimal } from '../../../shared/helper/format-big-decimal';\r\nimport { getValueWithUnit } from '../../../shared/helper/scale-unit';\r\nimport { ReachEstimate } from './reach-estimate';\r\nimport { BiddingSchemeToBidType, BidTypes } from '../../../common/constants';\r\nimport { getAudienceIds, getExcludedAudienceIds, getInterestIds, getExcludedInterestIds, getOtherAudienceIds, getExcludedOtherAudienceIds } from '../utils';\r\n\r\nconst hasRemartketingList = audience => _.any(audience || [], audienceCriterion =>\r\n audienceCriterion.Criterion.AudienceType === 'Remessaging'\r\n || audienceCriterion.Criterion.AudienceType === 'Product'\r\n || audienceCriterion.Criterion.AudienceType === 'Custom'\r\n || audienceCriterion.Criterion.AudienceType === 'RemarketingSimilar');\r\n\r\nconst getTargetsFromAdgroupModel = (adGroup) => {\r\n const ageRage = _.map(adGroup.ageRanges || [], (age) => {\r\n if (_.isObject(age) && _.get(age, ['Criterion', 'AgeCriterion', 'Target'])) {\r\n return AgeRangesCampaignToAdInsight[_.get(age, ['Criterion', 'AgeCriterion', 'Target'])];\r\n }\r\n return AgeRangesCampaignToAdInsight[age];\r\n });\r\n\r\n const genderTypes = _.map(adGroup.genderTypes || [], (gender) => {\r\n if (_.isObject(gender) && _.get(gender, ['Criterion', 'GenderCriterion', 'Target'])) {\r\n return _.get(gender, ['Criterion', 'GenderCriterion', 'Target']);\r\n }\r\n return gender;\r\n });\r\n\r\n return {\r\n Age: {\r\n Includes: ageRage,\r\n Excludes: [],\r\n },\r\n Gender: {\r\n Includes: genderTypes,\r\n Excludes: [],\r\n },\r\n Location: {\r\n Includes: _.map(\r\n _.filter(_.get(adGroup, 'locationTargets.currentLevelSettings.currentLocations', []), location => location.SelectionStatus === 'Included' && location.CriterionType !== 'Radius'),\r\n location => (location.Criterion.LocationCriterion.LocationId)\r\n ),\r\n Excludes: _.map(\r\n _.filter(_.get(adGroup, 'locationTargets.currentLevelSettings.currentLocations', []), location => location.SelectionStatus === 'Excluded' && location.CriterionType !== 'Radius'),\r\n location => (location.Criterion.LocationCriterion.LocationId)\r\n ),\r\n },\r\n RadiusTargets: _.map(\r\n _.filter(_.get(adGroup, 'locationTargets.currentLevelSettings.currentLocations', []), location => location.CriterionType === 'Radius'),\r\n location => ({\r\n CenterLatitude: location.Criterion.RadiusCriterion.Latitude,\r\n CenterLongitude: location.Criterion.RadiusCriterion.Longitude,\r\n Radius: location.Criterion.RadiusCriterion.Radius,\r\n })\r\n ),\r\n Audience: {\r\n Includes: getAudienceIds({ adGroup }),\r\n Excludes: getExcludedAudienceIds({ adGroup }),\r\n },\r\n Company: {\r\n Includes: _.map(_.get(adGroup, 'companyNameTargets', []), company => company.Target),\r\n Excludes: _.map(_.get(adGroup, 'negativeCompanyNameTargets', []), company => company.Target),\r\n },\r\n Industry: {\r\n Includes: _.get(adGroup, 'industry', []),\r\n Excludes: _.get(adGroup, 'negativeIndustry', []),\r\n },\r\n JobFunction: {\r\n Includes: _.get(adGroup, 'jobTargets', []),\r\n Excludes: _.get(adGroup, 'negativeJobTargets', []),\r\n },\r\n };\r\n};\r\n\r\nconst getOtherParams = (adGroup, campaign) => ({\r\n AutoTargeting: adGroup.UseOptimizedTargeting,\r\n CampaignBiddingStrategy: (campaign && BidStrategy[campaign.BiddingScheme.Type]),\r\n CampaignSubType: adGroup ? CampaignSubTypeMapping[adGroup.CampaignSubType] : campaign.CampaignSubType,\r\n});\r\n\r\nexport const TargetingEstimation = ({\r\n data,\r\n isCampaignCreationPlannerIntegrationEnabled,\r\n isMultiAdFormatEnabled,\r\n showBreakdown,\r\n isAudienceAdGroupEdit,\r\n audienceUsePrivacyCheck,\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n const activity = useContext(ActivityContext);\r\n\r\n const { adGroup = {}, campaign = {} } = data || {};\r\n\r\n const hasAudienceRemarketingList = hasRemartketingList(adGroup.audiences || []);\r\n const otherParams = useMemo(() => getOtherParams(adGroup, campaign), [adGroup, campaign]);\r\n\r\n const [targetsForAudienceSizeEstimation, targetsForAudienceKPIEstimation] =\r\n useMemo(() => {\r\n const targetsForAudienceSize = { ...getTargetsFromAdgroupModel(adGroup), ...otherParams };\r\n\r\n const bidKeyToSend = BiddingSchemeToBidType[campaign.BiddingScheme.Type] || BidTypes.SearchBid;\r\n\r\n const bidValue = adGroup && adGroup[bidKeyToSend];\r\n\r\n const targetsForAudienceKPI =\r\n {\r\n ...getTargetsFromAdgroupModel(adGroup),\r\n Bid: Number(bidValue),\r\n DailyBudget: campaign && campaign.Budget && campaign.Budget.Amount,\r\n };\r\n\r\n return [targetsForAudienceSize, targetsForAudienceKPI];\r\n }, [adGroup, campaign, otherParams]);\r\n\r\n const interestOnlyTargets = useMemo(() => ({\r\n Audience: {\r\n Includes: getInterestIds({ adGroup }),\r\n Excludes: getExcludedInterestIds({ adGroup }),\r\n },\r\n ...otherParams,\r\n }), [adGroup, otherParams]);\r\n\r\n const otherAudienceOnlyTargets = useMemo(() => ({\r\n Audience: {\r\n Includes: getOtherAudienceIds({ adGroup }),\r\n Excludes: getExcludedOtherAudienceIds({ adGroup }),\r\n },\r\n ...otherParams,\r\n }), [adGroup, otherParams]);\r\n\r\n // AudienceStatic = 0,\r\n // AudienceVideoAds = 3,\r\n // DisplayAds = 5,\r\n const getCampaingSubTypes = types => _.map(types, (type) => {\r\n if (type === 'Display') return 5;\r\n if (type === 'Video') return 3;\r\n return 0;\r\n });\r\n\r\n const subTypes = _.map(data.adGroup.ads, ad => ad.adSubType);\r\n const campaignSubTypes = isMultiAdFormatEnabled ?\r\n getCampaingSubTypes(subTypes)\r\n : undefined;\r\n\r\n const [\r\n isRecommendationDataLoading,\r\n estimationData,\r\n isImpressionTooSpecific,\r\n privacyResult,\r\n audienceSize,\r\n ageOnlyEstimation,\r\n genderOnlyEstimation,\r\n locationOnlyEstimation,\r\n audienceOnlyEstimation,\r\n interestOnlyEstimation,\r\n ] = useTargetingEstimationCaller({\r\n targetsForAudienceSizeEstimation,\r\n targetsForAudienceKPIEstimation,\r\n showBreakdown,\r\n interestOnlyTargets,\r\n otherAudienceOnlyTargets,\r\n campaignSubTypes,\r\n audienceUsePrivacyCheck,\r\n });\r\n\r\n // Log estimationData and adGroup.id only once\r\n useEffect(() => {\r\n if (activity && estimationData) {\r\n activity.signal(`PlannerValidation AdGroup ID: ${adGroup.Id} - ${JSON.stringify(estimationData)}`);\r\n }\r\n }, [estimationData, adGroup.id]);\r\n\r\n const estimations = useMemo(() => {\r\n const estClick = (estimationData && estimationData.EstClick && estimationData.EstClick.High &&\r\n getValueWithUnit(estimationData.EstClick.High.Value, estimationData.EstClick.High.Unit)) || 0;\r\n const estCTR = (estimationData && estimationData.EstCTR && estimationData.EstCTR.High && estimationData.EstCTR.Low) ?\r\n [`${estimationData.EstCTR.Low}%`, `${estimationData.EstCTR.High}%`]\r\n : 0;\r\n const estSpend = (estimationData && estimationData.EstSpend && estimationData.EstSpend.High &&\r\n getValueWithUnit(estimationData.EstSpend.High.Value, estimationData.EstSpend.High.Unit)) || 0;\r\n const estAvgCPC = (estimationData && estimationData.EstAvgCPC && estimationData.EstAvgCPC.High &&\r\n getValueWithUnit(estimationData.EstAvgCPC.High.Value, estimationData.EstAvgCPC.High.Unit)) || 0;\r\n\r\n return _.compact([\r\n {\r\n className: 'audience-clicks',\r\n title: i18n.getString(_TL_('Clicks')),\r\n dashColor: '#0078D7',\r\n estimation: estClick,\r\n },\r\n {\r\n className: 'audience-CTR',\r\n title: i18n.getString(_TL_('CTR')),\r\n dashColor: '#00A5B0',\r\n estimation: estCTR,\r\n },\r\n isCampaignCreationPlannerIntegrationEnabled && {\r\n className: 'audience-Spend',\r\n title: i18n.getString(_TL_('Spend')),\r\n dashColor: '#00A5B0',\r\n estimation: estSpend,\r\n },\r\n isCampaignCreationPlannerIntegrationEnabled && {\r\n className: 'audience-AvgCPC',\r\n title: i18n.getString(_TL_('Avg.CPC')),\r\n dashColor: '#00A5B0',\r\n estimation: estAvgCPC,\r\n },\r\n ]);\r\n }, [estimationData, i18n, isCampaignCreationPlannerIntegrationEnabled]);\r\n\r\n // disable per https://msasg.visualstudio.com/Bing_Ads/_workitems/edit/8822650\r\n const showImpressions = false;\r\n const showPerformanceTile = false;\r\n\r\n return (\r\n \r\n {showPanel &&\r\n
\r\n {isCampaignCreationPlannerIntegrationEnabled && showImpressions &&\r\n \r\n \r\n {isLoading ? (\r\n <>\r\n \r\n \r\n \r\n )\r\n : (\r\n <>\r\n \r\n \r\n \r\n \r\n \r\n \r\n {errorMessage}\r\n \r\n }\r\n \r\n {showBreakdown && !errorMessage && \r\n
\r\n }\r\n {i18n.getString(titleReach)}
\r\n {i18n.getString(`${titleReach}`)}
\r\n \r\n {i18n.getString(_TL_('These estimates are based on your targeting settings and audiences.'))}\r\n
\r\n \r\n {i18n.getString(_TL_('Potential reach'))}\r\n
\r\n {estimatedReachText}
\r\n {errorMessage &&\r\n \r\n {showPanel &&\r\n
\r\n }\r\n \r\n \r\n {isLoading ? (\r\n <>\r\n \r\n \r\n \r\n )\r\n : (\r\n <>\r\n \r\n \r\n \r\n \r\n \r\n \r\n {errorMessage}\r\n \r\n }\r\n \r\n \r\n )\r\n }\r\n \r\n
\r\n }\r\n {i18n.getString(titleImpression)}
\r\n {i18n.getString(`${titleImpression}`)}
\r\n \r\n {i18n.getString(_TL_('These are estimated based on targeting preferences and audience.'))}\r\n
\r\n \r\n {i18n.getString(_TL_('Potential impression'))}\r\n
\r\n {estimatedImpressionText}
\r\n {errorMessage &&\r\n \r\n
\r\n );\r\n};\r\n\r\nTargetingEstimation.propTypes = {\r\n data: PropTypes.shape({}),\r\n isCampaignCreationPlannerIntegrationEnabled: PropTypes.bool,\r\n showBreakdown: PropTypes.bool,\r\n isAudienceAdGroupEdit: PropTypes.bool.isRequired,\r\n};\r\n\r\nTargetingEstimation.defaultProps = {\r\n data: {},\r\n isCampaignCreationPlannerIntegrationEnabled: false,\r\n showBreakdown: false,\r\n};\r\n","import React, { useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { Label, Stack } from '@bingads-webui-react/fabric-control';\r\nimport { HelpPopup } from '@bingads-webui-react/help-popup';\r\nimport DataTrending from '../../../media/data-trending.svg';\r\n\r\n\r\nconst PredictiveTargetingDescription = ({ i18n }) => (\r\n \r\n {i18n.getString(_TL_('Predictive targeting allows us to optimize your ad reach based on your targeting preferences. You can customize predictive targeting by setting up targeting preferences below.'))}\r\n {i18n.getString(_TL_('Learn more'))}\r\n
\r\n);\r\n\r\nPredictiveTargetingDescription.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n};\r\n\r\nexport const PredictiveTargetingHeader = ({ data }) => {\r\n const i18n = useContext(I18nContext);\r\n\r\n const { UseOptimizedTargeting } = data;\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n {render(props)}\r\n
\r\n ),\r\n styles: { root: { fontWeight: '100' } },\r\n },\r\n {\r\n key: 'specific',\r\n text: _TL_('Microsoft owned and operated placements'),\r\n onRenderField: (props, render) => (\r\n \r\n {_TL_('This option includes Microsoft sites and additional partner traffic.')}\r\n
\r\n \r\n {render(props)}\r\n
\r\n ),\r\n styles: { root: { fontWeight: '100' } },\r\n },\r\n];\r\n\r\nconst renderPlacements = (props) => {\r\n const { checked, disabled } = props;\r\n let iconSectionStyle;\r\n if (checked) {\r\n iconSectionStyle = disabled ? iconSectionDisabled : iconSectionChecked;\r\n } else {\r\n iconSectionStyle = iconSection;\r\n }\r\n\r\n return (\r\n \r\n {_TL_('Show your ads on specific Microsoft owned and operated placements.')}\r\n
\r\n \r\n
\r\n \r\n {props.value}\r\n \r\n
\r\n );\r\n};\r\n\r\nrenderPlacements.propTypes = {\r\n props: PropTypes.shape({\r\n checked: PropTypes.bool.isRequired,\r\n disabled: PropTypes.bool.isRequired,\r\n icon: PropTypes.string.isRequired,\r\n label: PropTypes.string.isRequired,\r\n value: PropTypes.string.isRequired,\r\n }),\r\n};\r\n\r\nconst ValidatedPlacementsFunctionPickerInternal = ({\r\n updateValidation,\r\n validationProps,\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n const { data: { BoostAdunitIds } } = validationProps;\r\n const initialSelectedKey = 'all';\r\n const initialSelectedPlacements = useMemo(() => _.map(placements, (placement => placement.id)), []);\r\n const initialSelectedAdUnitIds = useMemo(() =>\r\n _.flatten(_.map(\r\n initialSelectedPlacements,\r\n i => placements[placementsIdMap[i]].adUnitIds\r\n )), [initialSelectedPlacements]);\r\n\r\n const [selectedKey, setSelectedKey] = useState(initialSelectedKey);\r\n const [selectedPlacements, setSelectedPlacements] = useState(initialSelectedPlacements);\r\n const [selectedAdUnitIds, setSelectedAdUnitIds] = useState(initialSelectedAdUnitIds);\r\n const [placementsDisabledStates, setPlacementsDisabledStates] = useState([false, false, false]);\r\n\r\n useEffect(() => {\r\n if (BoostAdunitIds && _.isArray(BoostAdunitIds) && BoostAdunitIds.length > 0) {\r\n const savedSelectedKey = 'specific';\r\n setSelectedKey(savedSelectedKey);\r\n\r\n let savedSelectedPlacements = [];\r\n let savedSelectedAdUnitIds = [];\r\n _.forEach(placements, (placement) => {\r\n const overlap = _.intersection(BoostAdunitIds, placement.adUnitIds);\r\n if (overlap.length > 0) {\r\n savedSelectedPlacements = savedSelectedPlacements.concat(placement.id);\r\n savedSelectedAdUnitIds = savedSelectedAdUnitIds.concat(placement.adUnitIds);\r\n }\r\n });\r\n\r\n const newPlacementsDisabledStates = [false, false, false];\r\n if (savedSelectedPlacements.length === 1) {\r\n const idToDisable = savedSelectedPlacements[0];\r\n newPlacementsDisabledStates[idToDisable - 1] = true;\r\n }\r\n\r\n setPlacementsDisabledStates(newPlacementsDisabledStates);\r\n setSelectedPlacements(savedSelectedPlacements);\r\n setSelectedAdUnitIds(savedSelectedAdUnitIds);\r\n }\r\n }, [BoostAdunitIds, updateValidation]);\r\n\r\n const onChangeAllSpecific = useCallback((e, option) => {\r\n setSelectedKey(option.key);\r\n\r\n const result = {\r\n BoostAdunitIds: option.key === 'all' ? 'delete_value' : selectedAdUnitIds,\r\n };\r\n\r\n updateValidation([], result);\r\n }, [selectedAdUnitIds, updateValidation]);\r\n\r\n const handlePlacementOnChange = useCallback((e, isChecked, currentId, currentAdUnitIds) => {\r\n let newSelectedPlacements = [];\r\n let newSelectedAdUnitIds = [];\r\n\r\n // get the new selected placements and adUnitIds\r\n if (isChecked) {\r\n newSelectedPlacements = selectedPlacements.concat(currentId);\r\n newSelectedAdUnitIds = selectedAdUnitIds.concat(currentAdUnitIds);\r\n } else {\r\n newSelectedPlacements = _.filter(selectedPlacements, (placement => !_.isEqual(placement, currentId)));\r\n newSelectedAdUnitIds = _.flatten(_.filter(selectedAdUnitIds, (id => !_.contains(currentAdUnitIds, id))));\r\n }\r\n\r\n const newPlacementsDisabledStates = [false, false, false];\r\n if (newSelectedPlacements.length === 1) {\r\n const idToDisable = newSelectedPlacements[0];\r\n newPlacementsDisabledStates[idToDisable - 1] = true;\r\n }\r\n setPlacementsDisabledStates(newPlacementsDisabledStates);\r\n setSelectedPlacements(newSelectedPlacements);\r\n setSelectedAdUnitIds(newSelectedAdUnitIds);\r\n\r\n const result = {\r\n BoostAdunitIds: '',\r\n };\r\n result.BoostAdunitIds = newSelectedAdUnitIds;\r\n updateValidation([], result);\r\n }, [selectedPlacements, selectedAdUnitIds, updateValidation]);\r\n\r\n return (\r\n \r\n \r\n {props.value}\r\n \r\n
\r\n currentAccount.PlacementExclusionLists['Default.GetOwnedOperatedExclusions'].get()}\r\n >\r\n {oolist => (\r\n selectedKey === 'specific' && oolist.value.length > 0 &&\r\n \r\n {i18n.getString(_TL_('You may be excluding the following websites which will prevent your campaign from serving'))}: { oolist.value.map(item => item.Url).join(', ')}\r\n \r\n )\r\n }\r\n \r\n {selectedKey === 'specific' && (\r\n
\r\n );\r\n};\r\n\r\nValidatedPlacementsFunctionPickerInternal.propTypes = {\r\n updateValidation: PropTypes.func.isRequired,\r\n validationProps: PropTypes.shape({\r\n data: PropTypes.shape({\r\n BoostAdunitIds: PropTypes.arrayOf(PropTypes.string).isRequired,\r\n }),\r\n }).isRequired,\r\n};\r\n\r\nexport const ValidatedPlacementsFunctionPicker = withCustomValidation(ValidatedPlacementsFunctionPickerInternal);\r\n","import React, { useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { ValidatedLegacyDateSetting } from '@bingads-webui-campaign/date-setting';\r\nimport { ValidatedLegacyAdSchedule } from '@bingads-webui-campaign/ad-schedule';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\n\r\nexport const AdSchedule = ({\r\n adGroup,\r\n campaign,\r\n isCreate,\r\n hideUseCampaignSetting,\r\n showBidAdjustmentColumn,\r\n setAdScheduleViewCallback,\r\n isDateSettingsDisplayed,\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n\r\n const {\r\n adSchedules,\r\n StartDate,\r\n EndDate,\r\n deal,\r\n } = adGroup || {};\r\n\r\n const {\r\n adSchedules: campaignAdSchedules = {},\r\n TimeZone,\r\n } = campaign || {};\r\n\r\n return (\r\n <>\r\n {\r\n isDateSettingsDisplayed &&\r\n \r\n
\r\n \r\n \r\n \r\n {\r\n _.map(placements, (placement) => {\r\n let currentItemStyle;\r\n if (placement.checked) {\r\n currentItemStyle = placement.disabled ? itemStyleDisabled : itemStyleChecked;\r\n } else {\r\n currentItemStyle = itemStyle;\r\n }\r\n const checkedState = _.contains(selectedPlacements, placement.id);\r\n const disabledState = placementsDisabledStates[placement.id - 1];\r\n\r\n return (\r\n \r\n
\r\n )}\r\n \r\n handlePlacementOnChange(e, isChecked, placement.id, placement.adUnitIds)}\r\n />\r\n
\r\n );\r\n })\r\n }\r\n \r\n { areTargetsSet &&\r\n \r\n \r\n {TargetItems.map(option => (\r\n <>\r\n {i18n.getString(option.description)} \r\n \r\n ))}\r\n \r\n \r\n }\r\n
\r\n );\r\n};\r\n\r\nTargetOrBidSelector.propTypes = {\r\n field: PropTypes.string.isRequired,\r\n value: PropTypes.string.isRequired,\r\n updateValidation: PropTypes.func.isRequired,\r\n targets: PropTypes.arrayOf(PropTypes.shape({})),\r\n negativeTargets: PropTypes.arrayOf(PropTypes.shape({})),\r\n styles: PropTypes.shape({}),\r\n};\r\n\r\nTargetOrBidSelector.defaultProps = {\r\n targets: null,\r\n negativeTargets: null,\r\n styles: {},\r\n};\r\n\r\nexport const ValidatedTargetOrBidSelector = withCustomValidation(TargetOrBidSelector);\r\n","import _, { size, chain, every, noop, get, isEmpty, sortBy } from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport React, { useEffect, useMemo } from 'react';\r\nimport { ValidationGroup, withCustomValidation, withError } from '@bingads-webui-react/validation';\r\nimport { ValidatedAudiencePicker } from '@bingads-webui-campaign-react/xandr-campaign';\r\nimport { AudienceTargetInfo } from '@bingads-webui-campaign/audience-target-info';\r\nimport { withBidAdjustment } from './with-bid-adjustment';\r\nimport { CampaignObjectiveType } from '../../../common/constants';\r\n\r\nconst ValidatedAudiencePickerWithAudienceInfo = (props) => {\r\n const {\r\n shouldHide, onAudienceTargetInfoChange, updateValidation, validationProps, isAudienceCreationWorkflow, campaignGoal, boostConversionBasedSegmentEnabled, hideCustomSegmentsOption, ...rest\r\n } = props;\r\n const { data: { audiences } } = validationProps;\r\n\r\n const currentLevelTargetInfo = useMemo(() => (\r\n new AudienceTargetInfo({\r\n resourceName: 'AdGroupCriterion',\r\n isForVNext: true,\r\n initAudienceAssociationView: false,\r\n })), []);\r\n\r\n const getAudienceTargetErrors = (audienceList) => {\r\n const errors = [];\r\n const customerMatchList = chain(audienceList)\r\n .filter(i => _.result(_.result(i, 'Criterion'), 'AudienceType') === 'CustomerList')\r\n .value();\r\n const excludeCustomerMatchList = _.filter(customerMatchList, i => i.Status === 'Excluded');\r\n const includeCustomerMatchList = _.filter(customerMatchList, i => i.Status === 'Active');\r\n\r\n if (campaignGoal === CampaignObjectiveType.Acquisition && boostConversionBasedSegmentEnabled &&\r\n size(excludeCustomerMatchList) === 0) {\r\n errors.push(_TL_('Need at least one exclusion customer match list when your campaign goal is Acquisition.'));\r\n }\r\n\r\n if (campaignGoal === CampaignObjectiveType.Engagement && boostConversionBasedSegmentEnabled &&\r\n size(includeCustomerMatchList) === 0) {\r\n errors.push(_TL_('Need at least one inclusion customer match list when your campaign goal is Engagement.'));\r\n }\r\n return errors;\r\n };\r\n\r\n const onChange = () => {\r\n const updatedItems = currentLevelTargetInfo.getSnapshot(false);\r\n const errors = getAudienceTargetErrors(updatedItems);\r\n updateValidation(errors, { audiences: [...updatedItems] });\r\n };\r\n\r\n const getPreExistingBids = (audience, currentTargets) => {\r\n const { Criterion = {} } = audience;\r\n\r\n if (Criterion.BidMultiplier > 0) {\r\n return Criterion.BidMultiplier;\r\n }\r\n\r\n const existingAudience = currentTargets.find(({ Criterion: criterion }) => (criterion.AudienceId === get(audience, 'Criterion.AudienceId')));\r\n\r\n if (existingAudience) {\r\n return {\r\n Id: existingAudience.Id,\r\n BidMultiplier: existingAudience.Criterion.BidMultiplier,\r\n };\r\n }\r\n\r\n return {\r\n BidMultiplier: Criterion.BidMultiplier,\r\n };\r\n };\r\n\r\n const onValidate = (result) => {\r\n const { data } = result;\r\n if (!isEmpty(data)) {\r\n const currentTargets = currentLevelTargetInfo.getSnapshot(false);\r\n // add the existing bids and Ids to audiences because ValidatedAudiencePicker removes it\r\n const hydratedAudiences = data.audiences.map((audience) => {\r\n const { Criterion = {} } = audience;\r\n const { Id, BidMultiplier } = getPreExistingBids(audience, currentTargets);\r\n\r\n const newAudience = {\r\n ...audience,\r\n Id,\r\n Criterion: {\r\n ...Criterion,\r\n BidMultiplier,\r\n },\r\n\r\n };\r\n\r\n return newAudience;\r\n });\r\n\r\n updateValidation(getAudienceTargetErrors(hydratedAudiences), { audiences: hydratedAudiences });\r\n }\r\n\r\n if (isAudienceCreationWorkflow && isEmpty(data)) {\r\n updateValidation(getAudienceTargetErrors([]), { audiences: [] });\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (onAudienceTargetInfoChange) {\r\n onAudienceTargetInfoChange(currentLevelTargetInfo);\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [currentLevelTargetInfo]);\r\n\r\n useEffect(() => {\r\n if (currentLevelTargetInfo && audiences) {\r\n currentLevelTargetInfo.off('AdGroupCriterionAudienceChanged', onChange);\r\n const currentTargets = currentLevelTargetInfo.getSnapshot(false);\r\n\r\n const isSame = every(audiences, audience => currentTargets.find(({ Criterion }) => (Criterion.AudienceId === get(audience, 'Criterion.AudienceId'))));\r\n\r\n if ((audiences.length !== currentTargets.length) || !isSame) {\r\n currentLevelTargetInfo.destroyTargetTypeAsync('Audience').then(() => {\r\n const sortedAudiences = sortBy(audiences, 'Status');\r\n sortedAudiences.forEach((audience) => {\r\n const { Criterion = {} } = audience;\r\n const newCriterion = {\r\n ...audience,\r\n Criterion: {\r\n ...Criterion,\r\n },\r\n };\r\n\r\n currentLevelTargetInfo.createAsync(newCriterion);\r\n });\r\n }).then(() => {\r\n currentLevelTargetInfo.on('AdGroupCriterionAudienceChanged', onChange);\r\n });\r\n } else {\r\n currentLevelTargetInfo.on('AdGroupCriterionAudienceChanged', onChange);\r\n }\r\n }\r\n\r\n return () => {\r\n currentLevelTargetInfo.off('AdGroupCriterionAudienceChanged', onChange);\r\n };\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [audiences]);\r\n\r\n if (shouldHide) {\r\n return null;\r\n }\r\n\r\n return (\r\n <>\r\n \r\n \r\n \r\n {InMarketAudienceRedesign && (\r\n currentDate) || isDefaultAdGroupStepModel)}\r\n hideCustomSegmentsOption={initialAdGroup === null || (initialAdGroup && initialAdGroup.StartDate > currentDate) || isDefaultAdGroupStepModel || isAdGroupEditFlow}\r\n validationProps={{\r\n data: {\r\n audiences,\r\n },\r\n }}\r\n showBidAdjustments={isAudienceAdGroupEdit(flow)}\r\n isIMARedesignEnabled={InMarketAudienceRedesign}\r\n boostConversionBasedSegmentEnabled={boostConversionBasedSegmentEnabled}\r\n />\r\n ) : ( currentDate) || isDefaultAdGroupStepModel}\r\n hideUseCampaignSetting={isAdScheduleCampaignToggleVisible}\r\n setAdScheduleViewCallback={setAdScheduleViewCallback}\r\n isDateSettingsDisplayed={isDateSettingsDisplayed}\r\n />\r\n : (\r\n \r\n {!optimizedTargetingEnabled ?\r\n i18n.getString(_TL_('Predictive targeting is automatically enabled. You can disable it by setting a targeting preference.'))\r\n : i18n.getString(_TL_('Turning off predictive targeting significantly limits our ability to help you reach the best audience for your campaign.'))\r\n }\r\n \r\n \r\n \r\n \r\n );\r\n\r\n return (\r\n <>\r\n (\r\n <>\r\n \r\n \r\n {i18n.getString(_TL_('Targeting preferences (optional)'))}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n />\r\n \r\n );\r\n};\r\n\r\nTargetingPreferencesInternal.propTypes = {\r\n data: PropTypes.shape({\r\n locationTargets: PropTypes.shape({}),\r\n adGroup: PropTypes.shape({\r\n locationTargets: PropTypes.shape({}),\r\n deviceTypes: PropTypes.shape({}),\r\n }),\r\n errors: PropTypes.arrayOf(PropTypes.shape({\r\n message: PropTypes.string,\r\n property: PropTypes.string,\r\n code: PropTypes.string,\r\n })),\r\n }).isRequired,\r\n onDataChange: PropTypes.func.isRequired,\r\n error: PropTypes.arrayOf(PropTypes.shape({\r\n message: PropTypes.string,\r\n property: PropTypes.string,\r\n code: PropTypes.string,\r\n })).isRequired,\r\n isDateSettingsDisplayed: PropTypes.bool,\r\n};\r\n\r\nTargetingPreferencesInternal.defaultProps = {\r\n isDateSettingsDisplayed: true,\r\n};\r\n\r\nexport const TargetingPreferences = TargetingPreferencesInternal;\r\n","export const ERROR_ENTITY = {\r\n Campaign: 'campaign',\r\n AdGroup: 'adGroup',\r\n AssetGroup: 'assetGroup',\r\n Ad: 'ad',\r\n CampaignLocation: 'campaignLocation',\r\n CampaignRadius: 'campaignRadius',\r\n CampaignNegativeLocation: 'campaignNegativeLocation',\r\n CampaignLocationIntent: 'campaignLocationIntent',\r\n CampaignDayTimeCriterion: 'campaignDayTimeCriterion',\r\n CampaignNegativeWebpage: 'campaignNegativeWebpage',\r\n AdGroupLocation: 'adGroupLocation',\r\n AdGroupRadius: 'adGroupRadius',\r\n AdGroupNegativeLocation: 'adGroupNegativeLocation',\r\n AdGroupLocationIntent: 'adGroupLocationIntent',\r\n AdGroupDayTimeCriterion: 'adGroupDayTimeCriterion',\r\n AdGroupNegativeWebpage: 'adGroupNegativeWebpage',\r\n AdGroupLocationTargetError: 'AdGroup Location Criterion Error',\r\n};\r\n","import { CustomValidatedDefaultBid } from '@bingads-webui-campaign-react/default-bid';\r\nimport { Alert } from '@bingads-webui-react/alert';\r\nimport PropTypes from 'prop-types';\r\nimport React, { useCallback, useMemo, useState } from 'react';\r\nimport { getBidRecommendationsRange } from './bid-recommendations-data';\r\n\r\n// Component to display bid recommendation message\r\nconst BidRecommendationInfo = ({ bidRecommendationRange, validationResult, i18n, isEdit }) => {\r\n const { isValidated, isValid } = validationResult;\r\n if (!isValidated || isValid || !bidRecommendationRange) {\r\n return null;\r\n }\r\n\r\n const { currencyCode } = bidRecommendationRange;\r\n const messageData = {\r\n bidFloor: i18n.formatCurrency(bidRecommendationRange.bidFloor, currencyCode),\r\n bidRecommendation: i18n.formatCurrency(bidRecommendationRange.bidRecommendation, currencyCode),\r\n bidCeil: i18n.formatCurrency(bidRecommendationRange.bidCeil, currencyCode),\r\n };\r\n\r\n const message = isEdit ?\r\n i18n.getString(_TL_('Use the recommended bid of {{bidRecommendation}} to improve ad delivery. A typical range for similar campaigns is between {{bidFloor}} and {{bidCeil}}'), messageData) :\r\n i18n.getString(_TL_('A typical range for similar campaigns is between {{bidFloor}} and {{bidCeil}}'), messageData);\r\n\r\n return (\r\n \r\n onChangeTextAssetFormattingSection(assetName.longHeadline)\r\n }\r\n />\r\n ),\r\n [\r\n i18n,\r\n classes.hide,\r\n disableCopilot,\r\n onResetTextAssets,\r\n longHeadlineValidations,\r\n fetchRecommendationAssets,\r\n setAddNewLongHeadlinesCallback,\r\n onChangeTextAssetFormattingSection,\r\n cancelFetchRecommendationAssetsJob,\r\n ]\r\n );\r\n\r\n const shortHeadlineAssetCollection = useMemo(\r\n () => (\r\n \r\n onChangeTextAssetFormattingSection(assetName.shortHeadline)\r\n }\r\n />\r\n ),\r\n [\r\n i18n,\r\n classes.hide,\r\n disableCopilot,\r\n onResetTextAssets,\r\n shortHeadlineValidations,\r\n fetchRecommendationAssets,\r\n setAddNewShortHeadlinesCallback,\r\n onChangeTextAssetFormattingSection,\r\n cancelFetchRecommendationAssetsJob,\r\n ]\r\n );\r\n\r\n const descriptionAssetCollection = useMemo(\r\n () => (\r\n \r\n onChangeTextAssetFormattingSection(assetName.description)\r\n }\r\n />\r\n ),\r\n [\r\n i18n,\r\n classes.hide,\r\n disableCopilot,\r\n onResetTextAssets,\r\n descriptionValidations,\r\n fetchRecommendationAssets,\r\n setAddNewDescriptionCallback,\r\n onChangeTextAssetFormattingSection,\r\n cancelFetchRecommendationAssetsJob,\r\n ]\r\n );\r\n\r\n return (\r\n \r\n \r\n {shortHeadlineValidations.display &&
\r\n \r\n );\r\n};\r\n\r\nTextAssetCollectionWithCoPilotInternal.propTypes = {\r\n i18n: PropTypes.shape({ getString: func, getLocale: func }).isRequired,\r\n fetchRecommendationAssets: PropTypes.func.isRequired,\r\n shortHeadlineValidations: PropTypes.shape({\r\n display: PropTypes.bool,\r\n placeholder: PropTypes.string,\r\n minLength: PropTypes.number,\r\n maxLength: PropTypes.number,\r\n isMultipleOptions: PropTypes.bool,\r\n }),\r\n longHeadlineValidations: PropTypes.shape({\r\n display: PropTypes.bool,\r\n placeholder: PropTypes.string,\r\n minLength: PropTypes.number,\r\n maxLength: PropTypes.number,\r\n isMultipleOptions: PropTypes.bool,\r\n }),\r\n descriptionValidations: PropTypes.shape({\r\n display: PropTypes.bool,\r\n placeholder: PropTypes.string,\r\n minLength: PropTypes.number,\r\n maxLength: PropTypes.number,\r\n isMultipleOptions: PropTypes.bool,\r\n }),\r\n onResetTextAssets: PropTypes.func.isRequired,\r\n disableCopilot: PropTypes.bool.isRequired,\r\n cancelFetchRecommendationAssetsJob: PropTypes.func.isRequired,\r\n setAddNewLongHeadlinesCallback: PropTypes.func.isRequired,\r\n setAddNewDescriptionCallback: PropTypes.func.isRequired,\r\n setAddNewShortHeadlinesCallback: PropTypes.func.isRequired,\r\n onChangeTextAssetFormattingSection: PropTypes.func.isRequired,\r\n};\r\n\r\nTextAssetCollectionWithCoPilotInternal.defaultProps = {\r\n shortHeadlineValidations: {\r\n placeholder: '',\r\n minLength: 0,\r\n maxLength: 30,\r\n display: true,\r\n isMultipleOptions: false,\r\n },\r\n longHeadlineValidations: {\r\n placeholder: '',\r\n minLength: 0,\r\n maxLength: 90,\r\n display: true,\r\n isMultipleOptions: false,\r\n },\r\n descriptionValidations: {\r\n placeholder: '',\r\n minLength: 0,\r\n maxLength: 90,\r\n display: true,\r\n isMultipleOptions: false,\r\n },\r\n};\r\n\r\nexport const TextAssetCollectionWithCoPilot = TextAssetCollectionWithCoPilotInternal;\r\n","/* istanbul ignore file */\r\nimport React, { useMemo } from 'react';\r\nimport PropTypes, { func } from 'prop-types';\r\nimport { debounce } from 'underscore';\r\nimport { mergeClasses } from '@fluentui/react-components';\r\nimport { ValidationGroup } from '@bingads-webui-react/validation';\r\nimport { AssetGroup } from '@bingads-webui/campaign-odata-schemas';\r\nimport { CopilotRepositoryProvider } from '@bingads-webui/inline-copilot';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nimport { getStyles, useDefaultContainerStyles } from './styles';\r\nimport { TextAssetCollectionWithCoPilot } from './components';\r\n\r\nexport const TextAssetCollectionWithRecommendations = (props) => {\r\n const {\r\n url,\r\n i18n,\r\n campaignId,\r\n serverContext,\r\n shortHeadline,\r\n longHeadline,\r\n description,\r\n onChangeTexts,\r\n shortHeadlineValidations,\r\n longHeadlineValidations,\r\n descriptionValidations,\r\n } = props;\r\n const classes = useDefaultContainerStyles();\r\n const helpButtonStyles = useDefaultStyles(getStyles);\r\n const { CurrentLocale: locale } = serverContext;\r\n\r\n const updatedDescriptionSchema = useMemo(() => Object.keys(AssetGroup.properties.Descriptions.schema.properties).reduce((acc, key) => {\r\n const value = AssetGroup.properties.Descriptions.schema.properties[key];\r\n if (key.includes('Description')) {\r\n const updatedValue = {\r\n ...value,\r\n minLength: descriptionValidations.minLength || 0,\r\n maxLength: descriptionValidations.maxLength,\r\n };\r\n return {\r\n ...acc,\r\n [key]: updatedValue,\r\n };\r\n }\r\n return {\r\n ...acc,\r\n [key]: value,\r\n };\r\n }, {}), [descriptionValidations.maxLength, descriptionValidations.minLength]);\r\n\r\n const updatedHeadlineSchema = useMemo(() => Object.keys(AssetGroup.properties.Headlines.schema.properties).reduce((acc, key) => {\r\n const value = AssetGroup.properties.Headlines.schema.properties[key];\r\n if (key.includes('Headline')) {\r\n const updatedValue = {\r\n ...value,\r\n minLength: shortHeadlineValidations.minLength || 0,\r\n maxLength: shortHeadlineValidations.maxLength,\r\n };\r\n return {\r\n ...acc,\r\n [key]: updatedValue,\r\n };\r\n }\r\n return {\r\n ...acc,\r\n [key]: value,\r\n };\r\n }, {}), [shortHeadlineValidations.maxLength, shortHeadlineValidations.minLength]);\r\n\r\n const updatedLongHeadlineSchema = useMemo(() => Object.keys(AssetGroup.properties.LongHeadlines.schema.properties).reduce((acc, key) => {\r\n const value = AssetGroup.properties.LongHeadlines.schema.properties[key];\r\n if (key.includes('LongHeadline')) {\r\n const updatedValue = {\r\n ...value,\r\n minLength: longHeadlineValidations.minLength || 0,\r\n maxLength: longHeadlineValidations.maxLength,\r\n };\r\n return {\r\n ...acc,\r\n [key]: updatedValue,\r\n };\r\n }\r\n return {\r\n ...acc,\r\n [key]: value,\r\n };\r\n }, {}), [longHeadlineValidations.maxLength, longHeadlineValidations.minLength]);\r\n\r\n const updatedAssetGroup = useMemo(\r\n () => ({\r\n ...AssetGroup,\r\n properties: {\r\n ...AssetGroup.properties,\r\n Description: {\r\n ...AssetGroup.properties.Description,\r\n maxLength: descriptionValidations.maxLength,\r\n },\r\n Descriptions: {\r\n ...AssetGroup.properties.Descriptions,\r\n schema: {\r\n ...AssetGroup.properties.Descriptions.schema,\r\n properties: {\r\n ...AssetGroup.properties.Descriptions.schema.properties,\r\n ...updatedDescriptionSchema,\r\n },\r\n },\r\n },\r\n Headline: {\r\n ...AssetGroup.properties.Headline,\r\n maxLength: shortHeadlineValidations.maxLength,\r\n },\r\n Headlines: {\r\n ...AssetGroup.properties.Headlines,\r\n schema: {\r\n ...AssetGroup.properties.Headlines.schema,\r\n properties: {\r\n ...AssetGroup.properties.Headlines.schema.properties,\r\n ...updatedHeadlineSchema,\r\n },\r\n },\r\n },\r\n LongHeadline: {\r\n ...AssetGroup.properties.LongHeadline,\r\n maxLength: longHeadlineValidations.maxLength,\r\n },\r\n LongHeadlines: {\r\n ...AssetGroup.properties.LongHeadlines,\r\n schema: {\r\n ...AssetGroup.properties.LongHeadlines.schema,\r\n properties: {\r\n ...AssetGroup.properties.LongHeadlines.schema.properties,\r\n ...updatedLongHeadlineSchema,\r\n },\r\n },\r\n },\r\n },\r\n }),\r\n [\r\n shortHeadlineValidations.maxLength,\r\n descriptionValidations.maxLength,\r\n longHeadlineValidations.maxLength,\r\n updatedHeadlineSchema,\r\n updatedDescriptionSchema,\r\n updatedLongHeadlineSchema,\r\n ]\r\n );\r\n\r\n const onChangeTextsDebounced = useMemo(() => debounce(\r\n textAssets => onChangeTexts(textAssets),\r\n 1000\r\n ), [onChangeTexts]);\r\n\r\n const handleValidate = ({\r\n data,\r\n isDirty,\r\n isValid,\r\n messages,\r\n }) => {\r\n const {\r\n Headlines,\r\n IsOptional,\r\n Descriptions,\r\n LongHeadlines,\r\n } = data;\r\n const updatedTextAssets = {\r\n isOptional: IsOptional,\r\n isDirty,\r\n isValid,\r\n messages,\r\n };\r\n const newShortHeadline = Headlines ? Headlines.Headline0 || '' : '';\r\n if (!shortHeadlineValidations.isMultipleOptions &&\r\n shortHeadline !== newShortHeadline) {\r\n updatedTextAssets.shortHeadline = newShortHeadline;\r\n }\r\n\r\n const newLongHeadline = LongHeadlines ? LongHeadlines.LongHeadline0 || '' : '';\r\n if (!longHeadlineValidations.isMultipleOptions &&\r\n longHeadline !== newLongHeadline) {\r\n updatedTextAssets.longHeadline = newLongHeadline;\r\n }\r\n\r\n const newDescription = Descriptions ? Descriptions.Description0 || '' : '';\r\n if (!descriptionValidations.isMultipleOptions\r\n && description !== newDescription) {\r\n updatedTextAssets.description = newDescription;\r\n }\r\n\r\n onChangeTextsDebounced(updatedTextAssets);\r\n };\r\n\r\n const handleReset = (key) => {\r\n const updatedTextAssets = {\r\n ...(key === 'shortHeadline' ? { shortHeadline: '' } : {}),\r\n ...(key === 'description' ? { description: '' } : {}),\r\n ...(key === 'longHeadline' ? { longHeadline: '' } : {}),\r\n };\r\n onChangeTexts(updatedTextAssets);\r\n };\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nBidAdjustmentInternal.propTypes = {\r\n data: PropTypes.shape({\r\n adGroup: PropTypes.shape({\r\n ageRanges: PropTypes.arrayOf(PropTypes.string).isRequired,\r\n initialAgeRanges: PropTypes.arrayOf(PropTypes.shape({\r\n criterion: PropTypes.string.isRequired,\r\n bidAdjustment: PropTypes.number.isRequired,\r\n })).isRequired,\r\n deviceTargetingCampaignLevel: PropTypes.bool.isRequired,\r\n }).isRequired,\r\n campaign: PropTypes.shape({}).isRequired,\r\n }).isRequired,\r\n updateValidation: PropTypes.func.isRequired,\r\n criterionType: PropTypes.string.isRequired,\r\n isAudienceEdit: PropTypes.bool,\r\n};\r\n\r\nexport const ValidatedBidAdjustment = withCustomValidation(BidAdjustmentInternal);\r\n","import React, { useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Switch } from '@fluentui/react-components';\r\nimport { withValidation, AdapterFactory } from '@bingads-webui-react/validation';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\n\r\nconst CustomAdapter = AdapterFactory({\r\n defaultValue: false,\r\n valueToInject: 'checked',\r\n functionToInject: 'onChange',\r\n convertEventToValue: event => event.target.checked,\r\n});\r\n\r\nconst SwitchInternal = ({\r\n checked,\r\n onChange,\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n\r\n return (\r\n \r\n
\r\n setBidAdjustmentRef(newRef)} />\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n ) : (\r\n {adGroupTargetingSections()}\r\n
\r\n \r\n
);\r\n};\r\n\r\nBidRecommendationInfo.propTypes = {\r\n bidRecommendationRange: PropTypes.shape({\r\n bidFloor: PropTypes.number,\r\n bidRecommendation: PropTypes.number,\r\n bidCeil: PropTypes.number,\r\n currencyCode: PropTypes.string,\r\n }),\r\n validationResult: PropTypes.shape({\r\n isValidated: PropTypes.bool,\r\n isValid: PropTypes.bool,\r\n }).isRequired,\r\n isEdit: PropTypes.bool.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n formatCurrency: PropTypes.func,\r\n }).isRequired,\r\n};\r\nBidRecommendationInfo.defaultProps = {\r\n bidRecommendationRange: null,\r\n};\r\n\r\nexport const useCampaignBidTypeInfo = (campaign, currencyCode) => {\r\n const campaignType = campaign && campaign.CampaignType;\r\n const campaignSubType = campaign && campaign.CampaignSubType;\r\n const biddingSchemeType = campaign && campaign.BiddingScheme && campaign.BiddingScheme.Type;\r\n\r\n return useMemo(() => ({\r\n campaignType,\r\n campaignSubType,\r\n biddingSchemeType,\r\n currencyCode,\r\n }), [campaignType, campaignSubType, biddingSchemeType, currencyCode]);\r\n};\r\n\r\n// Hook to get the BidRecommendationRange data & a validator function\r\nexport const useBidRecommendation = (campaignBidTypeInfo) => {\r\n const bidRecommendationRange = useMemo(() => getBidRecommendationsRange(campaignBidTypeInfo), [campaignBidTypeInfo]);\r\n const checkIsBidInRecommendedRange = useCallback((bidValue) => {\r\n if (!bidRecommendationRange || !bidValue) { // Unknown range should show no message\r\n return { isValidated: false, isValid: false };\r\n }\r\n\r\n const isValid = bidValue >= bidRecommendationRange.bidFloor;\r\n return {\r\n isValidated: true,\r\n isValid,\r\n };\r\n }, [bidRecommendationRange]);\r\n\r\n return [bidRecommendationRange, checkIsBidInRecommendedRange];\r\n};\r\n\r\n/*\r\n * HOC to wrap a component with BidRecommendation data & message banner\r\n */\r\nexport const withBidRecommendation = (Component) => {\r\n const BidRecommendationWrappedComponent = (props) => {\r\n const { campaignBidTypeInfo, i18n, isEdit, ...rest } = props;\r\n\r\n /**\r\n * Lookup the bidRecommendationRange\r\n */\r\n const [bidRecommendationRange, checkIsBidInRecommendedRange] = useBidRecommendation(campaignBidTypeInfo);\r\n const [validationResult, setValidationResult] = useState({ isValidated: false, isValid: false });\r\n\r\n /**\r\n * Callback to listen to bid value changes\r\n */\r\n const onBidChange = useCallback((nextValue) => {\r\n const nextValidationResult = checkIsBidInRecommendedRange(nextValue);\r\n setValidationResult(nextValidationResult);\r\n }, [checkIsBidInRecommendedRange]);\r\n\r\n // NOTE: do NOT set `validationProps.data` here - it gets out of sync with the actual viewModel being used to save.\r\n\r\n return (\r\n <>\r\n \r\n \r\n \r\n {\r\n (BiddingScheme.Type !== 'ManualCpm') ?\r\n
\r\n );\r\n};\r\n","import React, { useContext } from 'react';\r\nimport _ from 'underscore';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport { ValidationGroup } from '@bingads-webui-react/validation';\r\nimport { ValidatedFrequencyCapping, adGroupBidProp, getNetflixFrequencyCapping } from '@bingads-webui-campaign-react/xandr-campaign';\r\nimport { isXandrDisplayAdsCampaign } from '@bingads-webui-campaign-react/constants';\r\nimport { getConvertedCurrencyDealMinimumBid, getAccountExchangeRateFromLocalStorage } from '@bingads-webui-campaign-react/xandr-video-campaign-shared-components';\r\nimport { AdGroup } from '@bingads-webui/campaign-odata-schemas';\r\nimport { Label } from '@fluentui/react';\r\nimport { HelpPopup } from '@bingads-webui-react/help-popup';\r\nimport { getBidTitleDetails } from '@bingads-webui-campaign-react/wizard-shared-components';\r\nimport { CustomValidatedDefaultBid } from '@bingads-webui-campaign-react/default-bid';\r\n\r\nexport const XandrBidValue = ({\r\n data,\r\n onDataChange,\r\n legacyI18n,\r\n isPremiumStreaming,\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n\r\n const serverContext = useContext(ServerContext);\r\n const { campaign, adGroup } = data || {};\r\n const { deal } = adGroup || {};\r\n const isDealTypeRestricted = deal && _.isEqual('Restricted', deal.Type);\r\n const shouldUsePredefinedFrequencyLimit = isDealTypeRestricted;\r\n\r\n const { CampaignSubType, BiddingScheme } = campaign || {};\r\n\r\n const bidType = (BiddingScheme && BiddingScheme.Type === 'ManualCpm') ? 'CpmBid' : 'CpvBid';\r\n\r\n let bidRange = bidType === 'CpmBid' ? serverContext.VideoViewsCPMBidRange : serverContext.VideoViewsCPVBidRange;\r\n\r\n let dealMinimumBid = 0;\r\n if (deal) {\r\n const exchangeRateMapping = getAccountExchangeRateFromLocalStorage(serverContext);\r\n dealMinimumBid = getConvertedCurrencyDealMinimumBid(deal.MinimumBid, deal.Currency, serverContext.CurrentAccount.CurrencyCode, exchangeRateMapping.val);\r\n }\r\n\r\n if (isXandrDisplayAdsCampaign(CampaignSubType)) {\r\n bidRange = serverContext.KeywordCPMBidRange;\r\n }\r\n\r\n const onAdGroupValidate = (result) => {\r\n if (adGroup) {\r\n onDataChange({\r\n data: {\r\n ...data,\r\n adGroup: {\r\n ...data.adGroup,\r\n ...result.data,\r\n },\r\n },\r\n isValid: result.isValid,\r\n });\r\n }\r\n };\r\n\r\n const bidValidationProps = {\r\n field: bidType,\r\n schema: {\r\n properties: {\r\n [bidType]: {\r\n type: 'number',\r\n minimum: deal ? Math.max(dealMinimumBid, bidRange.FloorValue) : bidRange.FloorValue,\r\n maximum: deal ? null : bidRange.CeilingValue,\r\n required: true,\r\n },\r\n },\r\n },\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n","import React, { useState, useCallback, useContext, useMemo, useEffect } from 'react';\r\nimport _ from 'underscore';\r\nimport classNames from 'classnames';\r\nimport PropTypes from 'prop-types';\r\nimport { AdGroup } from '@bingads-webui/campaign-odata-schemas';\r\nimport { Stack } from '@fluentui/react';\r\nimport { MessageBar, MessageBarBody } from '@fluentui/react-message-bar';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { getLocationTargetTitleDetails, getAdScheduleDetails } from '@bingads-webui-campaign-react/wizard-shared-components';\r\nimport { collapseExpander, Collapse, TextTitle, useCollapseState, ValidatedFixedPanel, ValidatedPanel } from '@bingads-webui-campaign/wizard-jumbo-card';\r\nimport { RemainingCharsValidatedTextField } from '@bingads-webui-campaign-react/remaining-chars-hint';\r\nimport { ValidationGroup } from '@bingads-webui-react/validation';\r\nimport {\r\n FormErrorGroup,\r\n entityIs,\r\n anyComp,\r\n} from '@bingads-webui-campaign-react/form-error';\r\nimport { SEARCH_TYPE } from '@bingads-webui-react/bing-maps';\r\nimport { ValidatedLocationTargetSetting, useIsMounted } from '@bingads-webui-campaign-react/step-wizard-controls';\r\nimport { buildLegacyI18n } from '@bingads-webui/build-legacy-i18n';\r\nimport { ValidationStringMap } from '@bingads-webui/validation-string-map';\r\nimport { AttentionBeaconGroup } from '@bingads-webui-campaign-react/attention-beacon';\r\nimport { ActuationGroup } from '@bingads-webui-campaign-react/actuator';\r\nimport {\r\n AgeRange,\r\n Gender,\r\n formatAgeRanges,\r\n formatGenders,\r\n adGroupNameProp,\r\n ReachEstimate,\r\n NetflixTCAgreement,\r\n ValidatedGenreTargets,\r\n formatGenreTargets,\r\n getGenreOptions,\r\n getDealGenreOptions,\r\n DealImpressionPanel,\r\n} from '@bingads-webui-campaign-react/xandr-campaign';\r\nimport { withScope } from '@bingads-webui-react/scope-service';\r\nimport { useDefaultStyles, withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { useFormService } from '@bingads-webui-react/form';\r\nimport {\r\n withControlErrorHandling,\r\n withUnvalidatedControlErrors,\r\n} from '@bingads-webui-campaign-react/error-handling';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport { useWizardService, matchStepState, STEP_STATES } from '@bingads-webui-react/wizard';\r\nimport { ValidatedBoostPlacementTarget, placementTargetingDetails, contextualTargetDetails } from '@bingads-webui-campaign-react/boost-placement-target';\r\nimport { ValidatedContextualTarget } from '@bingads-webui-campaign-react/boost-contextual-target';\r\nimport { ActivityContext } from '@bingads-webui-react/hoc-with-signal';\r\nimport { Alert } from '@bingads-webui-react/alert';\r\nimport { isXandrCampaign, campaignShouldServeOnMSAN } from '@bingads-webui-campaign-react/constants';\r\nimport { ValidatedLegacyDateSetting, getDateSettingDetails } from '@bingads-webui-campaign/date-setting';\r\nimport { TargetingEstimation } from './components/targeting-estimation';\r\nimport { StepHeader } from '../../shared/step-header';\r\nimport { PredictiveTargetingHeader } from './components/predictive-targeting';\r\nimport { TargetingPreferences } from './components/targeting-preferences';\r\nimport { ValidatedBidAdjustment } from './components/audience-bid-adjustment';\r\nimport { SectionShimmer } from '../../shared/section-shimmer';\r\nimport { getAdGroupPanels } from '../../step-utils';\r\nimport { ERROR_ENTITY } from '../../common/error-entities';\r\nimport locationTargetIcon from '../../media/location-target.svg';\r\nimport genderTarget from '../../media/gender-target.svg';\r\nimport ageTarget from '../../media/age-target.svg';\r\nimport bidValueIcon from '../../media/bid-value.svg';\r\nimport placementTargetIcon from '../../media/placement-target.svg';\r\nimport contextualTargetIcon from '../../media/contextual-target.svg';\r\nimport adScheduleIcon from '../../media/ad-schedule.svg';\r\nimport startDateEndDateIcon from '../../media/start-date-end-date.svg';\r\nimport { getAdGroupStyles } from './adgroup-styles';\r\nimport {\r\n FLOWS,\r\n isAudienceAdGroupCreation,\r\n isAudienceAdGroupEdit as isAudienceAdGroupEditFlow,\r\n isAudience as isAudienceFlow,\r\n isEdit as isEditFlow,\r\n isCTVCampaign,\r\n isDealCampaign,\r\n} from '../../step-constants';\r\nimport { getContextualTargetStyles } from '../../shared/styles/contextual-target-styles';\r\nimport { formatReachEstimateData, getTargetSettingsFromCriterions } from './utils';\r\nimport { XandrBidValue, AudienceBidValue } from '../../shared/components';\r\nimport { AdSchedule } from './components';\r\n\r\nconst adGroupLocationCriterions = anyComp(\r\n entityIs(ERROR_ENTITY.AdGroupLocation),\r\n entityIs(ERROR_ENTITY.AdGroupRadius),\r\n entityIs(ERROR_ENTITY.AdGroupNegativeLocation),\r\n entityIs(ERROR_ENTITY.AdGroupLocationIntent),\r\n entityIs(ERROR_ENTITY.AdGroupLocationTargetError)\r\n);\r\n\r\nconst getPanelErrorProps = ({ needsAttention }) => (needsAttention ? {\r\n error: _TL_(\"* Something's wrong\"),\r\n} : {});\r\n\r\nconst ServerValidatedLocationTargetSetting = withControlErrorHandling(withUnvalidatedControlErrors(\r\n ValidatedLocationTargetSetting,\r\n { filter: adGroupLocationCriterions }\r\n));\r\n\r\nconst ContextualTargetWithStyle = withDefaultStyles(ValidatedContextualTarget, getContextualTargetStyles);\r\nexport const AdGroupStepShellInternal = ({\r\n data,\r\n onDataChange: onDataChangeProp,\r\n scope,\r\n error,\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n\r\n const isMounted = useIsMounted();\r\n\r\n const onDataChange = useCallback((...args) => {\r\n if (!isMounted.current) return;\r\n onDataChangeProp(...args);\r\n }, [isMounted, onDataChangeProp]);\r\n\r\n const serverContext = useContext(ServerContext);\r\n const classes = useDefaultStyles(getAdGroupStyles);\r\n\r\n const activity = useContext(ActivityContext);\r\n\r\n const { state } = useWizardService();\r\n\r\n const currentStates = state.toStrings()[1];\r\n\r\n const { flow, isDefaultAdGroupStepModel, adGroup: initialAdGroup } = state.context.wizardData;\r\n\r\n const { state: { context: { saveFailed: showAllValidationErrors } } } = useFormService();\r\n\r\n const {\r\n adGroup, bundleCountries, bundleLocationCriterions, campaign,\r\n } = data || {};\r\n\r\n const {\r\n CampaignSubType,\r\n CampaignSettings,\r\n } = campaign || {};\r\n\r\n const {\r\n locationTargets,\r\n ageRanges,\r\n genderTypes,\r\n BoostAdunitIds,\r\n BoostPublisherIds,\r\n BoostAccountIds,\r\n BoostTriggerIds,\r\n contextualTargets,\r\n genreTargets,\r\n deal,\r\n locationRestricted,\r\n } = adGroup || {};\r\n\r\n const [adScheduleView, setAdScheduleView] = useState(null);\r\n const setAdScheduleViewCallback = useCallback((view) => {\r\n setAdScheduleView(view);\r\n }, []);\r\n\r\n const legacyI18n = useMemo(() => buildLegacyI18n(i18n, [ValidationStringMap]), [i18n]);\r\n\r\n const { basicOptions } = useMemo(() => getAdGroupPanels(flow, serverContext), [flow, serverContext]);\r\n\r\n const [\r\n allAdGroupSettingsSections,\r\n adGroupSettingsExpandedSections,\r\n setAdGroupSettingsExpandedSections,\r\n ] = useCollapseState(\r\n basicOptions /* all sections */,\r\n ['ad-group-name', 'predictive-targeting'] /* initially expanded sections */\r\n );\r\n const {\r\n DynamicPermissions: {\r\n XandrNegativeTarget,\r\n AgeGenderDisclaimer,\r\n PTPerfEstimationUIUpdate,\r\n CampaignCreationPlannerIntegration,\r\n CampaignCreationPlannerIntegrationMultiAd,\r\n InMarketAudienceRedesign,\r\n CampaignLifetimeBudget,\r\n AudienceUsePrivacyCheckV2,\r\n },\r\n CurrentCustomer: {\r\n Id: cid,\r\n },\r\n CurrentAccount: {\r\n Id: aid,\r\n },\r\n NetflixEnabledCountryCodes = 'GB',\r\n } = serverContext;\r\n\r\n const useCampaignLevelDates = data?.campaign?.UseCampaignLevelDates;\r\n const startDate = useCampaignLevelDates ? data?.campaign?.StartDate : data?.adGroup?.StartDate;\r\n const endDate = useCampaignLevelDates ? data?.campaign?.EndDate : data?.adGroup?.EndDate;\r\n\r\n const allBasicExpand = useMemo(\r\n () => collapseExpander({ setActiveKeys: setAdGroupSettingsExpandedSections }),\r\n [setAdGroupSettingsExpandedSections]\r\n );\r\n\r\n const shouldServeOnMSAN = campaignShouldServeOnMSAN(CampaignSettings);\r\n const isXandrServing = isXandrCampaign(CampaignSubType) && !shouldServeOnMSAN;\r\n\r\n const isAudienceAdGroupCreate = useMemo(() => isAudienceAdGroupCreation(flow), [flow]);\r\n const isAudienceAdGroupEdit = useMemo(() => isAudienceAdGroupEditFlow(flow), [flow]);\r\n const isAudience = useMemo(() => isAudienceFlow(flow), [flow]);\r\n const isEdit = useMemo(() => isEditFlow(flow), [flow]);\r\n const isCTVFlow = useMemo(() => isCTVCampaign(flow), [flow]);\r\n const isDealFlow = useMemo(() => isDealCampaign(flow), [flow]);\r\n const isCTVOrDeal = isCTVFlow || isDealFlow;\r\n\r\n const isDealTypeRestricted = deal && _.isEqual('Restricted', deal.Type);\r\n const shouldShowDealLocationTarget = (deal && !locationRestricted) || !isDealTypeRestricted;\r\n const hideLocationTarget = isDealFlow ? !shouldShowDealLocationTarget : false;\r\n const hideGenreTarget = isDealFlow ? !(deal && deal.Genre) : false;\r\n const genreOptions = useMemo(() => _.sortBy(isDealFlow ? getDealGenreOptions(i18n) : getGenreOptions(i18n), 'name'), [i18n, isDealFlow]);\r\n const dealCountryCode = deal && deal.TwoLetterCountryCode;\r\n const dealSupportedLocationType = deal && deal.SupportedLocationType;\r\n\r\n const errors = useMemo(() => {\r\n if (error && _.isArray(error)) {\r\n return error;\r\n } else if (data && data.errors && data.errors.length > 0) {\r\n return data.errors;\r\n }\r\n return [];\r\n }, [data, error]);\r\n\r\n const showAllValidationErrorsMemo = useMemo(() => showAllValidationErrors || (data && data.errors && data.errors.length > 0), [showAllValidationErrors, data]);\r\n\r\n const BidValue = isXandrServing ? XandrBidValue : AudienceBidValue;\r\n\r\n const onValidate = (result) => {\r\n if (data && data.adGroup) {\r\n const updatedData = {\r\n data: {\r\n ...data,\r\n adGroup: {\r\n ...data.adGroup,\r\n ...result.data,\r\n },\r\n },\r\n isValid: result.isValid,\r\n };\r\n\r\n let targetSetting = null;\r\n\r\n if (isAudience) {\r\n targetSetting = getTargetSettingsFromCriterions(updatedData.data.adGroup, isAudienceAdGroupEdit);\r\n updatedData.data.adGroup.TargetSetting = targetSetting;\r\n }\r\n onDataChange(updatedData);\r\n }\r\n };\r\n\r\n const isValidTargets = useMemo(() => {\r\n if (data && data.adGroup) {\r\n if (PTPerfEstimationUIUpdate ||\r\n data.adGroup.UseOptimizedTargeting === false\r\n ) {\r\n return true;\r\n }\r\n }\r\n return false;\r\n }, [PTPerfEstimationUIUpdate, data]);\r\n\r\n const NetflixEnabledCountryCodesArr = useMemo(() => NetflixEnabledCountryCodes.split(','), [NetflixEnabledCountryCodes]);\r\n const BundleCountriesCodesArr = useMemo(() => (bundleLocationCriterions && bundleLocationCriterions.map(c => c && c.Criterion && c.Criterion.LocationCriterion && c.Criterion.LocationCriterion.CountryCode)) || [], [bundleLocationCriterions]);\r\n\r\n const expiredAdGroupError = _.filter(error, err => err.code === 'CampaignServiceCannotUpdateAdGroupInExpiredState');\r\n const bidAmountsLessThanFloorPriceAdGroupError = _.filter(error, err => err.code === 'CampaignServiceBidAmountsLessThanFloorPrice');\r\n\r\n const shouldShowNetflixTC = useMemo(() =>\r\n isCTVFlow &&\r\n locationTargets &&\r\n (\r\n locationTargets.currentLevelSettings.targetOption === 'everywhere' ||\r\n (\r\n locationTargets.currentLevelSettings.targetOption === 'bundle'\r\n && BundleCountriesCodesArr.some(bundleCountry => NetflixEnabledCountryCodesArr.indexOf(bundleCountry) >= 0)\r\n ) ||\r\n (\r\n locationTargets.currentLevelSettings.targetOption === 'specific' &&\r\n _.some(\r\n locationTargets.currentLevelSettings.currentLocations,\r\n location => location.SelectionStatus === 'Included'\r\n && location.Criterion.LocationCriterion\r\n && NetflixEnabledCountryCodesArr.indexOf(location.Criterion.LocationCriterion.CountryCode) >= 0\r\n )\r\n )\r\n ), [isCTVFlow, locationTargets, NetflixEnabledCountryCodesArr, BundleCountriesCodesArr]);\r\n\r\n useEffect(() => {\r\n if (activity && matchStepState(state, STEP_STATES.LOADING)) {\r\n activity.signal(`onAdGroupStepLoading - ${currentStates}`);\r\n }\r\n\r\n if (activity && matchStepState(state, STEP_STATES.SAVING)) {\r\n activity.signal(`onAdGroupStepSaving - ${currentStates}`);\r\n }\r\n }, [activity, currentStates, state]);\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nAdGroupStepShellInternal.propTypes = {\r\n data: PropTypes.shape({\r\n adGroup: PropTypes.shape({\r\n UseOptimizedTargeting: PropTypes.bool,\r\n StartDate: PropTypes.string,\r\n EndDate: PropTypes.string,\r\n Id: PropTypes.number,\r\n }),\r\n campaign: PropTypes.shape({\r\n BiddingScheme: PropTypes.shape({\r\n Type: PropTypes.string,\r\n }),\r\n TimeZone: PropTypes.string,\r\n UseCampaignLevelDates: PropTypes.bool,\r\n EndDate: PropTypes.string,\r\n StartDate: PropTypes.string,\r\n }),\r\n exclusions: PropTypes.shape({\r\n adgroupExclusions: PropTypes.shape({}),\r\n }),\r\n errors: PropTypes.arrayOf(PropTypes.shape({\r\n message: PropTypes.string,\r\n property: PropTypes.string,\r\n code: PropTypes.string,\r\n })),\r\n }).isRequired,\r\n onDataChange: PropTypes.func.isRequired,\r\n error: PropTypes.arrayOf(PropTypes.shape({\r\n message: PropTypes.string,\r\n property: PropTypes.string,\r\n code: PropTypes.string,\r\n })).isRequired,\r\n scope: PropTypes.shape({}).isRequired,\r\n};\r\n\r\nexport const AdGroupStepShell = withScope(AdGroupStepShellInternal);\r\n","export const getContextualTargetStyles = () => ({\r\n root: {\r\n marginTop: 20,\r\n display: 'flex',\r\n },\r\n targetsContainer: {\r\n border: '1px solid gray',\r\n paddingLeft: 12,\r\n minWidth: '550px',\r\n },\r\n treeViewContainer: {\r\n '& .checkbox-inline.disabled': {\r\n paddingLeft: 0,\r\n '& input': {\r\n display: 'none',\r\n },\r\n '& span': {\r\n color: 'black',\r\n fontWeight: 'bold',\r\n },\r\n },\r\n },\r\n selectionContainer: {\r\n border: '1px solid gray',\r\n padding: '5px 10px',\r\n marginLeft: 12,\r\n width: '100%',\r\n '& .selectedTargetsLabel': {\r\n fontSize: '16px',\r\n fontWeight: 'bold',\r\n margin: '10px 0px',\r\n },\r\n '& .selectedTargetButton.btn-default': {\r\n padding: '2px 10px',\r\n paddingRight: '3px',\r\n height: 'unset',\r\n '& .iconba.iconba-Cancel': {\r\n top: 0,\r\n fontWeight: 'bold',\r\n },\r\n marginLeft: '5px',\r\n marginBottom: '5px',\r\n },\r\n '& .categoryName': {\r\n fontSize: '14px',\r\n fontWeight: '700',\r\n marginTop: '10px',\r\n marginBottom: '2px',\r\n },\r\n '& .selectedNodesContainer': {\r\n paddingTop: '5px',\r\n },\r\n },\r\n contextualTargetTitle: {\r\n flex: '100%',\r\n },\r\n});\r\n","import { edmCampaign } from '@bingads-webui/edm-campaign';\r\nimport { isEmpty } from 'underscore';\r\n\r\nconst campaignCriterionTypeName = 'Model.CampaignCriterion';\r\n\r\nexport const readCampaignCriterions = ({\r\n cid,\r\n aid,\r\n campaignId,\r\n type,\r\n}) =>\r\n edmCampaign\r\n .Customers.$withKey(cid)\r\n .Accounts.$withKey(aid)\r\n .Campaigns.$withKey(campaignId)\r\n .CampaignCriterions\r\n .$cast(campaignCriterionTypeName)\r\n .get({\r\n filter: {\r\n where: type,\r\n },\r\n })\r\n .toPromise();\r\n\r\n\r\nexport const readDayTimeCriterions = ({\r\n cid,\r\n aid,\r\n campaignId,\r\n}) =>\r\n readCampaignCriterions({\r\n cid,\r\n aid,\r\n campaignId,\r\n type: \"isof(Criterion,'Model.DayTimeCriterion')\",\r\n });\r\n\r\n\r\nexport const viewModelToBulkModelForAdSchedules = ({ campaignViewModel }) => {\r\n const targets = campaignViewModel.data.adSchedulesBulkUpsert || [];\r\n return targets.map((criterion) => {\r\n const Status = isEmpty(criterion) ? 'Active' : criterion.Status;\r\n if (campaignViewModel.data.Id) {\r\n return {\r\n ...criterion,\r\n Status,\r\n Campaign: {\r\n Id: campaignViewModel.data.Id,\r\n },\r\n };\r\n }\r\n return {\r\n ...criterion,\r\n Status,\r\n CampaignName: campaignViewModel.Name,\r\n };\r\n });\r\n};\r\n\r\nexport const readLocationCriterions = ({\r\n cid,\r\n aid,\r\n campaignId,\r\n}) =>\r\n readCampaignCriterions({\r\n cid,\r\n aid,\r\n campaignId,\r\n type: \"isof(Criterion,'Model.LocationCriterion') or isof(Criterion,'Model.RadiusCriterion') or isof(Criterion,'Model.LocationIntentCriterion')\",\r\n });\r\n\r\nexport const readDeviceCriterion = ({\r\n cid,\r\n aid,\r\n campaignId,\r\n adGroupId,\r\n}) =>\r\n readCampaignCriterions({\r\n cid,\r\n aid,\r\n campaignId,\r\n adGroupId,\r\n type: \"isof(Criterion,'Model.DeviceCriterion')\",\r\n });\r\n","/* eslint-disable no-param-reassign */\r\nimport _ from 'underscore';\r\nimport { getDefaultAdGroup } from '../../native-ads/constants';\r\n\r\nexport const defaultNativeAdGroup = {\r\n getDefaultAdGroup,\r\n defaultProperties: ['Name', 'FrequencyCapSettings', 'CpmBid', 'SearchBid', 'UseOptimizedTargeting', 'AdRotation'],\r\n setCustomProperties: (data) => {\r\n data.StartDate = new Date();\r\n },\r\n defaultTargetingProperties: ['ageRanges', 'genderTypes', 'deviceTypes', 'initialDeviceTypes'],\r\n setCustomTargetingProperties: _.noop,\r\n};\r\n\r\nexport const defaultDealAdGroup = {\r\n getDefaultAdGroup,\r\n defaultProperties: ['Name', 'FrequencyCapSettings'],\r\n setCustomProperties: (data) => {\r\n data.StartDate = new Date();\r\n },\r\n defaultTargetingProperties: [],\r\n setCustomTargetingProperties: _.noop,\r\n};\r\n\r\nexport const defaultCTVAdGroup = {\r\n getDefaultAdGroup,\r\n defaultProperties: ['Name', 'FrequencyCapSettings'],\r\n setCustomProperties: (data) => {\r\n data.StartDate = new Date();\r\n },\r\n defaultTargetingProperties: ['ageRanges', 'genderTypes'],\r\n setCustomTargetingProperties: _.noop,\r\n};\r\n","import { useContext } from 'react';\r\nimport _ from 'underscore';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport { isAudience, isCTVCampaign, isDealCampaign } from '../../../step-constants';\r\nimport { defaultNativeAdGroup, defaultDealAdGroup, defaultCTVAdGroup } from './default-adgroup';\r\n\r\nconst useDefaultAdGroupForFlow = (flow) => {\r\n if (isAudience(flow)) {\r\n return defaultNativeAdGroup;\r\n }\r\n\r\n if (isDealCampaign(flow)) {\r\n return defaultDealAdGroup;\r\n }\r\n\r\n if (isCTVCampaign(flow)) {\r\n return defaultCTVAdGroup;\r\n }\r\n\r\n return {};\r\n};\r\n\r\nexport const useDefaultAdGroup = (flow) => {\r\n const i18n = useContext(I18nContext);\r\n const serverContext = useContext(ServerContext);\r\n\r\n const {\r\n getDefaultAdGroup = _.noop,\r\n defaultProperties,\r\n setCustomProperties = _.noop,\r\n defaultTargetingProperties,\r\n setCustomTargetingProperties = _.noop,\r\n } = useDefaultAdGroupForFlow(flow) || {};\r\n\r\n const defaultAdGroupModel = getDefaultAdGroup(i18n, serverContext);\r\n const { data: defaultAdGroupData } = defaultAdGroupModel || {};\r\n\r\n const defaultAdGroup = _.pick(defaultAdGroupData, defaultProperties);\r\n setCustomProperties(defaultAdGroup);\r\n\r\n const defaultTargeting = _.pick(defaultAdGroupData, defaultTargetingProperties);\r\n setCustomTargetingProperties(defaultTargeting);\r\n\r\n return {\r\n defaultAdGroup,\r\n defaultTargeting,\r\n };\r\n};\r\n","\r\nimport _, { extend, each } from 'underscore';\r\nimport Promise from 'bluebird';\r\nimport { useContext, useCallback } from 'react';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { useWizardService, WIZARD_EVENTS } from '@bingads-webui-react/wizard';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport {\r\n loadBundleCountries,\r\n saveAdGroup,\r\n modelToViewModelForAdGroup,\r\n modelToViewModelForCampaign,\r\n readLocationCriterions,\r\n readDayTimeCriterions,\r\n readTargetingCriterions,\r\n readAudienceCriterions,\r\n getErrorsPlaceholders,\r\n loadAdGroup,\r\n loadCampaign,\r\n readPlacementCriterions,\r\n} from '@bingads-webui-campaign-react/xandr-campaign';\r\nimport { getDealDetails, modelConstraints } from '@bingads-webui-campaign-react/xandr-video-campaign-shared-components';\r\nimport exclusionRepository from '@bingads-webui-campaign-legacy/advanced-settings/util/exclusion-repository';\r\nimport { ScopeLevel } from '@bingads-webui-campaign-react/constants';\r\nimport { ScenarioContext, ActivityContext } from '@bingads-webui-react/hoc-with-signal';\r\nimport { ScopeContext } from '@bingads-webui-react/scope-service';\r\nimport { useAudienceData } from '@bingads-webui-campaign-react/pmax-lite-data';\r\nimport {\r\n readDayTimeCriterions as campaignReadDayTimeCriterions,\r\n readLocationCriterions as campaignReadLocationCriterions,\r\n readDeviceCriterion as campaignReadDeviceCriterions,\r\n} from '../../shared/model/campaign-criterion';\r\nimport { useDefaultAdGroup } from './use-default-adgroup/index';\r\n\r\nimport {\r\n isAudienceCampaign,\r\n isAudienceAdGroupEdit,\r\n isCTVAdGroupEdit,\r\n isDisplayAdsCampaign,\r\n isVideoAdsCampaign,\r\n isAudienceAdGroupCreation,\r\n isAdGroupCreation,\r\n isDealCampaign,\r\n} from '../../step-constants';\r\n\r\nexport const useAdGroupRepository = () => {\r\n const i18n = useContext(I18nContext);\r\n const { send, state } = useWizardService();\r\n\r\n const serverContext = useContext(ServerContext);\r\n const { scope } = useContext(ScopeContext) || {};\r\n const scenarioContext = useContext(ScenarioContext);\r\n\r\n const activity = useContext(ActivityContext);\r\n const { cid, aid } = scope.values;\r\n\r\n const { ServicesEndpoints } = serverContext;\r\n const odataUrl = ServicesEndpoints && ServicesEndpoints.CampaignAPI;\r\n const isOnebox = odataUrl && odataUrl.toString().indexOf('redmond.corp') > 0;\r\n const [, getAudienceData] = useAudienceData({ postponeFetch: true, pathOverride: isOnebox ? '/Advertiser/V2' : 'Campaign/V2', audienceType: 'InMarket' });\r\n\r\n const inMarketAudienceRedesignEnabled = _.get(serverContext, ['DynamicPermissions', 'InMarketAudienceRedesign']);\r\n\r\n const {\r\n ads, flow, isAdGroupPublishing, isDefaultAdGroupStepModel,\r\n } = state.context.wizardData;\r\n\r\n const { defaultAdGroup: defaultAdGroupData, defaultTargeting } = useDefaultAdGroup(flow) || {};\r\n const isDealFlow = isDealCampaign(flow);\r\n\r\n const loadAudienceData = useCallback(\r\n () => getAudienceData()\r\n .then(audienceList => _.filter(audienceList, audience => audience && audience.Type === 'InMarket'))\r\n , [getAudienceData]\r\n );\r\n\r\n const allSettledPromiseWrapper = (promises) => {\r\n const wrappedPromises = promises.map(p =>\r\n p.then(\r\n val => ({ status: 'fulfilled', value: val }),\r\n err => ({ status: 'rejected', reason: err })\r\n ));\r\n return Promise.all(wrappedPromises);\r\n };\r\n\r\n const load = () => {\r\n const savedCampaign = state.context.wizardData.campaign;\r\n const savedAdGroup = state.context.wizardData.adGroup;\r\n\r\n const adGroupId = savedAdGroup ? savedAdGroup.Id : null;\r\n const campaignId = savedCampaign ? savedCampaign.Id : null;\r\n\r\n let loadPromises = {\r\n bundleCountriesAndLocationCriterions: loadBundleCountries({\r\n cid,\r\n aid,\r\n serverContext,\r\n }),\r\n campaign: loadCampaign(cid, aid, campaignId),\r\n campaignLocationCriterions: campaignReadLocationCriterions({\r\n cid, aid, campaignId,\r\n }),\r\n campaignDeviceCriterions: campaignReadDeviceCriterions({\r\n cid, aid, campaignId,\r\n }),\r\n campaignDayTimeCriterions: campaignReadDayTimeCriterions({\r\n cid, aid, campaignId,\r\n }),\r\n };\r\n\r\n if (isDealFlow) {\r\n loadPromises = extend(loadPromises, {\r\n dealDetails: getDealDetails(cid, aid, campaignId, serverContext),\r\n });\r\n }\r\n\r\n if (adGroupId) {\r\n loadPromises = extend(loadPromises, {\r\n adGroup: loadAdGroup(cid, aid, campaignId, adGroupId),\r\n placementCriterions: readPlacementCriterions({\r\n cid, aid, campaignId, adGroupId,\r\n }),\r\n locationCriterions: readLocationCriterions({\r\n cid, aid, campaignId, adGroupId,\r\n }),\r\n dayTimeCriterions: readDayTimeCriterions({\r\n cid, aid, campaignId, adGroupId,\r\n }),\r\n targetCriterions: readTargetingCriterions({\r\n cid, aid, campaignId, adGroupId,\r\n }),\r\n audienceCriterions: readAudienceCriterions({\r\n cid, aid, campaignId, adGroupId,\r\n }),\r\n exclusions: exclusionRepository.load(campaignId, adGroupId, ScopeLevel.AdGroup),\r\n });\r\n }\r\n\r\n if (inMarketAudienceRedesignEnabled) {\r\n loadPromises = extend(loadPromises, {\r\n audienceList: loadAudienceData(),\r\n });\r\n }\r\n\r\n return allSettledPromiseWrapper(Object.values(loadPromises))\r\n .then((results) => {\r\n const resultMap = Object.keys(loadPromises).reduce((acc, key, index) => {\r\n if (results[index].status === 'fulfilled') {\r\n acc[key] = results[index].value;\r\n }\r\n return acc;\r\n }, {});\r\n\r\n const errors = results.reduce((acc, result) => {\r\n if (result.status === 'rejected') {\r\n acc.push(...result.reason.errors);\r\n }\r\n return acc;\r\n }, []);\r\n\r\n const {\r\n adGroup = {},\r\n campaign = {},\r\n locationCriterions = null,\r\n campaignLocationCriterions,\r\n campaignDeviceCriterions,\r\n bundleCountriesAndLocationCriterions,\r\n dayTimeCriterions = null,\r\n campaignDayTimeCriterions,\r\n targetCriterions = null,\r\n audienceCriterions = null,\r\n exclusions: [campaignExclusions, adgroupExclusions] = [null, null],\r\n audienceList,\r\n placementCriterions = null,\r\n dealDetails = null,\r\n } = resultMap || {};\r\n\r\n const adGroupData = modelToViewModelForAdGroup({\r\n adGroupModel: adGroup,\r\n campaignModel: campaign,\r\n locationCriterionsModel: locationCriterions ? locationCriterions.value : [],\r\n campaignLocationCriterionsModel: campaignLocationCriterions ? campaignLocationCriterions.value : [],\r\n campaignDeviceCriterions: campaignDeviceCriterions ? campaignDeviceCriterions.value : [],\r\n bundleCountries: bundleCountriesAndLocationCriterions ? bundleCountriesAndLocationCriterions.bundleCountries : [],\r\n dayTimeCriterionsModel: dayTimeCriterions ? dayTimeCriterions.value : [],\r\n targetCriterionsModel: targetCriterions ? targetCriterions.value : [],\r\n audienceCriterionsModel: audienceCriterions ? audienceCriterions.value : [],\r\n placementCriterionsModel: placementCriterions ? placementCriterions.value : [],\r\n i18n,\r\n isAudienceAds: isAudienceCampaign(flow) || isAudienceAdGroupEdit(flow) || isAudienceAdGroupCreation(flow),\r\n isDisplayAds: isDisplayAdsCampaign(flow),\r\n isVideoAds: isVideoAdsCampaign(flow),\r\n isAudienceAdGroupEdit: isAudienceAdGroupEdit(flow),\r\n isEnableMSANDisplayCampaignsEnabled: serverContext.DynamicPermissions && serverContext.DynamicPermissions.EnableMSANDisplayCampaigns,\r\n isEnableMSANVideoCampaignsEnabled: serverContext.DynamicPermissions && serverContext.DynamicPermissions.EnableMSANVideoCampaigns,\r\n defaultAdGroupData,\r\n defaultTargeting,\r\n separateIMA: inMarketAudienceRedesignEnabled,\r\n ads,\r\n });\r\n\r\n if (isDefaultAdGroupStepModel && (isDisplayAdsCampaign(flow) || isVideoAdsCampaign(flow))) {\r\n adGroupData.data.StartDate = new Date();\r\n }\r\n\r\n let adGroupModelWithConstraintsPromise = Promise.resolve(adGroupData.data);\r\n\r\n if (isDealFlow && dealDetails) {\r\n adGroupModelWithConstraintsPromise = modelConstraints(dealDetails, adGroupData.data, serverContext);\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, { deal: dealDetails });\r\n }\r\n\r\n return adGroupModelWithConstraintsPromise\r\n .then((constraintModel) => {\r\n adGroupData.data = constraintModel;\r\n })\r\n .then(() => {\r\n const campaignData = modelToViewModelForCampaign({\r\n campaignModel: campaign,\r\n // eslint-disable-next-line no-param-reassign\r\n dayTimeCriterionsModel: campaignDayTimeCriterions ? each(campaignDayTimeCriterions.value, (cr) => { cr.Id = ''; }) : [],\r\n });\r\n\r\n return {\r\n adGroup: adGroupData.data,\r\n campaign: campaignData.data,\r\n ...bundleCountriesAndLocationCriterions,\r\n exclusions: {\r\n campaignExclusions,\r\n adgroupExclusions,\r\n },\r\n audienceList,\r\n ...getErrorsPlaceholders(),\r\n errors,\r\n };\r\n });\r\n });\r\n };\r\n\r\n const save = ({ data }) => {\r\n const {\r\n adGroup, bundleCountries, bundleLocationCriterions, exclusions,\r\n } = data;\r\n\r\n if (isAdGroupPublishing || isAdGroupCreation(flow)) {\r\n adGroup.Status = 'Active';\r\n } else if (!isAudienceAdGroupEdit(flow) && !isCTVAdGroupEdit(flow)) {\r\n adGroup.Status = 'Paused';\r\n } else if (isAudienceAdGroupEdit(flow) && adGroup.Status === 'Draft') {\r\n adGroup.Status = undefined;\r\n }\r\n\r\n const saveAdGroupPromise = saveAdGroup({\r\n adGroup: { data: adGroup },\r\n bundleCountries,\r\n bundleLocationCriterions,\r\n campaign: state.context.wizardData.campaign,\r\n isDisplayPlus: true,\r\n flow,\r\n }, {\r\n scenario: scenarioContext.name,\r\n activityLogger: scenarioContext.createActivity('saveAdGroup'),\r\n i18n,\r\n serverContext,\r\n });\r\n\r\n const savePromises = [saveAdGroupPromise];\r\n\r\n if (isAudienceAdGroupEdit(flow)) {\r\n const saveExclusionsData = {\r\n CampaignId: state.context.wizardData.campaign.Id,\r\n AdGroupId: adGroup.Id,\r\n AdvancedSettings: {\r\n ExcludedSites: exclusions.adgroupExclusions.ExcludedSites,\r\n },\r\n };\r\n const saveExclusionsPromise = exclusionRepository.saveExtensions(saveExclusionsData, ScopeLevel.AdGroup);\r\n savePromises.push(saveExclusionsPromise);\r\n }\r\n\r\n return new Promise((resolve, reject) => {\r\n allSettledPromiseWrapper(savePromises).then((results) => {\r\n const allSuccess = _.every(results, result => result.status === 'fulfilled');\r\n\r\n if (allSuccess) {\r\n if (activity) {\r\n activity.signal(`onAdGroupSavedSuccessfully - Status: ${adGroup.Status}, Id: ${adGroup.Id}`);\r\n }\r\n\r\n const adGroupMtModel = results[0].value.adGroup.data;\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, { adGroup: adGroupMtModel, isDefaultAdGroupStepModel: false });\r\n\r\n return resolve(results[0].value);\r\n }\r\n\r\n const errors = _.map(results, (result) => {\r\n if (activity) {\r\n activity.signal(`onAdGroupSavedError - error ${JSON.stringify(result)}`);\r\n }\r\n if (result.status === 'fulfilled') {\r\n return null;\r\n }\r\n\r\n const { serverErrors = {} } = result.reason;\r\n\r\n if (result.reason.NegativeSitesResult) {\r\n const { NegativeSitesResult } = result.reason;\r\n serverErrors.property = 'webExclusions';\r\n serverErrors.NegativeSitesResult = NegativeSitesResult.EntityErrors;\r\n }\r\n\r\n return serverErrors;\r\n });\r\n\r\n // eslint-disable-next-line prefer-promise-reject-errors\r\n return reject({ error: _.flatten(errors.filter(val => val !== null)) });\r\n });\r\n });\r\n };\r\n\r\n return {\r\n load,\r\n save,\r\n };\r\n};\r\n","import {\r\n alertStyle,\r\n entitySelectorStyle,\r\n paginationStyle,\r\n} from '@bingads-webui-campaign-react/common-styles';\r\n\r\nexport const disclaimerSettingsStyles = ({ palette, iconFontFamily = 'MsAds MDL2 Assets' }) => (\r\n {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n\r\n '& .form-group': {\r\n '& .form-control-static': {\r\n marginTop: 8,\r\n marginBottom: 8,\r\n position: 'relative',\r\n\r\n '& .addDisclaimerButton': {\r\n position: 'absolute',\r\n left: 0,\r\n },\r\n },\r\n\r\n '& .alert.alert-info': {\r\n marginTop: 5,\r\n marginBottom: 16,\r\n width: 'fit-content',\r\n },\r\n\r\n '& .disclaimer-selector': {\r\n '& .list-selector-option': {\r\n '& .disclaimer-item-name': {\r\n display: 'inline-block',\r\n maxWidth: 180,\r\n },\r\n\r\n '& .action-right': {\r\n float: 'right',\r\n },\r\n },\r\n\r\n '& .open .dropdown-menu': {\r\n position: 'relative',\r\n marginBottom: 10,\r\n\r\n '& .list-selector-content': {\r\n height: 'auto',\r\n },\r\n },\r\n\r\n '& .truncated': {\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n whiteSpace: 'nowrap',\r\n },\r\n },\r\n\r\n ...entitySelectorStyle({ palette, iconFontFamily }),\r\n ...paginationStyle({ palette }),\r\n },\r\n\r\n '& .col-sm-1, & .col-sm-2, & .col-sm-3, & .col-sm-4, & .col-sm-5, & .col-sm-6, & .col-sm-7, & .col-sm-8, & .col-sm-9, & .col-sm-10, & .col-sm-11, & .col-sm-12': {\r\n float: 'none',\r\n paddingLeft: 0,\r\n paddingRight: 0,\r\n },\r\n }\r\n);\r\n\r\nexport const disclaimerPanelStyles = ({ palette, iconFontFamily = 'MsAds MDL2 Assets' }) => ({\r\n '.disclaimer-editor-panel': {\r\n ...alertStyle({ palette, iconFontFamily }),\r\n\r\n '& .panel-content': {\r\n width: 592,\r\n\r\n '& .panel-title': {\r\n fontSize: 20,\r\n fontWeight: '600 !important',\r\n lineHeight: '27px',\r\n },\r\n\r\n '& .panel-body': {\r\n paddingRight: 64,\r\n display: 'flex',\r\n 'flex-direction': 'column',\r\n\r\n '& .disclaimer-setting-content': {\r\n marginBottom: 'auto',\r\n },\r\n\r\n '& .disclaimer-setting-footer': {\r\n marginTop: 32,\r\n\r\n '& button ~ button': {\r\n marginLeft: 10,\r\n },\r\n },\r\n },\r\n\r\n '& .form-group': {\r\n margin: 0,\r\n\r\n '& > .control-label': {\r\n textAlign: 'left',\r\n float: 'none',\r\n width: '100%',\r\n },\r\n\r\n '& > .col-sm-8': {\r\n width: '100%',\r\n },\r\n },\r\n\r\n '& .form-group ~ .form-group': {\r\n marginTop: 32,\r\n },\r\n\r\n '& .col-sm-1, & .col-sm-2, & .col-sm-3, & .col-sm-4, & .col-sm-5, & .col-sm-6, & .col-sm-7, & .col-sm-8, & .col-sm-9, & .col-sm-10, & .col-sm-11, & .col-sm-12': {\r\n float: 'none',\r\n paddingLeft: 0,\r\n paddingRight: 0,\r\n },\r\n\r\n '& .alert.alert-info': {\r\n marginTop: 8,\r\n },\r\n\r\n '& div.error': {\r\n color: '#A80000',\r\n margin: '4px 0 0 0',\r\n fontSize: 12,\r\n },\r\n\r\n '& .mt-error': {\r\n backgroundColor: '#fde7e9',\r\n padding: 5,\r\n marginTop: 10,\r\n '& .over-all-errors.error': {\r\n fontSize: 12,\r\n color: '#D90026',\r\n },\r\n },\r\n\r\n '& .setting-disclaimer-layoutType .radio': {\r\n paddingTop: 0,\r\n },\r\n\r\n '& .dropdown-toggle.btn': {\r\n border: 'none',\r\n width: '100%',\r\n height: '100%',\r\n paddingLeft: 8,\r\n paddingRight: 8,\r\n borderRadius: 2,\r\n },\r\n\r\n '& .ba-dropdown-selector': {\r\n position: 'relative',\r\n border: `1px solid ${palette.neutralSecondary}`,\r\n minWidth: 132,\r\n verticalAlign: 'baseline',\r\n marginLeft: 8,\r\n height: 30,\r\n borderRadius: 2,\r\n\r\n '& .glyphicon-triangle-bottom': {\r\n marginTop: 4,\r\n '&::before': {\r\n content: '\"\\\\E70D\"',\r\n },\r\n },\r\n },\r\n\r\n '& .dropdown-menu': {\r\n top: 'auto',\r\n position: 'absolute',\r\n width: '100%',\r\n padding: '10px',\r\n },\r\n\r\n '& .ba-list-selector': {\r\n border: 'none',\r\n '& .list-selector-item': {\r\n padding: '5px 10px',\r\n margin: '0',\r\n '&:hover': {\r\n cursor: 'pointer',\r\n backgroundColor: '#f5f5f5',\r\n },\r\n '&.selected': {\r\n background: '#E7F0F6',\r\n },\r\n '& .item-actions': {\r\n float: 'right',\r\n },\r\n },\r\n },\r\n\r\n '& textarea#disclaimer-editor-information-popup': {\r\n height: 169,\r\n resize: 'none',\r\n },\r\n\r\n '& textarea#disclaimer-editor-information-additionalline': {\r\n height: 69,\r\n resize: 'none',\r\n },\r\n\r\n '& .url-editor-form': {\r\n display: 'flex',\r\n gridTemplateColumns: 'auto 1fr',\r\n\r\n '& > select.form-control': {\r\n width: 'auto',\r\n marginRight: 6,\r\n },\r\n\r\n '& > input': {\r\n marginLeft: 6,\r\n },\r\n },\r\n },\r\n },\r\n});","import { getCollapsiblePanelStyles } from '../../shared/styles';\r\nimport { disclaimerSettingsStyles, disclaimerPanelStyles } from './components/styles/disclaimer-setting-styles';\r\n\r\nexport const getCampaignStyles = (components, theme) => ({\r\n divider: {\r\n padding: '5px 0px 0px 4px',\r\n width: '100%',\r\n borderTop: '2px solid #E0E0E0',\r\n marginTop: 30,\r\n marginBottom: 20,\r\n },\r\n budgetContainer: {\r\n '& .budget-title-container span': {\r\n fontWeight: 600,\r\n },\r\n },\r\n campaignShell: {\r\n display: 'flex',\r\n width: 966,\r\n '& .multi-selector': {\r\n maxWidth: 888,\r\n },\r\n '& .collapse-panel.disclaimer': {\r\n '& .collapse-content': {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n },\r\n },\r\n '& .deal-impression-container': {\r\n marginLeft: 8,\r\n },\r\n '& .device-target .collapse-title-bar .title-item .collapse-title': {\r\n marginLeft: '8px',\r\n },\r\n },\r\n collapsiblePanel: getCollapsiblePanelStyles(components, theme),\r\n estimationPart: {\r\n flexGrow: '1',\r\n position: 'sticky',\r\n marginTop: '58px',\r\n marginLeft: '30px',\r\n },\r\n disclaimerContainerWrapper: disclaimerSettingsStyles(theme),\r\n '@global': {\r\n ...disclaimerPanelStyles(theme),\r\n },\r\n});\r\n","import React, { useContext, useMemo } from 'react';\r\nimport classNames from 'classnames';\r\nimport { Label } from '@fluentui/react';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport { ServerValidatedLegacyBudget } from '@bingads-webui-campaign-react/xandr-campaign';\r\nimport { MinXandrDailyBudgetRangePerCurrency } from '@bingads-webui-campaign-legacy/common-grid-config/budget/get-budget-range';\r\nimport { getBidTitleDetails } from '@bingads-webui-campaign-react/wizard-shared-components';\r\nimport { isXandrDisplayAdsCampaign } from '@bingads-webui-campaign-react/constants';\r\nimport { HelpPopup } from '@bingads-webui-react/help-popup';\r\nimport { getConvertedCurrencyDealMinimumBid, getAccountExchangeRateFromLocalStorage } from '@bingads-webui-campaign-react/xandr-video-campaign-shared-components';\r\n\r\nimport { getCampaignStyles } from '../styles';\r\n\r\nexport const XandrBudgetAndBidStrategy = ({\r\n data, isPremiumStreaming,\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n\r\n const classes = useDefaultStyles(getCampaignStyles);\r\n\r\n const serverContext = useContext(ServerContext);\r\n const { campaign, dealDetails } = data || {};\r\n\r\n const minBudget = useMemo(() => {\r\n if (dealDetails) {\r\n const exchangeRateMapping = getAccountExchangeRateFromLocalStorage(serverContext);\r\n const dealMinimumBid = getConvertedCurrencyDealMinimumBid(dealDetails.MinimumBid, dealDetails.Currency, serverContext.CurrentAccount.CurrencyCode, exchangeRateMapping.val);\r\n return Math.max(dealMinimumBid || 0, MinXandrDailyBudgetRangePerCurrency[serverContext.CurrentAccount.CurrencyCode]);\r\n }\r\n\r\n return MinXandrDailyBudgetRangePerCurrency[serverContext.CurrentAccount.CurrencyCode];\r\n }, [dealDetails, serverContext]);\r\n\r\n const topicForBidStrategy = useMemo(() => {\r\n if (isXandrDisplayAdsCampaign(campaign.CampaignSubType)) {\r\n return undefined;\r\n }\r\n\r\n if (isPremiumStreaming) {\r\n return 'pop_BA_PremiumStreaming_BidStrategy';\r\n }\r\n return 'pop_BA_VideoAds_BidStrategyType';\r\n }, [campaign.CampaignSubType, isPremiumStreaming]);\r\n\r\n return (\r\n \r\n {!isEdit &&\r\n not use individuals’ demographics—such as age, gender, location, etc.—for the purpose of personalizing advertising, segmenting, or profiling customers.'))}\r\n level=\"Info\"\r\n icon={()}\r\n dismissible={false}\r\n />}\r\n
\r\n \r\n \r\n new Date()) || isDefaultAdGroupStepModel,\r\n },\r\n }}\r\n allowStartDateSelection={!useCampaignLevelDates}\r\n allowNoEndDateSelection={!useCampaignLevelDates}\r\n allowEndDateSelection={!useCampaignLevelDates}\r\n />\r\n {useCampaignLevelDates && (\r\n \r\n
\r\n {!isDealFlow && \r\n \r\n \r\n {i18n.getString(_TL_('Start and end dates are managed at the campaign level.'))}\r\n \r\n \r\n
\r\n )}\r\n \r\n \r\n
\r\n )}\r\n {bidAmountsLessThanFloorPriceAdGroupError.length > 0 && (\r\n \r\n
\r\n )}\r\n {AgeGenderDisclaimer && \r\n {isValidTargets && isAudience && data.adGroup && data.campaign &&\r\n
\r\n \r\n
\r\n\r\n );\r\n};\r\n","import React, { useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { makeStyles, Label } from '@fluentui/react-components';\r\nimport { HelpButton } from '@bingads-webui-react/help-popup';\r\n\r\nconst useStyles = makeStyles({\r\n dateManagementSelector: {\r\n marginBottom: '16px',\r\n },\r\n stackStyles: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n flexWrap: 'nowrap',\r\n width: 'auto',\r\n height: 'auto',\r\n boxSizing: 'border-box',\r\n '> *': {\r\n textOverflow: 'ellipsis',\r\n },\r\n '> :not(:first-child)': {\r\n marginTop: '0px',\r\n },\r\n '> *:not(.ms-StackItem)': {\r\n flexShrink: 1,\r\n },\r\n },\r\n stackItem: {\r\n height: 'auto',\r\n width: 'auto',\r\n flexShrink: 1,\r\n },\r\n});\r\n\r\nexport const InfoLabel = ({ label, infoTopic }) => {\r\n const i18n = useContext(I18nContext);\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n \r\n {infoTopic &&\r\n
\r\n );\r\n};\r\n\r\nInfoLabel.propTypes = {\r\n label: PropTypes.string.isRequired,\r\n infoTopic: PropTypes.string,\r\n};\r\n\r\nInfoLabel.defaultProps = {\r\n infoTopic: null,\r\n};\r\n","import React, { useState, useMemo, useEffect, useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { noop, get } from 'underscore';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport SharedBudgetSwitchView from '@bingads-webui-campaign-legacy/shared-budget/view/shared-budget-switch-editor';\r\nimport Budget from '@bingads-webui-campaign-legacy/budget/view/budget';\r\nimport { withCustomValidation } from '@bingads-webui-react/validation';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { ValidatedLegacyBidStrategy } from '@bingads-webui-campaign-react/step-wizard-controls';\r\nimport types from '@bingads-webui-campaign-legacy/bidding-strategy/bidding-strategy-type';\r\n\r\nimport { getBudgetStyles } from './styles/bid-strategy-styles';\r\nimport { InfoLabel } from './info-label';\r\n\r\nconst AudienceBudgetBidStrategyInternal = ({\r\n data,\r\n classes,\r\n updateValidation,\r\n campaignType,\r\n campaignSubType,\r\n isEnableMSANDisplayCampaignsEnabled,\r\n isEnableMSANVideoCampaignsEnabled,\r\n setBudgetView,\r\n hideBidStrategy,\r\n activity,\r\n showBudgetTypeSelection,\r\n allowBudgetTypeSelection,\r\n allowSharedBudgetLibrarySelection,\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n const campaign = useMemo(() => (\r\n isEnableMSANDisplayCampaignsEnabled || isEnableMSANVideoCampaignsEnabled ? data : data.campaign\r\n ), [data, isEnableMSANDisplayCampaignsEnabled, isEnableMSANVideoCampaignsEnabled]);\r\n const bidStrategyName = get(data, ['campaign', 'BidStrategyName'], '');\r\n\r\n const [sharedBudgetRef, setSharedBudgetRef] = useState();\r\n\r\n const sharedBudget = useMemo(() => {\r\n const factory = SharedBudgetSwitchView.newFactory(Budget);\r\n\r\n const sharedBudgetView = factory({\r\n accountCurrencyCode: 'USD',\r\n model: undefined,\r\n withRealTimeUpdates: true,\r\n showBudgetTypeSelection,\r\n allowBudgetTypeSelection,\r\n allowSharedBudgetLibrarySelection,\r\n });\r\n\r\n sharedBudgetView.render();\r\n\r\n return sharedBudgetView;\r\n }, []);\r\n\r\n const onBudgetChange = () => {\r\n const budget = sharedBudget.getValues();\r\n const isValid = sharedBudget.validate();\r\n if (activity) {\r\n activity.signal(`onBudgetChange - ${JSON.stringify(budget)} - isValid: ${isValid}}`);\r\n }\r\n updateValidation(isValid ? [] : [i18n.getString(_TL_('Invalid budget'))], { BudgetId: budget && budget.Id, Budget: { Amount: budget && budget.Amount, Id: budget && budget.Id, Type: budget && budget.Type } });\r\n };\r\n\r\n useEffect(() => {\r\n if (setBudgetView && sharedBudget) {\r\n setBudgetView(sharedBudget);\r\n }\r\n }, [sharedBudget, setBudgetView]);\r\n\r\n useEffect(() => {\r\n if (sharedBudgetRef) {\r\n sharedBudgetRef.innerHTML = '';\r\n sharedBudgetRef.append(sharedBudget.el);\r\n\r\n sharedBudget.update(campaign.Budget);\r\n sharedBudget.budgetView.on('budget.updated', onBudgetChange);\r\n sharedBudget.budgetView.on('change', onBudgetChange);\r\n sharedBudget.grid.gridView.on('didUpdate', onBudgetChange);\r\n sharedBudget.viewModel.sharedBudgetSwitch.subscribe(() => {\r\n onBudgetChange();\r\n });\r\n }\r\n\r\n return noop;\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [sharedBudgetRef]);\r\n\r\n useEffect(() => {\r\n sharedBudget.viewModel.isCPSSelected(campaign.BiddingScheme.Type === types.costPerSale);\r\n sharedBudget.viewModel.sharedBudgetIsNotAllowedWarning(i18n.getString(_TL_('Shared budget is not allowed if CPS is selected')));\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [campaign.BiddingScheme.Type]);\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nTextFormattingDialogue.propTypes = {\r\n i18n: PropTypes.shape({ getString: PropTypes.func }).isRequired,\r\n onToggleBack: PropTypes.func.isRequired,\r\n isUsedForButton: PropTypes.bool,\r\n hideColorFormatting: PropTypes.bool,\r\n textFormatOptions: PropTypes.shape({\r\n font: PropTypes.string,\r\n color: PropTypes.string,\r\n weight: PropTypes.string,\r\n })\r\n .isRequired,\r\n onFormatText: PropTypes.func.isRequired,\r\n};\r\n\r\nTextFormattingDialogue.defaultProps = {\r\n isUsedForButton: false,\r\n hideColorFormatting: false,\r\n};\r\n","import { makeStyles } from '@fluentui/react-components';\r\nimport { helpbuttonStyle } from '@bingads-webui-campaign-react/common-styles';\r\n\r\nexport const useDefaultContainerStyles = makeStyles({\r\n container: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n rowGap: '16px',\r\n },\r\n});\r\n\r\nexport const getStyles = (_, core) => ({\r\n collapseContainer: {\r\n '& .helpbutton': {\r\n ...helpbuttonStyle(core)['.helpbutton'],\r\n marginBottom: '4px',\r\n display: 'inline-block',\r\n },\r\n '& .helpbutton::before': helpbuttonStyle(core)['.helpbutton::before'],\r\n },\r\n});\r\n","import { getTextAssetCollectionConfig } from '@bingads-webui-campaign-react/pmax-text-input';\r\n\r\nconst collectionConfig = {\r\n headlines: {\r\n labelText: _TL_('Short headline'),\r\n placeholderText: _TL_('Enter your short headline'),\r\n fieldName: 'short-headline',\r\n singleAssetValidationPropsField: 'Headline',\r\n validationPropsField: 'Headlines',\r\n addButtonText: _TL_('Add headline'),\r\n copilotButtonLabel: _TL_('Get recommendations for your short headline'),\r\n deleteButtonLabel: _TL_('Remove short headline'),\r\n minCollectionSize: 1,\r\n maxCollectionSize: 1,\r\n errorMessage: _TL_('At least one short headlines are required'),\r\n helpPopupTopic: 'pop_BA_DisplayTemplate_Headline',\r\n helpPopupAriaLabel: _TL_('Click to learn more about short headlines'),\r\n inlineRecommendationsTitle: _TL_('Recommended short headlines'),\r\n inlineRecommendationsHelpTopicKey:\r\n 'pop_BA_Recommendations_Pmax_Shortheadlines',\r\n inlineRecommendationsHelpTopicAriaLabel: _TL_('Click to learn more about short headlines recommendations'),\r\n inlineRecommendationsDisabledItemTooltip: _TL_(\"You've reached the maximum number of short headlines. Please remove one short headline if you'd like to add this recommended short headline.\"),\r\n duplicateErrorMessage: _TL_('Duplicate short headlines are not allowed'),\r\n },\r\n longHeadlines: {\r\n labelText: _TL_('Long headline'),\r\n placeholderText: _TL_('Enter your long headline'),\r\n fieldName: 'long-headline',\r\n singleAssetValidationPropsField: 'LongHeadline',\r\n validationPropsField: 'LongHeadlines',\r\n addButtonText: _TL_('Add long headline'),\r\n copilotButtonLabel: _TL_('Get recommendations for your long headline'),\r\n deleteButtonLabel: _TL_('Remove long headline'),\r\n minCollectionSize: 1,\r\n maxCollectionSize: 1,\r\n errorMessage: _TL_('At least one long headline is required'),\r\n helpPopupTopic: 'pop_BA_DisplayTemplate_Headline',\r\n helpPopupAriaLabel: _TL_('Click to learn more about long headlines'),\r\n inlineRecommendationsTitle: _TL_('Recommended long headlines'),\r\n inlineRecommendationsHelpTopicKey:\r\n 'pop_BA_Recommendations_Pmax_Longheadlines',\r\n inlineRecommendationsHelpTopicAriaLabel:\r\n _TL_('Click to learn more about long headlines recommendations'),\r\n inlineRecommendationsDisabledItemTooltip:\r\n _TL_(\"You've reached the maximum number of long headlines. Please remove one long headline if you'd like to add this recommended long headline.\"),\r\n duplicateErrorMessage: _TL_('Duplicate long headlines are not allowed'),\r\n },\r\n descriptions: {\r\n labelText: _TL_('Description'),\r\n placeholderText: _TL_('Enter a description'),\r\n fieldName: 'description',\r\n singleAssetValidationPropsField: 'Description',\r\n validationPropsField: 'Descriptions',\r\n addButtonText: _TL_('Add description'),\r\n minCollectionSize: 1,\r\n maxCollectionSize: 1,\r\n errorMessage: _TL_('At least one description is required'),\r\n helpPopupTopic: 'pop_BA_DisplayTemplate_Description',\r\n helpPopupAriaLabel: _TL_('Click to learn more about descriptions'),\r\n inlineRecommendationsTitle: _TL_('Recommended descriptions'),\r\n inlineRecommendationsHelpTopicKey: 'pop_BA_Recommendations_Pmax_Descriptions',\r\n inlineRecommendationsHelpTopicAriaLabel:\r\n _TL_('Click to learn more about descriptions recommendations'),\r\n inlineRecommendationsDisabledItemTooltip:\r\n _TL_('You’ve reached the maximum number of descriptions. Please remove one description if you’d like to add this recommended description.'),\r\n duplicateErrorMessage: _TL_('Duplicate descriptions are not allowed'),\r\n\r\n },\r\n};\r\n\r\nexport const getLongHeadlineAssetCollectionConfig = i18n => getTextAssetCollectionConfig('longHeadlines', i18n, collectionConfig);\r\n\r\nexport const getDescriptionAssetCollectionConfig = i18n => getTextAssetCollectionConfig('descriptions', i18n, collectionConfig);\r\n\r\nexport const getShortHeadlineAssetCollectionConfig = i18n => getTextAssetCollectionConfig('headlines', i18n, collectionConfig);\r\n\r\n","import React from 'react';\r\nimport PropTypes, { func } from 'prop-types';\r\nimport {\r\n Body1,\r\n Button,\r\n makeStyles,\r\n mergeClasses,\r\n shorthands,\r\n tokens,\r\n} from '@fluentui/react-components';\r\n\r\nconst useTextAssetPlaceholderStyles = makeStyles({\r\n root: {\r\n width: '100%',\r\n ...shorthands.borderStyle('solid'),\r\n ...shorthands.border(tokens.strokeWidthThin),\r\n ...shorthands.borderWidth(tokens.strokeWidthThin),\r\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\r\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n rowGap: tokens.spacingVerticalS,\r\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalM),\r\n\r\n '& > span': {\r\n textAlign: 'center',\r\n },\r\n },\r\n});\r\n\r\nexport const TextAssetPlaceholder = ({ i18n, placeholder, onEdit }) => {\r\n const classes = useTextAssetPlaceholderStyles();\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nAudienceBudgetBidStrategyInternal.protoTypes = {\r\n classes: PropTypes.shape({\r\n pickerContainer: PropTypes.string.isRequired,\r\n }).isRequired,\r\n data: PropTypes.shape({\r\n campaign: PropTypes.shape({\r\n Budget: PropTypes.shape({\r\n Amount: PropTypes.number,\r\n Id: PropTypes.number,\r\n Type: PropTypes.string,\r\n }),\r\n BiddingScheme: PropTypes.shape({\r\n Type: PropTypes.string,\r\n BidStrategyId: PropTypes.number,\r\n }),\r\n BidStrategyName: PropTypes.string,\r\n }),\r\n }).isRequired,\r\n updateValidation: PropTypes.func.isRequired,\r\n campaignType: PropTypes.string.isRequired,\r\n campaignSubType: PropTypes.string,\r\n isEnableMSANDisplayCampaignsEnabled: PropTypes.bool,\r\n isEnableMSANVideoCampaignsEnabled: PropTypes.bool,\r\n setBudgetView: PropTypes.func,\r\n hideBidStrategy: PropTypes.bool,\r\n activity: PropTypes.shape({\r\n signal: PropTypes.func,\r\n }),\r\n showBudgetTypeSelection: PropTypes.bool,\r\n allowBudgetTypeSelection: PropTypes.bool,\r\n allowSharedBudgetLibrarySelection: PropTypes.bool,\r\n};\r\n\r\nAudienceBudgetBidStrategyInternal.defaultProps = {\r\n campaignSubType: undefined,\r\n isEnableMSANDisplayCampaignsEnabled: false,\r\n isEnableMSANVideoCampaignsEnabled: false,\r\n setBudgetView: undefined,\r\n hideBidStrategy: false,\r\n activity: undefined,\r\n showBudgetTypeSelection: false,\r\n allowBudgetTypeSelection: true,\r\n allowSharedBudgetLibrarySelection: true,\r\n};\r\n\r\nexport const AudienceBudgetBidStrategy = withCustomValidation(withDefaultStyles(AudienceBudgetBidStrategyInternal, getBudgetStyles));\r\n","import {\r\n convertToLocalStyle,\r\n glyphIconStyle,\r\n helpbuttonStyle,\r\n uiblockerStyle,\r\n sharedBudgetGridWrapper,\r\n containerBudgetStyle,\r\n} from '@bingads-webui-campaign-react/common-styles';\r\n\r\nexport const getBudgetStyles = (_, { palette }) => ({\r\n '@global': {\r\n ...uiblockerStyle({ palette }),\r\n },\r\n pickerContainer: {\r\n ...containerBudgetStyle({ palette }),\r\n ...sharedBudgetGridWrapper({ palette }),\r\n ...convertToLocalStyle(glyphIconStyle({ palette })),\r\n ...convertToLocalStyle(helpbuttonStyle({ palette })),\r\n '& .displayNone': {\r\n display: 'none',\r\n },\r\n },\r\n budgetHeader: {\r\n marginBottom: 6,\r\n },\r\n});\r\n","import React, { useMemo, useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport { getBidTitleDetails } from '@bingads-webui-campaign-react/wizard-shared-components';\r\nimport { BudgetTypes } from '../../../common/constants';\r\n\r\nexport const BudgetBidStrategyDetails = ({ budget, biddingScheme }) => {\r\n const i18n = useContext(I18nContext);\r\n const serverContext = useContext(ServerContext);\r\n\r\n const {\r\n Amount,\r\n Id,\r\n Type,\r\n } = budget || {};\r\n\r\n const budgetTitleDetails = useMemo(() => {\r\n if (Id) {\r\n return i18n.getString(_TL_('Budget applied from shared library'));\r\n }\r\n\r\n if (Amount == null || Amount === 0) {\r\n return i18n.getString(_TL_('No budget selected'));\r\n }\r\n\r\n const currencyCode = serverContext.CurrentAccount.CurrencyCode;\r\n const currencySymbol = i18n.getCurrencySymbol(currencyCode);\r\n\r\n const individualBudget = i18n.getString(_TL_('Individual budget'));\r\n\r\n if (Type === BudgetTypes.LifetimeBudgetStandard) {\r\n return `${individualBudget}: ${currencySymbol}${Amount} ${i18n.getString(_TL_('campaign total'))}`;\r\n }\r\n\r\n return `${individualBudget}: ${currencySymbol}${Amount}/${i18n.getString(_TL_('day'))}`;\r\n }, [Amount, Id, Type, i18n, serverContext.CurrentAccount.CurrencyCode]);\r\n\r\n const bidStrategyDetails = useMemo(() =>\r\n `${i18n.getString(_TL_('Bid strategy'))}: ${getBidTitleDetails(i18n, biddingScheme)}`, [biddingScheme, i18n]);\r\n\r\n return (\r\n <>\r\n \r\n
\r\n setSharedBudgetRef(newRef)} />\r\n
\r\n {!hideBidStrategy &&\r\n \r\n
\r\n }\r\n \r\n {budgetTitleDetails}\r\n
\r\n \r\n {bidStrategyDetails}\r\n
\r\n \r\n );\r\n};\r\n\r\nBudgetBidStrategyDetails.propTypes = {\r\n budget: PropTypes.shape({\r\n Amount: PropTypes.number,\r\n Id: PropTypes.number,\r\n Type: PropTypes.string,\r\n }),\r\n biddingScheme: PropTypes.shape({\r\n Type: PropTypes.string,\r\n }),\r\n};\r\n\r\nBudgetBidStrategyDetails.defaultProps = {\r\n budget: {},\r\n biddingScheme: null,\r\n};\r\n","import React from 'react';\r\nimport _ from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport { CampaignGoalTypeBoostV2 } from '@bingads-webui-campaign-react/campaign-onboarding-v2';\r\n\r\nexport const CampaignGoal = ({ campaign }) => {\r\n const CampaignGoali18nMap = CampaignGoalTypeBoostV2;\r\n\r\n const campaignGoalText = _.result(\r\n _.find(campaign.CampaignSettings, i => _.has(i, 'CampaignObjectiveSettingType')),\r\n 'CampaignObjectiveSettingType'\r\n );\r\n\r\n return _.has(CampaignGoali18nMap, campaignGoalText) ? (\r\n {CampaignGoali18nMap[campaignGoalText]}\r\n ) : {_TL_('Campaign goal not set')};\r\n};\r\n\r\nCampaignGoal.propTypes = {\r\n campaign: PropTypes.shape({\r\n CampaignSettings: PropTypes.shape([]).isRequired,\r\n }).isRequired,\r\n};\r\n","import {\r\n audienceAssociationSectionStyle,\r\n commonDoubleListBoxStyle,\r\n convertToLocalStyle,\r\n glyphIconStyle,\r\n helpbuttonStyle,\r\n paginationStyle,\r\n searchboxStyle,\r\n uiblockerStyle,\r\n audienceModalStyles,\r\n audienceExpressionStyle,\r\n audienceCombinedListStyle,\r\n tableStyle,\r\n} from '@bingads-webui-campaign-react/common-styles';\r\nimport {\r\n audienceTargetsSettingsStyles,\r\n criterionSettingIndustryStyles,\r\n audienceBudgetBidsStyles,\r\n} from '@bingads-webui-campaign-react/campaign-adgroup-settings-shared-styles';\r\n\r\nexport const getBidAdjustmentStylesTargetStyles = (_, { palette }) => ({\r\n '@global': {\r\n ...uiblockerStyle({ palette }),\r\n ...audienceModalStyles({ palette }, { modalWidth: 500 }),\r\n ...audienceExpressionStyle(),\r\n ...audienceCombinedListStyle({ palette }),\r\n },\r\n pickerContainer: {\r\n ...criterionSettingIndustryStyles({ palette }, { targetGridWidth: 816 }),\r\n ...audienceAssociationSectionStyle({ palette }, { singleListBoxWidth: 450 }),\r\n ...audienceTargetsSettingsStyles({ palette }),\r\n ...audienceBudgetBidsStyles({ palette }),\r\n ...commonDoubleListBoxStyle({ palette }),\r\n ...paginationStyle({ palette }),\r\n ...tableStyle({ palette }),\r\n ...searchboxStyle({ palette }),\r\n ...convertToLocalStyle(glyphIconStyle({ palette })),\r\n ...convertToLocalStyle(helpbuttonStyle({ palette })),\r\n '& .statusEnabled_icon::before': {\r\n color: '#107c10',\r\n content: '\"\\\\ECCC\"',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n },\r\n '& .statusPaused_icon::before': { // Todo: find icons for status disabled etc.\r\n color: '#323130',\r\n content: '\"\\\\F6B0\"',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n },\r\n '& .statusExcluded_icon::before': { // Todo: find icons for status disabled etc.\r\n color: '#A80000',\r\n content: '\"\\\\E733\"',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n },\r\n },\r\n editTargetButtonContainer: {\r\n paddingBottom: '8px',\r\n },\r\n noTargetSelected: {\r\n marginRight: '5px',\r\n },\r\n hide: {\r\n display: 'none',\r\n },\r\n});\r\n","import React, { useContext, useCallback, useEffect, useMemo, useState } from 'react';\r\nimport _ from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { BidAdjustment } from '@bingads-webui-campaign/target-bid-adjustment';\r\nimport { AudienceTargetInfo } from '@bingads-webui-campaign/audience-target-info';\r\nimport { withCustomValidation } from '@bingads-webui-react/validation';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { modelToViewModelForLocationTargets } from '@bingads-webui-campaign-react/xandr-campaign';\r\nimport { ActivityContext } from '@bingads-webui-react/hoc-with-signal';\r\n\r\nimport { getBidAdjustmentStylesTargetStyles } from './styles/bid-adjustments-styles';\r\n\r\nconst criterionTypeToString = {\r\n JobFunction: _TL_('Job Function'),\r\n Industry: _TL_('Industry'),\r\n CompanyName: _TL_('Company'),\r\n Age: _TL_('Age'),\r\n Gender: _TL_('Gender'),\r\n Device: _TL_('Device'),\r\n Location: _TL_('Location'),\r\n Audience: _TL_('Audience'),\r\n};\r\n\r\nconst typeToValidationKey = {\r\n JobFunction: ['jobTargets', 'negativeJobTargets'],\r\n Industry: ['industry', 'negativeIndustry'],\r\n CompanyName: ['companyNameTargets', 'negativeCompanyNameTargets'],\r\n Age: ['ageRanges'],\r\n Gender: ['genderTypes'],\r\n Audience: ['audiences'],\r\n Location: ['locationTargets'],\r\n};\r\n\r\nconst criterionsToFetch = [\r\n 'AgeCriterion',\r\n 'GenderCriterion',\r\n 'CompanyNameCriterion',\r\n 'IndustryCriterion',\r\n 'JobFunctionCriterion',\r\n 'LocationCriterion',\r\n 'AudienceCriterion',\r\n];\r\n\r\nconst BidAdjustmentInternal = ({\r\n cid,\r\n data,\r\n aid,\r\n campaignId,\r\n adGroupId,\r\n updateValidation,\r\n}) => {\r\n const [bidAdjustmentRef, setBidAdjustmentRef] = useState();\r\n\r\n const { bundleCountries } = data;\r\n\r\n const activity = useContext(ActivityContext);\r\n\r\n const i18n = useContext(I18nContext);\r\n const classes = useDefaultStyles(getBidAdjustmentStylesTargetStyles);\r\n\r\n const currentLevelTargetInfo = useMemo(() => (new AudienceTargetInfo({\r\n resourceName: 'AdGroupCriterion',\r\n isForVNext: true,\r\n initAudienceAssociationView: true,\r\n })), []);\r\n\r\n const onChange = useCallback((changedKey) => {\r\n const updatedItems = currentLevelTargetInfo.getSnapshot(false);\r\n\r\n const targets = updatedItems.filter(({ CriterionType }) => (CriterionType === changedKey))\r\n .map(({ Id, Status, Criterion }) => ({ Id, status: Status, Criterion }));\r\n\r\n const negativeTargets = updatedItems.filter(({ CriterionType }) => (CriterionType === `Negative${changedKey}`))\r\n .map(({ Id, Status, Criterion }) => ({ Id, status: Status, Criterion }));\r\n\r\n const validationKeys = typeToValidationKey[changedKey];\r\n if (targets.length > 0 && negativeTargets.length > 0) {\r\n updateValidation([], { [validationKeys[0]]: [...targets], [validationKeys[1]]: [...negativeTargets] });\r\n } else if (negativeTargets.length > 0) {\r\n updateValidation([], { [validationKeys[1]]: [...negativeTargets] });\r\n } else if (changedKey === 'Audience') {\r\n const audiences = currentLevelTargetInfo.criterionsByType.Audience;\r\n updateValidation([], { audiences: [...audiences] });\r\n } else if (changedKey === 'Location') {\r\n const adjustedLocations = currentLevelTargetInfo.criterionsByType.Location;\r\n\r\n const modelForParsing = _.map(adjustedLocations, location => ({\r\n ...location,\r\n CriterionBid: {\r\n Multiplier: location.Criterion.BidAdjustment,\r\n },\r\n }));\r\n\r\n const location = modelToViewModelForLocationTargets({\r\n model: modelForParsing, adGroupId, bundleCountries, overrideOriginalBidAdjustment: true,\r\n });\r\n\r\n updateValidation([], { locationTargets: location.locationTargets });\r\n } else {\r\n updateValidation([], { [validationKeys[0]]: [...targets] });\r\n }\r\n\r\n if (activity) {\r\n activity.signal('onBidAdjustmentChanged');\r\n }\r\n }, [activity, adGroupId, bundleCountries, currentLevelTargetInfo, updateValidation]);\r\n\r\n useEffect(() => {\r\n if (bidAdjustmentRef) {\r\n bidAdjustmentRef.innerHTML = '';\r\n\r\n Promise.all([\r\n currentLevelTargetInfo.fetchCriterions(campaignId, adGroupId, criterionsToFetch),\r\n currentLevelTargetInfo.initializeWithhAdGroupAudience(campaignId, adGroupId),\r\n ]).then(() => {\r\n const allKeys = currentLevelTargetInfo.getAllNoneEmptyTypeKeys();\r\n\r\n _.each(allKeys, (key) => {\r\n currentLevelTargetInfo.off(`AdGroupCriterion${key}Changed`, () => onChange(key));\r\n const view = new BidAdjustment({\r\n currentLevelTargetInfo,\r\n isForVNext: true,\r\n campaignId,\r\n adGroupId,\r\n criterionTypes: [key],\r\n supportCashbackSettings: false,\r\n showExclusion: false,\r\n });\r\n\r\n view.render();\r\n\r\n const header = document.createElement('h5');\r\n header.innerHTML = i18n.getString(criterionTypeToString[key]);\r\n header.style.cssText = 'margin-top: 20px;';\r\n\r\n bidAdjustmentRef.append(header);\r\n bidAdjustmentRef.append(view.el);\r\n\r\n onChange(key);\r\n currentLevelTargetInfo.on(`AdGroupCriterion${key}Changed`, () => onChange(key));\r\n });\r\n });\r\n }\r\n }, [aid, bidAdjustmentRef, campaignId, adGroupId, cid, currentLevelTargetInfo, i18n, onChange]);\r\n\r\n return (\r\n \r\n ,\r\n };\r\n return updatedVideoStep;\r\n } else if (step.id === STEP_PATHS.NATIVE_AD) {\r\n if (adsType === AdFormat.Display) {\r\n const updatedStep = {\r\n ...step,\r\n view: props => ,\r\n repository: useVideoAdsRepository,\r\n},\r\n{\r\n id: STEP_PATHS.DISPLAY_AD,\r\n view: props => ,\r\n repository: useNativeAdRepository,\r\n},\r\n{\r\n id: STEP_PATHS.MULTI_NATIVE_AD,\r\n view: props => ,\r\n repository: useMultipleNativeAdsRepository,\r\n},\r\n{\r\n id: STEP_PATHS.MULTI_AD_MANAGER,\r\n view: props => ,\r\n repository: useNativeAdsManagerRepository,\r\n},\r\n{\r\n id: STEP_PATHS.AD_GROUP,\r\n view: props => ,\r\n repository: useAdGroupRepository,\r\n},\r\n{\r\n id: STEP_PATHS.CAMPAIGN_CREATION,\r\n view: props => ,\r\n repository: useCampaignRepository,\r\n},\r\n{\r\n id: STEP_PATHS.CAMPAIGN_EDIT,\r\n view: props => ,\r\n repository: useCampaignEditRepository,\r\n},\r\n{\r\n id: STEP_PATHS.SUMMARY,\r\n view: props => ,\r\n repository: useSummaryRepository,\r\n}];\r\n\r\nexport const getStepConfigMultiAdFormat = (permissions, wizardType, adsType = '', loadClipchampPlayer = null) => StepConfigMultiAdFormat.map((step) => {\r\n if (_.get(permissions, ['dynamic', 'ConversionAssociationWarning']) && editWizardTypeList.includes(wizardType) && step.id === STEP_PATHS.CAMPAIGN_EDIT\r\n ) {\r\n const mapStep = {\r\n ...step,\r\n machineOptions: {\r\n guards: {\r\n needsConfirming: context => getNeedConfirming(permissions, context),\r\n },\r\n },\r\n\r\n };\r\n return mapStep;\r\n } else if (step.id === STEP_PATHS.NATIVE_AD) {\r\n if (adsType === AdFormat.Display) {\r\n const updatedStep = {\r\n ...step,\r\n view: props => ,\r\n };\r\n return updatedStep;\r\n }\r\n\r\n return {\r\n ...step,\r\n view: props => ,\r\n };\r\n } else if (step.id === STEP_PATHS.VIDEO_AD) {\r\n const updatedVideoStep = {\r\n ...step,\r\n view: props => ,\r\n };\r\n return updatedVideoStep;\r\n }\r\n\r\n return step;\r\n});\r\n\r\nexport const StepConfigMultiAdFormat = [{\r\n id: STEP_PATHS.NATIVE_AD,\r\n view: props => ,\r\n repository: useSingleMultiAdFormatRepository,\r\n},\r\n{\r\n id: STEP_PATHS.MULTI_NATIVE_AD,\r\n view: props => ,\r\n repository: useMultiAdFormatRepository,\r\n},\r\n{\r\n id: STEP_PATHS.VIDEO_AD,\r\n view: props => ,\r\n repository: useVideoAdsRepository,\r\n},\r\n{\r\n id: STEP_PATHS.MULTI_AD_MANAGER,\r\n view: props => ,\r\n repository: useMultiAdFormatAdsManagerRepository,\r\n},\r\n{\r\n id: STEP_PATHS.AD_GROUP,\r\n view: props => ,\r\n repository: useAdGroupRepository,\r\n},\r\n{\r\n id: STEP_PATHS.CAMPAIGN_CREATION,\r\n view: props => ,\r\n repository: useCampaignRepository,\r\n},\r\n{\r\n id: STEP_PATHS.CAMPAIGN_EDIT,\r\n view: props => ,\r\n repository: useCampaignEditRepository,\r\n},\r\n{\r\n id: STEP_PATHS.SUMMARY,\r\n view: props => ,\r\n repository: useSummaryRepository,\r\n}];\r\n","import { useContext } from 'react';\r\nimport { useWizardService } from '@bingads-webui-react/wizard';\r\n\r\nexport const useNativeAdsManagerRepository = () => {\r\n const { state } = useWizardService();\r\n\r\n const load = () => new Promise((resolve) => {\r\n resolve(state.context.wizardData);\r\n });\r\n\r\n const save = useContext(() => Promise.resolve());\r\n\r\n return {\r\n load,\r\n save,\r\n };\r\n};\r\n","import { useContext } from 'react';\r\nimport { useWizardService } from '@bingads-webui-react/wizard';\r\n\r\nexport const useMultiAdFormatAdsManagerRepository = () => {\r\n const { state } = useWizardService();\r\n\r\n const load = () => new Promise((resolve) => {\r\n resolve(state.context.wizardData);\r\n });\r\n\r\n const save = useContext(() => Promise.resolve());\r\n\r\n return {\r\n load,\r\n save,\r\n };\r\n};\r\n","import React, { useMemo, useContext, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {\r\n Wizard,\r\n LayoutContainer,\r\n Layout,\r\n StepContainer,\r\n} from '@bingads-webui-react/wizard';\r\nimport {\r\n BusyBlocker,\r\n DefaultTemplate,\r\n CancelWizardDialog,\r\n ConfirmWizardDialog,\r\n} from '@bingads-webui-react/wizard-ui-library';\r\nimport { WizardPerfMarker } from '@bingads-webui-campaign/wizard-performance-marker';\r\nimport { Scenario, Activity } from '@bingads-webui-react/hoc-with-signal';\r\nimport { InstrumentationContext } from '@bingads-webui-react/hoc-with-instrumentation';\r\nimport { PerformanceMarkerProvider } from '@bingads-webui-campaign-react/performance-marker-provider';\r\nimport { withScope } from '@bingads-webui-react/scope-service';\r\nimport { MmpFetchProvider } from '@bingads-webui-campaign-react/xandr-campaign';\r\nimport { withRecommendationContext } from '@bingads-webui-campaign-react/perf-max-recommendation';\r\nimport { withPermissions } from '@bingads-webui-react/hoc-with-permissions';\r\nimport { setClarityTag } from '@bingads-webui-universal/clarity';\r\nimport { withLoggingContext } from '@bingads-webui-campaign-react/copilot-loggers';\r\nimport { useConfirmDialogConfigWithLogger } from '@bingads-webui-campaign-react/campaign-settings-wizard-v1-utils';\r\n\r\nimport { getFlow } from '../step-utils';\r\nimport {\r\n getStepConfig,\r\n getStepConfigMultiAdFormat,\r\n} from '../steps';\r\nimport { FLOWS_TO_FIRST_STEP } from '../step-constants';\r\n\r\nconst DisplayPlusWizardInternal = ({\r\n wizardType, flowType, routeToNavigateToWhenDone, initialWizardData, scope, perfMarker, permissions, children, adsType, loadClipchampPlayer,\r\n}) => {\r\n const instrumentation = useContext(InstrumentationContext);\r\n const isEnableMultiAdFormat = permissions && permissions.dynamic && permissions.dynamic.MultiAdFormat && !permissions.IsAmplifyEnabled;\r\n const isConversionAssociationWarningEnabled = permissions && permissions.dynamic && permissions.dynamic.ConversionAssociationWarning;\r\n\r\n const wizardPerfMarker = useMemo(() => (\r\n perfMarker.createChild(`DisplayPlusWizard-${wizardType}`)\r\n ), [perfMarker, wizardType]);\r\n\r\n const initialStep = FLOWS_TO_FIRST_STEP[flowType];\r\n\r\n const steps = useMemo(() => (isEnableMultiAdFormat ? getStepConfigMultiAdFormat(permissions, wizardType, adsType, loadClipchampPlayer) : getStepConfig(permissions, wizardType, adsType, loadClipchampPlayer)), [isEnableMultiAdFormat, permissions, wizardType, adsType, loadClipchampPlayer]);\r\n\r\n const config = useMemo(() => ({\r\n id: 'display-plus-wizard',\r\n initialStep,\r\n steps,\r\n initialFlowFactors: { flow: flowType },\r\n initialWizardData: {\r\n flow: flowType,\r\n ...initialWizardData,\r\n },\r\n getFlow: ({ flow }) => getFlow({ flow, permissions }),\r\n actions: {\r\n onDone: () => scope.save(routeToNavigateToWhenDone),\r\n onExited: () => scope.save(routeToNavigateToWhenDone),\r\n },\r\n loadClipchampPlayer,\r\n attachStepActivities: false,\r\n }), [flowType, initialStep, initialWizardData, permissions, routeToNavigateToWhenDone, scope, steps, adsType, loadClipchampPlayer]);\r\n\r\n useEffect(() => {\r\n setClarityTag({ DisplayPlusCampaigns: flowType });\r\n }, [flowType]);\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nDisplayPlusWizardInternal.propTypes = {\r\n siteMap: PropTypes.shape({}).isRequired,\r\n scope: PropTypes.shape({\r\n save: PropTypes.func.isRequired,\r\n }).isRequired,\r\n perfMarker: PropTypes.shape({\r\n createChild: PropTypes.func.isRequired,\r\n }).isRequired,\r\n wizardType: PropTypes.string.isRequired,\r\n flowType: PropTypes.string.isRequired,\r\n routeToNavigateToWhenDone: PropTypes.func.isRequired,\r\n initialWizardData: PropTypes.shape({}),\r\n permissions: PropTypes.shape({}).isRequired,\r\n children: PropTypes.node,\r\n adsType: PropTypes.string,\r\n};\r\n\r\nDisplayPlusWizardInternal.defaultProps = {\r\n initialWizardData: {},\r\n children: null,\r\n adsType: '',\r\n};\r\n\r\nexport const DisplayPlusWizard = withPermissions(withScope(withLoggingContext(withRecommendationContext(DisplayPlusWizardInternal))));\r\n","import React, { useContext, useCallback, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { useIsInternalUser } from '@bingads-webui-campaign-react/basic-context-utils';\r\nimport { Stack, PrimaryButton, DefaultButton } from '@fluentui/react';\r\nimport {\r\n useWizardService,\r\n getIsFirstStep,\r\n getIsLastStep,\r\n getCurrentStepId,\r\n matchStepState,\r\n STEP_STATES,\r\n WIZARD_EVENTS,\r\n} from '@bingads-webui-react/wizard';\r\nimport {\r\n Text,\r\n makeStyles,\r\n shorthands,\r\n tokens\r\n} from '@fluentui/react-components';\r\nimport { CancelButton } from '@bingads-webui-react/wizard-ui-library';\r\nimport { MessageBar, MessageBarTitle, MessageBarBody } from '@fluentui/react-message-bar';\r\nimport { ActivityContext } from '@bingads-webui-react/hoc-with-signal';\r\nimport { PermissionsContext } from '@bingads-webui-react/hoc-with-permissions';\r\nimport { STEP_PATHS, FLOWS } from '../step-constants';\r\nimport { useSkipAdCreationState } from '../common/use-skip-ad-creation';\r\n\r\nconst useStyles = makeStyles({\r\n warning: {\r\n ...shorthands.margin(tokens.spacingVerticalL, tokens.spacingVerticalNone),\r\n },\r\n});\r\n\r\n\r\nconst SaveAndPublish = () => {\r\n const i18n = useContext(I18nContext);\r\n\r\n const activity = useContext(ActivityContext);\r\n\r\n const { state, send } = useWizardService();\r\n const isBlocking = matchStepState(state, STEP_STATES.FETCHING) || matchStepState(state, STEP_STATES.LOADING) || matchStepState(state, STEP_STATES.SAVING);\r\n\r\n const onNextClicked = useCallback(() => {\r\n if (activity) {\r\n activity.signal('onSaveAndPublishClicked');\r\n }\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, { isPublishing: true });\r\n send(WIZARD_EVENTS.SAVE_AND_EXIT);\r\n }, [activity, send]);\r\n\r\n const buttonText = useMemo(() => {\r\n const currentStep = getCurrentStepId(state);\r\n\r\n if (currentStep === STEP_PATHS.SUMMARY) {\r\n return i18n.getString(_TL_('Go live'));\r\n }\r\n\r\n return i18n.getString(_TL_('Save & go live'));\r\n }, [i18n, state]);\r\n\r\n return (\r\n \r\n {buttonText}\r\n \r\n );\r\n};\r\n\r\nconst SaveAsDraft = () => {\r\n const i18n = useContext(I18nContext);\r\n\r\n const activity = useContext(ActivityContext);\r\n\r\n const { state, send } = useWizardService();\r\n const isBlocking = matchStepState(state, STEP_STATES.FETCHING) || matchStepState(state, STEP_STATES.LOADING) || matchStepState(state, STEP_STATES.SAVING);\r\n\r\n const onNextClicked = useCallback(() => {\r\n if (activity) {\r\n activity.signal('onSaveAsDraftClicked');\r\n }\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, { isPublishing: false });\r\n send(WIZARD_EVENTS.SAVE_AND_EXIT);\r\n }, [activity, send]);\r\n\r\n const buttonText = useMemo(() => {\r\n const currentStep = getCurrentStepId(state);\r\n\r\n if (currentStep === STEP_PATHS.SUMMARY) {\r\n return i18n.getString(_TL_('Don\\'t go live'));\r\n }\r\n\r\n return i18n.getString(_TL_('Save & don\\'t go live'));\r\n }, [i18n, state]);\r\n\r\n return (\r\n \r\n {buttonText}\r\n \r\n );\r\n};\r\n\r\nexport const SaveAndExitButton = () => {\r\n const i18n = useContext(I18nContext);\r\n\r\n const activity = useContext(ActivityContext);\r\n\r\n const { state, send } = useWizardService();\r\n const isBlocking = matchStepState(state, STEP_STATES.FETCHING) || matchStepState(state, STEP_STATES.LOADING) || matchStepState(state, STEP_STATES.SAVING);\r\n\r\n const onNextClicked = useCallback(() => {\r\n if (activity) {\r\n activity.signal('onSaveAndExitButtonClicked');\r\n }\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, { isAdGroupPublishing: true });\r\n send(WIZARD_EVENTS.SAVE_AND_EXIT);\r\n }, [activity, send]);\r\n\r\n return (\r\n \r\n {i18n.getString(_TL_('Save and exit'))}\r\n \r\n );\r\n};\r\n\r\nexport const SkipAdCreationButton = () => {\r\n const i18n = useContext(I18nContext);\r\n const activity = useContext(ActivityContext);\r\n const { state, send } = useWizardService();\r\n const [, setSkipAdCreation] = useSkipAdCreationState();\r\n const isBlocking = matchStepState(state, STEP_STATES.FETCHING)\r\n || matchStepState(state, STEP_STATES.LOADING)\r\n || matchStepState(state, STEP_STATES.SAVING);\r\n\r\n const onNextClicked = useCallback(() => {\r\n if (activity) {\r\n activity.signal('onSkipAdCreationButtonClicked');\r\n }\r\n send(WIZARD_EVENTS.SAVE_EMPTY_AND_NEXT);\r\n setSkipAdCreation(true);\r\n }, [activity, send, setSkipAdCreation]);\r\n\r\n return (\r\n \r\n {i18n.getString(_TL_('Proceed without ad'))}\r\n \r\n );\r\n};\r\n\r\nexport const NextButton = ({ buttonText, disabled }) => {\r\n const i18n = useContext(I18nContext);\r\n\r\n const { state, send } = useWizardService();\r\n const isBlocking = matchStepState(state, STEP_STATES.FETCHING) || matchStepState(state, STEP_STATES.LOADING) || matchStepState(state, STEP_STATES.SAVING);\r\n const currentStepId = getCurrentStepId(state);\r\n\r\n const onNextClicked = useCallback(() => {\r\n if (currentStepId === STEP_PATHS.MULTI_AD_MANAGER) {\r\n send(WIZARD_EVENTS.NAVIGATE_TO, { stepId: STEP_PATHS.AD_GROUP });\r\n } else {\r\n send(WIZARD_EVENTS.SAVE_AND_NEXT);\r\n }\r\n }, [currentStepId, send]);\r\n\r\n return (\r\n \r\n {buttonText ? i18n.getString(buttonText) : i18n.getString(_TL_('Next'))}\r\n \r\n );\r\n};\r\n\r\nexport const BackButton = ({ buttonText }) => {\r\n const i18n = useContext(I18nContext);\r\n\r\n const { state, send } = useWizardService();\r\n const isBlocking = matchStepState(state, STEP_STATES.FETCHING) || matchStepState(state, STEP_STATES.LOADING) || matchStepState(state, STEP_STATES.SAVING);\r\n const currentStepId = getCurrentStepId(state);\r\n\r\n const onBackClicked = useCallback(() => {\r\n if (currentStepId === STEP_PATHS.AD_GROUP && state.context.wizardData.flow === FLOWS.MULTI_AUDIENCE_CAMPAIGNS) {\r\n send(WIZARD_EVENTS.NAVIGATE_TO, { stepId: STEP_PATHS.MULTI_AD_MANAGER });\r\n } else {\r\n send(WIZARD_EVENTS.BACK);\r\n }\r\n }, [currentStepId, send, state.context.wizardData.flow]);\r\n\r\n return (\r\n \r\n {buttonText ? i18n.getString(buttonText) : i18n.getString(_TL_('Back'))}\r\n \r\n );\r\n};\r\nBackButton.propTypes = {\r\n buttonText: PropTypes.string,\r\n};\r\nBackButton.defaultProps = {\r\n buttonText: undefined,\r\n};\r\n\r\n\r\nNextButton.propTypes = {\r\n buttonText: PropTypes.string,\r\n disabled: PropTypes.bool,\r\n};\r\nNextButton.defaultProps = {\r\n buttonText: undefined,\r\n disabled: false,\r\n};\r\n\r\nexport const DisplayPlusStepFooter = ({\r\n nextButtonText,\r\n nextDisabled,\r\n backButtonText,\r\n cancelButtonText,\r\n hideBackButton,\r\n}) => {\r\n const { state } = useWizardService();\r\n const { dynamic: { AWFWebExclusionsWarning: showAWFWarning } } = useContext(PermissionsContext);\r\n const i18n = useContext(I18nContext);\r\n const styles = useStyles();\r\n const isFirstStep = getIsFirstStep(state);\r\n const isLastStep = getIsLastStep(state);\r\n\r\n const currentStep = getCurrentStepId(state);\r\n\r\n const isInternalUser = useIsInternalUser();\r\n const wasAdAlreadyCreated = state.context.wizardData.ads;\r\n\r\n return (\r\n <>\r\n {showAWFWarning && isLastStep && (\r\n \r\n \r\n )}\r\n \r\n {(isFirstStep && isInternalUser && !wasAdAlreadyCreated) && \r\n \r\n );\r\n};\r\nDisplayPlusStepFooter.propTypes = {\r\n nextButtonText: PropTypes.string,\r\n nextDisabled: PropTypes.bool,\r\n backButtonText: PropTypes.string,\r\n cancelButtonText: PropTypes.string,\r\n hideBackButton: PropTypes.bool,\r\n};\r\nDisplayPlusStepFooter.defaultProps = {\r\n nextButtonText: undefined,\r\n nextDisabled: false,\r\n backButtonText: undefined,\r\n cancelButtonText: undefined,\r\n hideBackButton: false,\r\n};\r\n","import React, { useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Stack } from '@fluentui/react';\r\nimport {\r\n SaveAndExitButton,\r\n CancelButton,\r\n} from '@bingads-webui-react/wizard-ui-library';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { MessageBar, MessageBarTitle, MessageBarBody } from '@fluentui/react-message-bar';\r\nimport {\r\n Text,\r\n makeStyles,\r\n shorthands,\r\n tokens\r\n} from '@fluentui/react-components';\r\nimport { PermissionsContext } from '@bingads-webui-react/hoc-with-permissions';\r\n\r\n\r\nconst useStyles = makeStyles({\r\n warning: {\r\n ...shorthands.margin(tokens.spacingVerticalL, tokens.spacingVerticalNone),\r\n },\r\n});\r\n\r\nexport const EditFooter = ({\r\n saveAndExitButtonText,\r\n cancelButtonText,\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n const styles = useStyles();\r\n const { dynamic: { AWFWebExclusionsWarning: showAWFWarning } } = useContext(PermissionsContext);\r\n\r\n return (\r\n <>\r\n {showAWFWarning && (\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nEditFooter.propTypes = {\r\n saveAndExitButtonText: PropTypes.string,\r\n cancelButtonText: PropTypes.string,\r\n};\r\n\r\nEditFooter.defaultProps = {\r\n saveAndExitButtonText: undefined,\r\n cancelButtonText: undefined,\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Stack } from '@fluentui/react';\r\nimport {\r\n useWizardService,\r\n getIsFirstStep,\r\n getIsLastStep,\r\n getCurrentStepId,\r\n} from '@bingads-webui-react/wizard';\r\nimport { CancelButton } from '@bingads-webui-react/wizard-ui-library';\r\nimport { BackButton, NextButton, SaveAndExitButton } from './footer';\r\nimport { STEP_PATHS } from '../step-constants';\r\n\r\nexport const AdGroupCreationFooter = ({\r\n nextButtonText,\r\n backButtonText,\r\n cancelButtonText,\r\n}) => {\r\n const { state } = useWizardService();\r\n const isFirstStep = getIsFirstStep(state);\r\n const isLastStep = getIsLastStep(state);\r\n\r\n const currentStep = getCurrentStepId(state);\r\n\r\n return (\r\n \r\n {isFirstStep && \r\n );\r\n};\r\nAdGroupCreationFooter.propTypes = {\r\n nextButtonText: PropTypes.string,\r\n backButtonText: PropTypes.string,\r\n cancelButtonText: PropTypes.string,\r\n};\r\n\r\nAdGroupCreationFooter.defaultProps = {\r\n nextButtonText: undefined,\r\n backButtonText: undefined,\r\n cancelButtonText: undefined,\r\n};\r\n","import _ from 'underscore';\r\nimport React, { useMemo, useCallback, useContext } from 'react';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { Constants } from '@bingads-webui-theme-2018/theme-fluent';\r\nimport { ResponsiveStepList } from '@bingads-webui-react/step-progress-indicator';\r\nimport { useResponsiveSize } from '@bingads-webui-react/with-responsive-size';\r\nimport {\r\n useWizardService,\r\n getCurrentStepId,\r\n getCurrentFlow,\r\n WIZARD_EVENTS,\r\n} from '@bingads-webui-react/wizard';\r\n\r\nimport { getStepListConfig } from './steps';\r\n\r\nexport const StepList = () => {\r\n const { state, send } = useWizardService();\r\n const i18n = useContext(I18nContext);\r\n\r\n const currentStepId = getCurrentStepId(state);\r\n const currentFlow = getCurrentFlow(state);\r\n const displayMode = useResponsiveSize(Constants.ResponsiveSizeBreakpoints);\r\n const { flow } = state.context.wizardData;\r\n\r\n const stepListConfig = useMemo(() => getStepListConfig({ i18n, flow, currentStepId }), [currentStepId, flow, i18n]);\r\n\r\n const getDefaultOnItemClickFn = useCallback((step) => {\r\n let toStep;\r\n if (currentFlow.includes(step.id)) {\r\n toStep = step;\r\n } else if (!_.isEmpty(step.steps)) {\r\n const firstSubStep = _.find(step.steps, s => currentFlow.includes(s.id));\r\n if (firstSubStep) {\r\n toStep = firstSubStep;\r\n }\r\n }\r\n if (toStep && toStep.isBehind) {\r\n return () => {\r\n send(WIZARD_EVENTS.NAVIGATE_TO, {\r\n stepId: toStep.id,\r\n });\r\n };\r\n }\r\n return undefined;\r\n }, [currentFlow, send]);\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nBidAdjustmentInternal.propTypes = {\r\n updateValidation: PropTypes.func.isRequired,\r\n cid: PropTypes.string.isRequired,\r\n aid: PropTypes.string.isRequired,\r\n campaignId: PropTypes.string.isRequired,\r\n adGroupId: PropTypes.string.isRequired,\r\n data: PropTypes.shape({\r\n bundleCountries: PropTypes.arrayOf(PropTypes.shape([])),\r\n }).isRequired,\r\n};\r\n\r\nexport const ValidatedBidAdjustment = withCustomValidation(BidAdjustmentInternal);\r\n","import PropTypes from 'prop-types';\r\nimport React from 'react';\r\nimport { Checkbox } from '@bingads-webui-react/checkbox';\r\n\r\nexport const CallToActionOptOut = (props) => {\r\n const {\r\n i18n,\r\n data,\r\n onDataChange,\r\n } = props;\r\n\r\n const isCallToActionOptOut = data.campaign.IsCallToActionOptOut;\r\n\r\n const onCheckedChange = (event) => {\r\n const { checked } = event.target;\r\n onDataChange({\r\n data: {\r\n ...data,\r\n campaign: {\r\n ...data.campaign,\r\n IsCallToActionOptOut: !checked,\r\n },\r\n },\r\n isValid: true,\r\n });\r\n };\r\n\r\n return (\r\n \r\n
\r\n setBidAdjustmentRef(newRef)} />\r\n
\r\n \r\n \r\n {i18n.getString(_TL_('Enable calls to action for Native ads'))}\r\n \r\n
\r\n );\r\n};\r\n\r\nCallToActionOptOut.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n};\r\n","import React, { useState, useEffect, useRef, useCallback } from 'react';\r\nimport { AdsCampaignDisclaimers } from '@bingads-webui-campaign-react/ads-campaign-disclaimers';\r\nimport { withCustomValidation } from '@bingads-webui-react/validation';\r\n\r\nexport const getAssociatedDisclaimer = (campaignId, repository) => (campaignId ? repository.association.findAll({\r\n where: {\r\n campaignId,\r\n },\r\n}).then((disclaimerdata) => {\r\n if (disclaimerdata && disclaimerdata.length > 0) {\r\n return disclaimerdata[0];\r\n }\r\n return null;\r\n}) : Promise.resolve(null));\r\n\r\nconst DisclaimerExtensionInternal = (props) => {\r\n const {\r\n className,\r\n updateValidation,\r\n campaignId,\r\n repository,\r\n validationProps,\r\n ...rest\r\n } = props;\r\n\r\n const displayPlusDisclaimerRef = useRef(null);\r\n const { data } = validationProps || {};\r\n const { DisclaimerAdsEnabled, associatedDisclaimer } = data || {};\r\n\r\n const onDataChange = useCallback(() => {\r\n const result = displayPlusDisclaimerRef.current.getValues();\r\n const error = displayPlusDisclaimerRef.current.validateAndWarn();\r\n // If no disclaimer is associated, update the change to the outside\r\n if (!result.AdExtensionAssociations || result.AdExtensionAssociations.length === 0) {\r\n result.AdExtensionAssociations = null;\r\n }\r\n updateValidation(error ? [error] : [], result);\r\n }, [updateValidation]);\r\n\r\n const [disclaimerAdsEnabled, setDisClaimerAdsEnabled] = useState(DisclaimerAdsEnabled);\r\n\r\n useEffect(() => {\r\n setDisClaimerAdsEnabled(DisclaimerAdsEnabled);\r\n }, [DisclaimerAdsEnabled]);\r\n\r\n const onDisclaimerCheckboxChange = (value) => {\r\n setDisClaimerAdsEnabled(value);\r\n };\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport const ValidatedDisclaimerExtension = withCustomValidation(DisclaimerExtensionInternal);\r\n\r\n","// TODO: Update key value when available - Task 8947815: Update info popup key\r\nexport const dateManagementInfoKey = 'pop_BA_CampaignCreate_Budget_BidStrategy';\r\n\r\nexport const dateSettingsManageAtAdGroupLevelText = _TL_('Start and end dates are managed at the ad group level.');\r\n","import React, { useContext, useMemo } from 'react';\r\nimport _ from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport { ChoiceGroup } from '@fluentui/react';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { withCustomValidation } from '@bingads-webui-react/validation';\r\n\r\nimport { InfoLabel } from '../info-label';\r\n\r\nconst getStyles = () =>\r\n ({\r\n dateManagementSelectorContainer: {\r\n '& .ms-ChoiceField': {\r\n '& .ms-ChoiceField-input': {\r\n position: 'absolute',\r\n opacity: 0,\r\n top: 0,\r\n right: 0,\r\n width: '100%',\r\n height: '100%',\r\n margin: 0,\r\n },\r\n '& .ms-ChoiceField-field': {\r\n padding: 0,\r\n marginRight: 8,\r\n '& .ms-ChoiceFieldLabel': {\r\n verticalAlign: 'baseline',\r\n fontWeight: 400,\r\n },\r\n },\r\n },\r\n },\r\n });\r\n\r\nconst DATE_MANAGEMENT_OPTIONS = {\r\n CampaignLevel: {\r\n value: 'campaignLevel',\r\n label: _TL_('Campaign level'),\r\n },\r\n AdGroupLevel: {\r\n value: 'adGroupLevel',\r\n label: _TL_('Ad group level'),\r\n },\r\n};\r\n\r\nexport const DateManagementSelector = (props) => {\r\n const i18n = useContext(I18nContext);\r\n const classes = useDefaultStyles(getStyles);\r\n\r\n const {\r\n value,\r\n onChange,\r\n isEnabled,\r\n } = props;\r\n\r\n const selectionValue = value ? DATE_MANAGEMENT_OPTIONS.CampaignLevel.value : DATE_MANAGEMENT_OPTIONS.AdGroupLevel.value;\r\n\r\n const options = useMemo(() => _.values(DATE_MANAGEMENT_OPTIONS).map(option => ({\r\n key: option.value,\r\n text: i18n.getString(option.label),\r\n ariaLabel: i18n.getString(option.label),\r\n disabled: !isEnabled,\r\n })), [i18n, isEnabled]);\r\n\r\n return (\r\n \r\n onChange({ UseCampaignLevelDates: data.key === DATE_MANAGEMENT_OPTIONS.CampaignLevel.value })}\r\n />\r\n
\r\n );\r\n};\r\n\r\nDateManagementSelector.propTypes = {\r\n value: PropTypes.bool,\r\n onChange: PropTypes.func.isRequired,\r\n isEnabled: PropTypes.bool,\r\n};\r\n\r\nDateManagementSelector.defaultProps = {\r\n value: false,\r\n isEnabled: true,\r\n};\r\n\r\nexport const ValidatedDateManagementSelector = withCustomValidation(DateManagementSelector);\r\n","import React, { useContext } from 'react';\r\nimport { makeStyles } from '@fluentui/react-components';\r\nimport { MessageBar, MessageBarBody } from '@fluentui/react-message-bar';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\n\r\nimport { dateSettingsManageAtAdGroupLevelText } from './constants';\r\n\r\nconst useStyles = makeStyles({\r\n messageBar: {\r\n marginTop: '10px',\r\n },\r\n});\r\n\r\nexport const DateManagementInfo = () => {\r\n const i18n = useContext(I18nContext);\r\n const classes = useStyles();\r\n\r\n return (\r\n <>\r\n \r\n \r\n \r\n {i18n.getString(dateSettingsManageAtAdGroupLevelText)}\r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n","import React, { useMemo, useContext, useEffect } from 'react';\r\nimport _ from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport { makeStyles } from '@fluentui/react-components';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { LegacyDateSetting, validateDate, getCurrentDate } from '@bingads-webui-campaign/date-setting';\r\nimport { ActivityContext } from '@bingads-webui-react/hoc-with-signal';\r\nimport { withCustomValidation, withError } from '@bingads-webui-react/validation';\r\n\r\nimport { DateManagementSelector } from './date-management-selector';\r\nimport { DateManagementInfo } from './date-management-info';\r\nimport { BudgetTypes } from '../../../../common/constants';\r\nimport { validateLifetimeBudgetDateRange } from './utils';\r\n\r\nconst useStyles = makeStyles({\r\n dateManagementSelector: {\r\n marginBottom: '16px',\r\n },\r\n});\r\n\r\nexport const AudienceDateSetting = ({\r\n validationProps,\r\n updateValidation,\r\n isEditFlow,\r\n displayDateManagementSelector,\r\n allowDateManagementSelection,\r\n ...restProps\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n const activity = useContext(ActivityContext);\r\n const classes = useStyles();\r\n\r\n const { data } = validationProps;\r\n\r\n const {\r\n StartDate,\r\n EndDate,\r\n UseCampaignLevelDates,\r\n BudgetType,\r\n } = data;\r\n\r\n const currentDate = getCurrentDate();\r\n\r\n const validateLifetimeBudgetDateSettings = (newData, errors) => {\r\n if (BudgetType === BudgetTypes.LifetimeBudgetStandard) {\r\n const budgetRangeError = validateLifetimeBudgetDateRange(newData, i18n);\r\n\r\n if (budgetRangeError) {\r\n errors.push(budgetRangeError);\r\n }\r\n }\r\n };\r\n\r\n const validate = (newData) => {\r\n const validationError = validateDate(newData, i18n);\r\n\r\n validateLifetimeBudgetDateSettings(newData, validationError);\r\n\r\n updateValidation(validationError, newData);\r\n };\r\n\r\n const logActivity = (action, newData) => {\r\n if (activity) {\r\n activity.signal(`${action} - ${JSON.stringify(newData)}`);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n const validationErrors = [];\r\n\r\n validateLifetimeBudgetDateSettings(data, validationErrors);\r\n\r\n updateValidation(validationErrors);\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [BudgetType]);\r\n\r\n\r\n const onDateChange = (newData) => {\r\n const amendedData = {\r\n ...newData,\r\n UseCampaignLevelDates,\r\n };\r\n\r\n validate(amendedData);\r\n\r\n logActivity('onLegacyDateSettingChange', amendedData);\r\n };\r\n\r\n const onDateManagementChange = (newData) => {\r\n const amendedData = {\r\n ...newData,\r\n StartDate,\r\n EndDate,\r\n };\r\n\r\n validate(amendedData);\r\n\r\n logActivity('onDateManagementChange', amendedData);\r\n };\r\n\r\n const dateSettingWithDefaultStartDate = useMemo(() => _.defaults(data, {\r\n StartDate: currentDate,\r\n }), [currentDate, data]);\r\n\r\n return (\r\n \r\n {displayDateManagementSelector &&\r\n
\r\n );\r\n};\r\n\r\nAudienceDateSetting.propTypes = {\r\n validationProps: PropTypes.shape({\r\n data: PropTypes.shape({\r\n StartDate: PropTypes.instanceOf(Date),\r\n EndDate: PropTypes.instanceOf(Date),\r\n UseCampaignLevelDates: PropTypes.bool,\r\n BudgetType: PropTypes.string,\r\n }),\r\n }).isRequired,\r\n updateValidation: PropTypes.func.isRequired,\r\n displayDateManagementSelector: PropTypes.bool,\r\n allowDateManagementSelection: PropTypes.bool,\r\n isEditFlow: PropTypes.bool,\r\n};\r\n\r\nAudienceDateSetting.defaultProps = {\r\n displayDateManagementSelector: false,\r\n allowDateManagementSelection: true,\r\n isEditFlow: false,\r\n};\r\n\r\nexport const ValidatedAudienceDateSetting = withError(withCustomValidation(AudienceDateSetting));\r\n","import { getDateSettingDetails, numberOfDaysBetweenDates } from '@bingads-webui-campaign/date-setting';\r\n\r\nimport { dateSettingsManageAtAdGroupLevelText } from './constants';\r\n\r\nexport const validateLifetimeBudgetDateRange = (newData, i18n) => {\r\n const MAX_DATE_RANGE = 365;\r\n\r\n const { StartDate, EndDate } = newData || {};\r\n\r\n if (StartDate && EndDate && numberOfDaysBetweenDates(StartDate, EndDate) > MAX_DATE_RANGE) {\r\n return i18n.getString(_TL_('The maximum campaign total budget duration is {0} days.')).replace('{0}', MAX_DATE_RANGE);\r\n }\r\n\r\n return null;\r\n};\r\n\r\nexport const getAudienceDateSettingsDetails = ({\r\n i18n, isEdit, dateSettings, isLifetimeBudgetFeatureEnabled,\r\n}) => {\r\n const {\r\n UseCampaignLevelDates,\r\n StartDate,\r\n EndDate,\r\n } = dateSettings;\r\n\r\n if (!UseCampaignLevelDates && isEdit) {\r\n return i18n.getString(dateSettingsManageAtAdGroupLevelText);\r\n }\r\n\r\n return getDateSettingDetails(i18n, StartDate, EndDate, UseCampaignLevelDates, isLifetimeBudgetFeatureEnabled);\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { WebsiteListSelector } from '@bingads-webui-campaign-react/website-list-selector';\r\n\r\nexport const WebsiteLists = ({\r\n selectedExclusions = [],\r\n onExclusionsChange = () => {},\r\n}) => (\r\n \r\n
\r\n }\r\n {(UseCampaignLevelDates || !isEditFlow) ?\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nCampaignStepShell.propTypes = {\r\n data: PropTypes.shape({\r\n adGroup: PropTypes.shape({\r\n Id: PropTypes.number,\r\n UseOptimizedTargeting: PropTypes.bool,\r\n BiddingScheme: PropTypes.shape({\r\n Type: PropTypes.string,\r\n }),\r\n campaignLevelDeviceTargets: PropTypes.arrayOf(PropTypes.shape({\r\n Id: PropTypes.number,\r\n Type: PropTypes.string,\r\n })),\r\n }),\r\n campaign: PropTypes.shape({\r\n Id: PropTypes.number,\r\n Budget: PropTypes.shape({\r\n Type: PropTypes.string,\r\n Amount: PropTypes.number,\r\n }),\r\n StartDate: PropTypes.string,\r\n EndDate: PropTypes.string,\r\n UseCampaignLevelDates: PropTypes.bool,\r\n TrackingUrlTemplate: PropTypes.string,\r\n FinalUrlSuffix: PropTypes.string,\r\n UrlCustomParameters: PropTypes.string,\r\n campaignLevelDeviceTargets: PropTypes.arrayOf(PropTypes.shape({\r\n Id: PropTypes.number,\r\n Type: PropTypes.string,\r\n })),\r\n }),\r\n exclusions: PropTypes.shape({\r\n campaignExclusions: PropTypes.shape({\r\n [webExclusionPropertyVal]: PropTypes.arrayOf(PropTypes.shape({\r\n Id: PropTypes.number,\r\n Type: PropTypes.string,\r\n })),\r\n }),\r\n }),\r\n websiteExclusionLists: PropTypes.arrayOf(PropTypes.shape({\r\n Id: PropTypes.number,\r\n })),\r\n }),\r\n onDataChange: PropTypes.func.isRequired,\r\n error: PropTypes.arrayOf(PropTypes.shape({\r\n property: PropTypes.string,\r\n message: PropTypes.string,\r\n })),\r\n};\r\n\r\nCampaignStepShell.defaultProps = {\r\n data: null,\r\n error: [],\r\n};\r\n","export const AdGroupNegativeReferenceId = -111;\r\n\r\nconst getTargetCriterion = ({\r\n targets,\r\n type,\r\n propKey,\r\n adGroupViewModel,\r\n campaignViewModel,\r\n overrideType = undefined,\r\n}) => targets.map((target) => {\r\n const criterion = {\r\n Type: overrideType || type,\r\n BidAdjustment: target.Criterion.BidAdjustment,\r\n [`${overrideType || type}Criterion`]: {\r\n [propKey]: target.Criterion.Target,\r\n },\r\n };\r\n if (adGroupViewModel.data.Id) {\r\n return {\r\n Id: target.Id,\r\n Status: target.status ? target.status : 'Active',\r\n Criterion: criterion,\r\n CriterionType: type,\r\n AdGroup: {\r\n Id: adGroupViewModel.data.Id,\r\n },\r\n CampaignName: campaignViewModel.Name,\r\n };\r\n }\r\n return {\r\n Criterion: criterion,\r\n CriterionType: type,\r\n AdGroupName: adGroupViewModel.data.Name,\r\n CampaignName: campaignViewModel.Name,\r\n AdGroup: {\r\n Id: AdGroupNegativeReferenceId,\r\n },\r\n };\r\n});\r\n\r\n// in this view model to bulk model for targets\r\n// in addition to the criterion, we also add the bid adjustment value for each criterion.\r\n// the structure of this is a an object compared to xandr's array of criterions.\r\nexport const viewModelToBulkModelForBidAdjustmentUI = ({ adGroupViewModel, campaignViewModel }) => {\r\n // ageRanges\r\n const ageTargets = adGroupViewModel.data.ageRanges || [];\r\n const negativeAgeRanges = adGroupViewModel.data.negativeAgeRanges || [];\r\n const genderTypes = adGroupViewModel.data.genderTypes || [];\r\n const negativeGenderTypes = adGroupViewModel.data.negativeGenderTypes || [];\r\n const jobTargets = adGroupViewModel.data.jobTargets || [];\r\n const negativeJobTargets = adGroupViewModel.data.negativeJobTargets || [];\r\n const industryTargets = adGroupViewModel.data.industry || [];\r\n const negativeIndustryTargets = adGroupViewModel.data.negativeIndustry || [];\r\n const companyNameTargets = adGroupViewModel.data.companyNameTargets || [];\r\n const negativeCompanyNameTargets = adGroupViewModel.data.negativeCompanyNameTargets || [];\r\n\r\n\r\n const ageTargetCriterions = getTargetCriterion({\r\n targets: ageTargets,\r\n type: 'Age',\r\n propKey: 'Target',\r\n adGroupViewModel,\r\n campaignViewModel,\r\n });\r\n\r\n const negativeAgeTargetCriterions = getTargetCriterion({\r\n targets: negativeAgeRanges,\r\n type: 'NegativeAge',\r\n propKey: 'Target',\r\n adGroupViewModel,\r\n campaignViewModel,\r\n });\r\n\r\n const genderTargetCriterions = getTargetCriterion({\r\n targets: genderTypes,\r\n type: 'Gender',\r\n propKey: 'Target',\r\n adGroupViewModel,\r\n campaignViewModel,\r\n });\r\n\r\n const negativeGenderTargetCriterions = getTargetCriterion({\r\n targets: negativeGenderTypes,\r\n type: 'NegativeGender',\r\n propKey: 'Target',\r\n adGroupViewModel,\r\n campaignViewModel,\r\n });\r\n\r\n const jobTargetCriterions = getTargetCriterion({\r\n targets: jobTargets,\r\n type: 'JobFunction',\r\n propKey: 'Target',\r\n adGroupViewModel,\r\n campaignViewModel,\r\n });\r\n\r\n const negativeJobTargetCriterions = getTargetCriterion({\r\n targets: negativeJobTargets,\r\n type: 'NegativeJobFunction',\r\n propKey: 'Target',\r\n adGroupViewModel,\r\n campaignViewModel,\r\n });\r\n\r\n const industryTargetCriterions = getTargetCriterion({\r\n targets: industryTargets,\r\n type: 'Industry',\r\n propKey: 'Target',\r\n adGroupViewModel,\r\n campaignViewModel,\r\n });\r\n\r\n const negativeIndustryTargetCriterions = getTargetCriterion({\r\n targets: negativeIndustryTargets,\r\n type: 'NegativeIndustry',\r\n propKey: 'Target',\r\n adGroupViewModel,\r\n campaignViewModel,\r\n });\r\n\r\n const companyNameTargetCriterions = getTargetCriterion({\r\n targets: companyNameTargets,\r\n type: 'CompanyName',\r\n propKey: 'Target',\r\n adGroupViewModel,\r\n campaignViewModel,\r\n });\r\n\r\n const negativeCompanyNameTargetCriterions = getTargetCriterion({\r\n targets: negativeCompanyNameTargets,\r\n type: 'NegativeCompanyName',\r\n propKey: 'Target',\r\n adGroupViewModel,\r\n campaignViewModel,\r\n });\r\n\r\n return [\r\n ...ageTargetCriterions,\r\n ...negativeAgeTargetCriterions,\r\n ...genderTargetCriterions,\r\n ...negativeGenderTargetCriterions,\r\n ...jobTargetCriterions,\r\n ...negativeJobTargetCriterions,\r\n ...industryTargetCriterions,\r\n ...negativeIndustryTargetCriterions,\r\n ...companyNameTargetCriterions,\r\n ...negativeCompanyNameTargetCriterions,\r\n ];\r\n};\r\n","import Promise from 'bluebird';\r\nimport _ from 'underscore';\r\nimport { useContext } from 'react';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { useWizardService, WIZARD_EVENTS } from '@bingads-webui-react/wizard';\r\nimport {\r\n loadCampaign,\r\n loadAdGroup,\r\n modelToViewModelForAdGroup,\r\n modelToViewModelForCampaign,\r\n getErrorsPlaceholders,\r\n saveAdGroup,\r\n loadBundleCountries,\r\n saveCampaign,\r\n readAudienceCriterions,\r\n readTargetingCriterions,\r\n readLocationCriterions,\r\n} from '@bingads-webui-campaign-react/xandr-campaign';\r\nimport { ScopeContext } from '@bingads-webui-react/scope-service';\r\nimport { ActivityContext, ScenarioContext } from '@bingads-webui-react/hoc-with-signal';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport { viewModelToBulkModelForDisclaimerAssociation } from '@bingads-webui-campaign-react/ads-campaign-disclaimers';\r\nimport { getVerifiedTrackingSettingWrite as viewModelToBulkModelForVerifiedTrackingSettings } from '@bingads-webui-campaign-react/third-party-measurement';\r\nimport { modelConstraints } from '@bingads-webui-campaign-react/xandr-video-campaign-shared-components';\r\n\r\nimport { viewModelToBulkModelForBidAdjustmentUI } from '../../shared/model/adgroup-criterions-with-bid-adjustment';\r\nimport { isAudience, shouldEnableBidAdjustment, isDealCampaign, isCTVOrDeal } from '../../step-constants';\r\nimport { readDayTimeCriterions, viewModelToBulkModelForAdSchedules } from '../../shared/model/campaign-criterion';\r\n\r\nexport const useCampaignRepository = () => {\r\n const i18n = useContext(I18nContext);\r\n const { state, send } = useWizardService();\r\n\r\n const { scope } = useContext(ScopeContext) || {};\r\n const serverContext = useContext(ServerContext);\r\n const scenarioContext = useContext(ScenarioContext);\r\n\r\n const activity = useContext(ActivityContext);\r\n\r\n\r\n const { cid, aid } = scope.values;\r\n\r\n const {\r\n flow, isPublishing, isDefaultCampaignStepModel, deal,\r\n } = state.context.wizardData;\r\n\r\n const load = () => {\r\n const savedCampaign = state.context.wizardData.campaign;\r\n const savedAdGroup = state.context.wizardData.adGroup;\r\n\r\n const adGroupId = savedAdGroup ? savedAdGroup.Id : null;\r\n const campaignId = savedCampaign ? savedCampaign.Id : null;\r\n\r\n let loadPromises = {\r\n adGroup: loadAdGroup(cid, aid, campaignId, adGroupId),\r\n campaign: loadCampaign(cid, aid, campaignId),\r\n bundleCountriesAndLocationCriterions: loadBundleCountries({\r\n cid,\r\n aid,\r\n serverContext,\r\n }),\r\n targetCriterions: readTargetingCriterions({\r\n cid, aid, campaignId, adGroupId,\r\n }),\r\n audienceCriterions: readAudienceCriterions({\r\n cid, aid, campaignId, adGroupId,\r\n }),\r\n dayTimeCriterions: readDayTimeCriterions({\r\n cid, aid, campaignId,\r\n }),\r\n };\r\n\r\n if (isDealCampaign(flow)) {\r\n loadPromises = _.extend(loadPromises, {\r\n locationCriterions: readLocationCriterions({\r\n cid, aid, campaignId, adGroupId,\r\n }),\r\n });\r\n }\r\n\r\n return Promise.props(loadPromises).then(({\r\n adGroup,\r\n campaign,\r\n bundleCountriesAndLocationCriterions,\r\n audienceCriterions,\r\n targetCriterions,\r\n dayTimeCriterions,\r\n locationCriterions,\r\n }) => {\r\n const adGroupData = modelToViewModelForAdGroup({\r\n adGroupModel: adGroup,\r\n campaignModel: campaign,\r\n i18n,\r\n audienceCriterionsModel: audienceCriterions ? audienceCriterions.value : [],\r\n targetCriterionsModel: targetCriterions ? targetCriterions.value : [],\r\n isAudienceAds: isAudience(flow),\r\n ...isDealCampaign(flow) ? {\r\n locationCriterionsModel: locationCriterions ? locationCriterions.value : [],\r\n bundleCountries: bundleCountriesAndLocationCriterions.bundleCountries,\r\n } : {},\r\n });\r\n\r\n const campaignData = modelToViewModelForCampaign({\r\n campaignModel: campaign,\r\n dayTimeCriterionsModel: dayTimeCriterions ? dayTimeCriterions.value : [],\r\n });\r\n\r\n if (isDefaultCampaignStepModel && !isCTVOrDeal(flow)) {\r\n adGroupData.data.StartDate = new Date();\r\n campaignData.data.StartDate = new Date();\r\n }\r\n\r\n let constraintAdGroupModel = Promise.resolve(adGroupData.data);\r\n\r\n if (isDealCampaign(flow) && deal) {\r\n constraintAdGroupModel = modelConstraints(deal, adGroupData.data, serverContext);\r\n }\r\n\r\n\r\n return constraintAdGroupModel.then((adGroupModel) => {\r\n const data = {\r\n adGroup: adGroupModel,\r\n campaign: campaignData.data,\r\n ...bundleCountriesAndLocationCriterions,\r\n ...getErrorsPlaceholders(),\r\n dealDetails: deal,\r\n };\r\n\r\n return data;\r\n });\r\n });\r\n };\r\n\r\n const allSettledPromiseWrapper = (promises) => {\r\n const wrappedPromises = promises.map(p => Promise.resolve(p)\r\n .then(\r\n val => ({ status: 'fulfilled', value: val }),\r\n err => ({ status: 'rejected', reason: err })\r\n ));\r\n return Promise.all(wrappedPromises);\r\n };\r\n\r\n const save = ({ data }) => {\r\n const {\r\n adGroup, campaign, bundleCountries, bundleLocationCriterions,\r\n } = data;\r\n\r\n if (isPublishing) {\r\n campaign.Status = 'Active';\r\n } else {\r\n campaign.Status = 'Paused';\r\n }\r\n\r\n if (campaign.UseCampaignLevelDates) {\r\n adGroup.StartDate = new Date();\r\n adGroup.EndDate = null;\r\n } else {\r\n campaign.StartDate = new Date();\r\n campaign.EndDate = null;\r\n }\r\n\r\n const saveCampaignPromise = saveCampaign({\r\n campaign: { data: campaign },\r\n viewModelToBulkModelForAdSchedules,\r\n viewModelToBulkModelForDisclaimerAssociation,\r\n viewModelToBulkModelForVerifiedTrackingSettings,\r\n }, {\r\n scenario: scenarioContext.name,\r\n activityLogger: scenarioContext.createActivity('saveDefaultCampaign'),\r\n i18n,\r\n });\r\n\r\n const saveAdGroupsPromise = saveCampaignPromise\r\n .then(() => saveAdGroup({\r\n adGroup: { data: adGroup },\r\n bundleCountries,\r\n bundleLocationCriterions,\r\n campaign: state.context.wizardData.campaign,\r\n customTargetingBulkModel: shouldEnableBidAdjustment(flow, serverContext) ? viewModelToBulkModelForBidAdjustmentUI : undefined,\r\n isDisplayPlus: true,\r\n }, {\r\n scenario: scenarioContext.name,\r\n activityLogger: scenarioContext.createActivity('saveAdGroup'),\r\n i18n,\r\n serverContext,\r\n }));\r\n\r\n const savePromises = [saveCampaignPromise, saveAdGroupsPromise];\r\n\r\n return new Promise((resolve, reject) => {\r\n allSettledPromiseWrapper(savePromises).then((results) => {\r\n const allSuccess = _.every(results, result => result.status === 'fulfilled');\r\n\r\n if (allSuccess) {\r\n if (activity) {\r\n activity.signal(`onBudgetAndBidSavedSuccessfully - Status: ${campaign.Status}, Id: ${campaign.Id}`);\r\n }\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, {\r\n campaign: results[0].value.campaign.data,\r\n adGroup: results[1].value.adGroup.data,\r\n isDefaultCampaignStepModel: false,\r\n lifetimeBudgetFlowData: {\r\n isBudgetTypeEditable: false,\r\n isDateManagementEditable: false,\r\n },\r\n });\r\n\r\n return resolve({\r\n adGroup: results[1].value.adGroup.data,\r\n campaign: results[0].value.campaign.data,\r\n ...getErrorsPlaceholders(),\r\n });\r\n }\r\n\r\n const errors = _.map(results, (result) => {\r\n if (activity) {\r\n activity.signal(`OnBudgetAndBidSavedError - error: ${JSON.stringify(result)}`);\r\n }\r\n if (result.status === 'fulfilled') {\r\n return null;\r\n }\r\n\r\n const { serverErrors = {} } = result.reason;\r\n\r\n return serverErrors;\r\n });\r\n\r\n // eslint-disable-next-line prefer-promise-reject-errors\r\n return reject({ error: _.flatten(errors.filter(val => val !== null)) });\r\n });\r\n });\r\n };\r\n\r\n return {\r\n load,\r\n save,\r\n };\r\n};\r\n","import Promise from 'bluebird';\r\nimport _ from 'underscore';\r\nimport { useContext } from 'react';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { useWizardService, WIZARD_EVENTS } from '@bingads-webui-react/wizard';\r\nimport {\r\n loadCampaign,\r\n loadBundleCountries,\r\n modelToViewModelForCampaign,\r\n getErrorsPlaceholders,\r\n saveCampaign,\r\n} from '@bingads-webui-campaign-react/xandr-campaign';\r\nimport { getDealDetails } from '@bingads-webui-campaign-react/xandr-video-campaign-shared-components';\r\nimport exclusionRepository from '@bingads-webui-campaign-legacy/advanced-settings/util/exclusion-repository';\r\nimport { ScopeLevel } from '@bingads-webui-campaign-react/constants';\r\nimport { ScopeContext } from '@bingads-webui-react/scope-service';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport { ActivityContext, ScenarioContext } from '@bingads-webui-react/hoc-with-signal';\r\nimport { InstrumentationContext } from '@bingads-webui-react/hoc-with-instrumentation';\r\nimport { getVerifiedTrackingSettingWrite as viewModelToBulkModelForVerifiedTrackingSettings } from '@bingads-webui-campaign-react/third-party-measurement';\r\nimport { viewModelToBulkModelForDisclaimerAssociation } from '@bingads-webui-campaign-react/ads-campaign-disclaimers';\r\nimport { showBudgetBidCampaignNotifications } from '@bingads-webui-campaign/import-shared-utils';\r\nimport { repository } from '@bingads-webui-campaign-react/website-list-selector';\r\nimport { isCTVCampaign, isDealCampaign } from '../../step-constants';\r\nimport {\r\n readDayTimeCriterions,\r\n viewModelToBulkModelForAdSchedules,\r\n readLocationCriterions,\r\n readDeviceCriterion,\r\n} from '../../shared/model/campaign-criterion';\r\n\r\nexport const useCampaignEditRepository = () => {\r\n const i18n = useContext(I18nContext);\r\n const { state, send } = useWizardService();\r\n\r\n const { scope } = useContext(ScopeContext) || {};\r\n const scenarioContext = useContext(ScenarioContext);\r\n const serverContext = useContext(ServerContext);\r\n const { DynamicPermissions = {} } = serverContext || {};\r\n const {\r\n AudienceMMACTAOptOut: isAudienceMMACTAOptOutEnabled,\r\n AudienceMMACTADefaultOptOut: isAudienceMMACTADefaultOptOutEnabled,\r\n WebsiteExclusionLists: isWebsiteExclusionListsEnabled,\r\n } = DynamicPermissions;\r\n\r\n const activity = useContext(ActivityContext);\r\n const instrumentation = useContext(InstrumentationContext);\r\n\r\n const { cid, aid } = scope.values;\r\n const { flow } = state.context.wizardData;\r\n const isCTVCampaignFlow = isCTVCampaign(flow);\r\n const isDealCampaignFlow = isDealCampaign(flow);\r\n\r\n const load = () => {\r\n const savedCampaign = state.context.wizardData.campaign;\r\n const campaignId = savedCampaign ? savedCampaign.Id : null;\r\n\r\n if (isCTVCampaignFlow || isDealCampaignFlow) {\r\n const loadPromises = {\r\n campaign: loadCampaign(cid, aid, campaignId),\r\n dealDetails: getDealDetails(cid, aid, campaignId, serverContext),\r\n };\r\n\r\n return Promise.props(loadPromises).then(({\r\n campaign,\r\n dealDetails,\r\n }) => {\r\n const campaignData = modelToViewModelForCampaign({\r\n campaignModel: campaign,\r\n dealDetails,\r\n });\r\n\r\n return {\r\n campaign: campaignData.data,\r\n dealDetails,\r\n ...getErrorsPlaceholders(),\r\n };\r\n });\r\n }\r\n\r\n const loadPromises = {\r\n campaign: loadCampaign(cid, aid, campaignId),\r\n exclusions: exclusionRepository.load(campaignId, null, ScopeLevel.Campaign),\r\n dayTimeCriterions: readDayTimeCriterions({\r\n cid, aid, campaignId,\r\n }),\r\n locationCriterions: readLocationCriterions({\r\n cid, aid, campaignId,\r\n }),\r\n campaignDeviceCriterions: readDeviceCriterion({\r\n cid, aid, campaignId,\r\n }),\r\n bundleCountriesAndLocationCriterions: loadBundleCountries({\r\n cid,\r\n aid,\r\n serverContext,\r\n }),\r\n };\r\n\r\n if (isWebsiteExclusionListsEnabled) {\r\n loadPromises.websiteExclusionLists = repository.getListsByCampaignId(serverContext, campaignId);\r\n } else {\r\n loadPromises.websiteExclusionLists = Promise.resolve([]);\r\n }\r\n\r\n return Promise.props(loadPromises).then(({\r\n campaign,\r\n exclusions: [campaignExclusions],\r\n dayTimeCriterions,\r\n locationCriterions,\r\n campaignDeviceCriterions,\r\n bundleCountriesAndLocationCriterions,\r\n websiteExclusionLists,\r\n }) => {\r\n const campaignData = modelToViewModelForCampaign({\r\n campaignModel: campaign,\r\n dayTimeCriterionsModel: dayTimeCriterions ? dayTimeCriterions.value : [],\r\n locationCriterionsModel: locationCriterions ? locationCriterions.value : [],\r\n campaignDeviceCriterions: campaignDeviceCriterions ? campaignDeviceCriterions.value : [],\r\n bundleCountries: bundleCountriesAndLocationCriterions.bundleCountries,\r\n isAudienceMMACTAOptOutEnabled,\r\n isAudienceMMACTADefaultOptOutEnabled,\r\n });\r\n\r\n return {\r\n campaign: campaignData.data,\r\n ...bundleCountriesAndLocationCriterions,\r\n exclusions: {\r\n campaignExclusions,\r\n },\r\n websiteExclusionLists: websiteExclusionLists.map(entity => ({ ...entity, value: entity.Id, content: entity.Name })),\r\n ...getErrorsPlaceholders(),\r\n };\r\n });\r\n };\r\n\r\n const allSettledPromiseWrapper = (promises) => {\r\n const wrappedPromises = promises.map(p => Promise.resolve(p)\r\n .then(\r\n val => ({ status: 'fulfilled', value: val }),\r\n err => ({ status: 'rejected', reason: err })\r\n ));\r\n return Promise.all(wrappedPromises);\r\n };\r\n\r\n const save = ({ data }) => {\r\n const {\r\n campaign,\r\n bundleCountries,\r\n bundleLocationCriterions,\r\n exclusions,\r\n websiteExclusionLists,\r\n } = data;\r\n\r\n if (campaign.Status === 'UserPaused') {\r\n campaign.Status = 'Paused';\r\n }\r\n\r\n let saveCampaignPromise;\r\n let saveExclusionsPromise = Promise.resolve();\r\n let saveWebsiteExclusionListsPromise = Promise.resolve();\r\n\r\n if (isCTVCampaignFlow || isDealCampaignFlow) {\r\n saveCampaignPromise = saveCampaign({\r\n campaign: { data: campaign },\r\n viewModelToBulkModelForVerifiedTrackingSettings,\r\n }, {\r\n scenario: scenarioContext.name,\r\n activityLogger: scenarioContext.createActivity('saveDefaultCampaign'),\r\n i18n,\r\n });\r\n } else {\r\n saveCampaignPromise = saveCampaign({\r\n campaign: { data: campaign },\r\n viewModelToBulkModelForAdSchedules,\r\n viewModelToBulkModelForVerifiedTrackingSettings,\r\n bundleCountries,\r\n bundleLocationCriterions,\r\n viewModelToBulkModelForDisclaimerAssociation,\r\n isAudienceMMACTAOptOutEnabled,\r\n }, {\r\n scenario: scenarioContext.name,\r\n activityLogger: scenarioContext.createActivity('saveDefaultCampaign'),\r\n i18n,\r\n });\r\n\r\n const saveExclusionsData = {\r\n campaignId: campaign.Id,\r\n AdvanceSettings: {\r\n Exclusions: {\r\n ExcludedIPs: exclusions.campaignExclusions.ExcludedIPs,\r\n ExcludedSites: exclusions.campaignExclusions.ExcludedSites,\r\n },\r\n },\r\n };\r\n saveExclusionsPromise = exclusionRepository.saveExtensions(saveExclusionsData, ScopeLevel.Campaign);\r\n if (isWebsiteExclusionListsEnabled) {\r\n saveWebsiteExclusionListsPromise = repository.associateListsToCampaign(serverContext, websiteExclusionLists, campaign.Id);\r\n }\r\n }\r\n\r\n const savePromises = [saveCampaignPromise, saveExclusionsPromise, saveWebsiteExclusionListsPromise];\r\n\r\n return new Promise((resolve, reject) => {\r\n allSettledPromiseWrapper(savePromises).then((results) => {\r\n const allSuccess = _.every(results, result => result.status === 'fulfilled');\r\n\r\n if (allSuccess) {\r\n const { activity: BudgetBidCampaignImportNotificationActivity } = instrumentation.createScenarioAndActivity({\r\n scenarioName: 'BudgetBidCampaignImportNotification',\r\n activityName: 'AudienceCampaignSettingPage',\r\n });\r\n\r\n const { campaign: initialCampaign } = state.context.stepContexts.CAMPAIGN_EDIT.initialData;\r\n\r\n showBudgetBidCampaignNotifications({\r\n campaignItemList: [initialCampaign],\r\n oldBudget: initialCampaign.Budget,\r\n newBudget: campaign.Budget,\r\n oldBidStrategy: initialCampaign.BiddingScheme,\r\n newBidStrategy: campaign.BiddingScheme,\r\n activity: BudgetBidCampaignImportNotificationActivity,\r\n });\r\n\r\n if (activity) {\r\n activity.signal(`onBudgetAndBidSavedSuccessfully - Status: ${campaign.Status}, Id: ${campaign.Id}`);\r\n }\r\n\r\n if (isCTVCampaignFlow || isDealCampaignFlow) {\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, { campaign: results[0].value.campaign.data });\r\n } else {\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, { campaign: results[0].value.campaign.data, exclusions: results[1].value });\r\n }\r\n\r\n return resolve({\r\n campaign: results[0].value.campaign.data,\r\n ...getErrorsPlaceholders(),\r\n });\r\n }\r\n\r\n const errors = _.map(results, (result) => {\r\n if (activity) {\r\n activity.signal(`OnBudgetAndBidSavedError - error: ${JSON.stringify(result)}`);\r\n }\r\n if (result.status === 'fulfilled') {\r\n return null;\r\n }\r\n\r\n const { serverErrors = {} } = result.reason;\r\n\r\n if (result.reason.NegativeSitesResult) {\r\n const { NegativeSitesResult } = result.reason;\r\n serverErrors.property = 'webExclusions';\r\n serverErrors.NegativeSitesResult = NegativeSitesResult.EntityErrors;\r\n }\r\n\r\n if (result.reason.NegativeIPsResult) {\r\n const { NegativeIPsResult } = result.reason;\r\n serverErrors.property = 'webExclusions';\r\n serverErrors.NegativeIPsResult = NegativeIPsResult.EntityErrors;\r\n }\r\n\r\n return serverErrors;\r\n });\r\n\r\n // eslint-disable-next-line prefer-promise-reject-errors\r\n return reject({ error: _.flatten(errors.filter(val => val !== null)) });\r\n });\r\n });\r\n };\r\n\r\n return {\r\n load,\r\n save,\r\n };\r\n};\r\n","import { useState, useEffect, useContext, useMemo } from 'react';\r\nimport _ from 'underscore';\r\nimport _preferencesService from '@bingads-webui-component-legacy/preference/service/index';\r\nimport { useWizardService } from '@bingads-webui-react/wizard';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport { isAudienceCampaign as isAudienceCampaignFlow, isMultiAdsAudienceCampaign, isCTVCampaign, isDealCampaign } from '../../step-constants';\r\n\r\nconst BiddingSchemeToBidType = {\r\n EnhancedCpc: 'SearchBid',\r\n ManualCpc: 'SearchBid',\r\n ManualCpm: 'CpmBid',\r\n ManualCpv: 'CpvBid',\r\n};\r\n\r\nconst buildSchemaData = ({\r\n data, timeDisplayType, isAudienceCampaign, serverContext, numberOfAds, isCTVFlow, isDealFlow,\r\n}) => {\r\n const {\r\n DynamicPermissions: {\r\n GenreTargets,\r\n CampaignLifetimeBudget: IsCampaignLifetimeBudgetEnabled,\r\n },\r\n } = serverContext;\r\n\r\n const locations = _.map(\r\n _.filter(\r\n data.adGroup.locationTargets.currentLevelSettings.currentLocations,\r\n loc => loc.SelectionStatus === 'Included'\r\n ),\r\n loc => loc.location\r\n );\r\n\r\n const { deal, campaign = {}, adGroup = {} } = data;\r\n const hideGenreTargetForDeal = isDealFlow ? !(deal && deal.Genre) : false;\r\n\r\n const isUseCampaignLevelDates = campaign.UseCampaignLevelDates;\r\n const startDate = isUseCampaignLevelDates ? campaign.StartDate : adGroup.StartDate;\r\n const endDate = isUseCampaignLevelDates ? campaign.EndDate : adGroup.EndDate;\r\n\r\n return ({\r\n adsPanel: {\r\n isRendered: !_.isUndefined(data.ads),\r\n },\r\n adCreation: {\r\n numAds: numberOfAds,\r\n },\r\n adGroupName: {\r\n data: data.adGroup.Name,\r\n },\r\n locationTargeting: {\r\n locations,\r\n targetOption: data.adGroup.locationTargets.currentLevelSettings.targetOption,\r\n },\r\n genderTargeting: {\r\n genders: data.adGroup.genderTypes,\r\n isRendered: data.adGroup.genderTypes && data.adGroup.genderTypes.length > 0,\r\n },\r\n ageRangeTargeting: {\r\n ageRanges: data.adGroup.ageRanges,\r\n isRendered: data.adGroup.ageRanges && data.adGroup.ageRanges.length > 0,\r\n },\r\n genreTargeting: {\r\n genreTargets: data.adGroup.genreTargets,\r\n isRendered: GenreTargets && (isCTVFlow || (isDealFlow && !hideGenreTargetForDeal)),\r\n },\r\n predictiveTargeting: {\r\n isPredictiveTargetingEnabled: data.adGroup.UseOptimizedTargeting,\r\n isRendered: isAudienceCampaign,\r\n },\r\n advancedTargetingSeparator: {},\r\n interest: {\r\n interests: data.adGroup.interests,\r\n isRendered: data.adGroup.interests && data.adGroup.interests.length > 0,\r\n },\r\n audience: {\r\n audiences: data.adGroup.audiences,\r\n isRendered: data.adGroup.audiences && data.adGroup.audiences.length > 0,\r\n },\r\n company: {\r\n companyTargets: data.adGroup.companyNameTargets,\r\n negativeCompanyTargets: data.adGroup.negativeCompanyNameTargets,\r\n isRendered: (data.adGroup.companyNameTargets && data.adGroup.companyNameTargets.length > 0) || (data.adGroup.negativeCompanyNameTargets && data.adGroup.negativeCompanyNameTargets.length > 0),\r\n },\r\n jobFunction: {\r\n jobTargets: data.adGroup.jobTargets,\r\n negativeJobTargets: data.adGroup.negativeJobTargets,\r\n isRendered: (data.adGroup.jobTargets && data.adGroup.jobTargets.length > 0) || (data.adGroup.negativeJobTargets && data.adGroup.negativeJobTargets.length > 0),\r\n },\r\n industry: {\r\n industryTargets: data.adGroup.industry,\r\n negativeIndustryTargets: data.adGroup.negativeIndustry,\r\n isRendered: (data.adGroup.industry && data.adGroup.industry.length > 0) || (data.adGroup.negativeIndustry && data.adGroup.negativeIndustry.length > 0),\r\n },\r\n adScheduleAdGroup: {\r\n startDate: data.adGroup.StartDate,\r\n endDate: data.adGroup.EndDate,\r\n adSchedules: data.adGroup.adSchedules.dayTimeRanges,\r\n useSearcherTimeZone: data.adGroup.AdScheduleUseSearcherTimeZone,\r\n timeDisplayType,\r\n isRendered: !isAudienceCampaign,\r\n },\r\n campaignName: {\r\n data: data.campaign.Name,\r\n },\r\n conversionGoals: {\r\n conversionGoals: data.campaign.conversionGoals,\r\n isRendered: !(isCTVFlow || isDealFlow),\r\n },\r\n budget: {\r\n data: data.campaign.Budget,\r\n currencyCode: serverContext.CurrentAccount.CurrencyCode,\r\n },\r\n bidStrategy: {\r\n data: data.campaign.BiddingScheme,\r\n },\r\n bidValue: {\r\n data: data.adGroup[BiddingSchemeToBidType[data.campaign.BiddingScheme.Type]],\r\n currencyCode: serverContext.CurrentAccount.CurrencyCode,\r\n isRendered: data.campaign.BiddingScheme && data.campaign.BiddingScheme.Type !== 'MaxConversions',\r\n },\r\n startEndDatesCampaign: {\r\n startDate,\r\n endDate,\r\n isUseCampaignLevelDates,\r\n isDateLevelDisplayed: isAudienceCampaign && IsCampaignLifetimeBudgetEnabled,\r\n isRendered: isAudienceCampaign,\r\n },\r\n });\r\n};\r\n\r\nexport const useSummarySchemaData = ({ data }) => {\r\n const { state } = useWizardService();\r\n const { flow } = state.context.wizardData;\r\n const isAudienceCampaign = isAudienceCampaignFlow(flow);\r\n const isCTVFlow = isCTVCampaign(flow);\r\n const isDealFlow = isDealCampaign(flow);\r\n\r\n const [timeDisplayType, setTimeDisplayType] = useState('12-hour');\r\n\r\n const serverContext = useContext(ServerContext);\r\n\r\n const numberOfAds = useMemo(() => {\r\n if (isMultiAdsAudienceCampaign(flow)) {\r\n return data && data.ads && data.ads.ads && data.ads.ads && Object.keys(data.ads.ads).length;\r\n }\r\n\r\n return (data && data.ads && data.ads.ads && data.ads.ads.data && data.ads.ads.data.length) || 1;\r\n }, [data, flow]);\r\n\r\n useEffect(() => {\r\n const preferencesService = _preferencesService.default || _preferencesService;\r\n preferencesService.initialize().then(() => {\r\n const isTwelveHourDisplay = preferencesService.findByName('WebApp.CampaignUI.isTwelveHourDisplay') || {};\r\n setTimeDisplayType(_.isUndefined(isTwelveHourDisplay.Data) || isTwelveHourDisplay.Data ? '12-hour' : '24-hour');\r\n });\r\n }, []);\r\n\r\n return (data && buildSchemaData({\r\n data, timeDisplayType, isAudienceCampaign, serverContext, numberOfAds, isCTVFlow, isDealFlow,\r\n })) || {};\r\n};\r\n\r\n","import React, { useMemo, useCallback } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Stack } from '@bingads-webui-react/fabric-control';\r\nimport { GeneratedUI } from '@bingads-webui-campaign-react/ui-generator';\r\nimport { summaryPageComponentTypes } from '@bingads-webui-campaign-react/summary-page';\r\nimport { WIZARD_EVENTS, useWizardService } from '@bingads-webui-react/wizard';\r\nimport { StepHeader } from '../../shared/step-header';\r\nimport { buildSchema } from './schema';\r\nimport { useSummarySchemaData } from './use-summary-schema-data';\r\nimport { STEP_PATHS, FLOWS_TO_FIRST_STEP } from '../../step-constants';\r\n\r\nexport const SummaryStepShell = ({\r\n data,\r\n}) => {\r\n const schemaData = useSummarySchemaData({ data });\r\n\r\n const { send, state } = useWizardService();\r\n\r\n const onAdsHeaderActionClick = useCallback(() => {\r\n const stepId = FLOWS_TO_FIRST_STEP[state.context.wizardData.flow];\r\n\r\n send(WIZARD_EVENTS.NAVIGATE_TO, {\r\n stepId,\r\n });\r\n }, [send, state.context.wizardData.flow]);\r\n\r\n const onTargetingHeaderActionClick = useCallback(() => send(WIZARD_EVENTS.NAVIGATE_TO, {\r\n stepId: STEP_PATHS.AD_GROUP,\r\n }), [send]);\r\n\r\n const onCampaignSettingsHeaderActionClick = useCallback(() =>\r\n send(WIZARD_EVENTS.NAVIGATE_TO, {\r\n stepId: STEP_PATHS.CAMPAIGN_CREATION,\r\n }), [send]);\r\n\r\n const options = useMemo(() => ({\r\n onAdsHeaderActionClick,\r\n onTargetingHeaderActionClick,\r\n onCampaignSettingsHeaderActionClick,\r\n }), [onAdsHeaderActionClick, onTargetingHeaderActionClick, onCampaignSettingsHeaderActionClick]);\r\n\r\n const schema = useMemo(() => buildSchema(options), [options]);\r\n\r\n return (\r\n \r\n {!isEdit &&\r\n \r\n \r\n \r\n {dealDetails && \r\n \r\n {\r\n advancedOptions.length > 0 && (\r\n (\r\n <>\r\n \r\n \r\n {i18n.getString(_TL_('Advanced settings'))}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n />\r\n )\r\n }\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n }\r\n \r\n \r\n \r\n
\r\n \r\n {isValidTargets && !isCTVOrDealFlow &&\r\n
\r\n \r\n \r\n \r\n \r\n \r\n {data ?\r\n \r\n
\r\n );\r\n};\r\n\r\nSummaryStepShell.propTypes = {\r\n data: PropTypes.shape({}),\r\n};\r\n\r\nSummaryStepShell.defaultProps = {\r\n data: null,\r\n};\r\n","import { buildDefaultDataProperty } from '@bingads-webui-campaign-react/ui-generator';\r\n\r\nexport const buildSchema = options => ({\r\n separatorStyles: {\r\n marginBottom: 20,\r\n },\r\n ads: {\r\n type: 'panel',\r\n header: {\r\n title: 'Ads',\r\n actionButton: {\r\n label: _TL_('Edit'),\r\n iconName: 'Edit',\r\n ariaLabel: _TL_('Edit'),\r\n onClick: options.onAdsHeaderActionClick,\r\n },\r\n },\r\n components: {\r\n adCreation: {\r\n type: 'ad-creation',\r\n dynamicProps: props => props.adCreation,\r\n },\r\n },\r\n dynamicProps: props => props.adsPanel,\r\n },\r\n targeting: {\r\n type: 'panel',\r\n header: {\r\n title: _TL_('Targeting'),\r\n actionButton: {\r\n label: _TL_('Edit'),\r\n iconName: 'Edit',\r\n ariaLabel: _TL_('Edit'),\r\n onClick: options.onTargetingHeaderActionClick,\r\n },\r\n },\r\n components: {\r\n separatorStyles: {\r\n marginBottom: 8,\r\n },\r\n adGroupName: buildDefaultDataProperty({\r\n label: _TL_('Ad group name'),\r\n dynamicProps: props => props.adGroupName,\r\n }),\r\n hd1: {\r\n type: 'horizontal-divider',\r\n },\r\n locationTargeting: {\r\n type: 'location-targeting',\r\n dynamicProps: props => props.locationTargeting,\r\n },\r\n genderTargeting: {\r\n type: 'gender-targeting',\r\n dynamicProps: props => props.genderTargeting,\r\n },\r\n ageRangeTargeting: {\r\n type: 'age-range-targeting',\r\n dynamicProps: props => props.ageRangeTargeting,\r\n },\r\n genreTargeting: {\r\n type: 'genre-targeting',\r\n dynamicProps: props => props.genreTargeting,\r\n },\r\n predictiveTargeting: {\r\n type: 'predictive-targeting',\r\n dynamicProps: props => props.predictiveTargeting,\r\n },\r\n advancedTargetingSeparator: {\r\n type: 'horizontal-divider',\r\n dynamicProps: props => props.advancedTargetingSeparator,\r\n },\r\n interest: {\r\n type: 'interest',\r\n dynamicProps: props => props.interest,\r\n },\r\n audience: {\r\n type: 'audience',\r\n dynamicProps: props => props.audience,\r\n },\r\n company: {\r\n type: 'company',\r\n dynamicProps: props => props.company,\r\n },\r\n jobFunction: {\r\n type: 'job-function',\r\n dynamicProps: props => props.jobFunction,\r\n },\r\n industry: {\r\n type: 'industry',\r\n dynamicProps: props => props.industry,\r\n },\r\n adScheduleAdGroup: {\r\n type: 'ad-schedule',\r\n dynamicProps: props => props.adScheduleAdGroup,\r\n },\r\n },\r\n },\r\n campaignSettings: {\r\n type: 'panel',\r\n header: {\r\n title: _TL_('Campaign settings'),\r\n actionButton: {\r\n label: _TL_('Edit'),\r\n iconName: 'Edit',\r\n ariaLabel: _TL_('Edit'),\r\n onClick: options.onCampaignSettingsHeaderActionClick,\r\n },\r\n },\r\n components: {\r\n separatorStyles: {\r\n marginBottom: 8,\r\n },\r\n campaignName: buildDefaultDataProperty({\r\n label: _TL_('Campaign name'),\r\n dynamicProps: props => props.campaignName,\r\n }),\r\n conversionGoals: {\r\n type: 'conversion-goals',\r\n dynamicProps: props => props.conversionGoals,\r\n },\r\n budget: {\r\n type: 'budget',\r\n dynamicProps: props => props.budget,\r\n },\r\n bidStrategy: {\r\n type: 'bid-strategy',\r\n dynamicProps: props => props.bidStrategy,\r\n },\r\n bidValue: {\r\n type: 'bid-value',\r\n dynamicProps: props => props.bidValue,\r\n },\r\n hd1: {\r\n type: 'horizontal-divider',\r\n },\r\n startEndDatesCampaign: {\r\n type: 'start-end-dates',\r\n dynamicProps: props => props.startEndDatesCampaign,\r\n },\r\n },\r\n },\r\n});\r\n","import Promise from 'bluebird';\r\nimport { useContext } from 'react';\r\nimport _ from 'underscore';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { useWizardService } from '@bingads-webui-react/wizard';\r\nimport {\r\n loadCampaign,\r\n loadAdGroup,\r\n modelToViewModelForAdGroup,\r\n modelToViewModelForCampaign,\r\n loadBundleCountries,\r\n readAudienceCriterions,\r\n readTargetingCriterions,\r\n readLocationCriterions,\r\n saveCampaign,\r\n saveJustAdGroup,\r\n readDayTimeCriterions,\r\n} from '@bingads-webui-campaign-react/xandr-campaign';\r\nimport { ScopeContext } from '@bingads-webui-react/scope-service';\r\nimport { ScenarioContext } from '@bingads-webui-react/hoc-with-signal';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\n\r\nimport { readDayTimeCriterions as readDayTimeCriterionsCampaign } from '../../shared/model/campaign-criterion';\r\nimport { isAudienceCampaign, isDealCampaign } from '../../step-constants';\r\n\r\nexport const useSummaryRepository = () => {\r\n const i18n = useContext(I18nContext);\r\n const { state } = useWizardService();\r\n\r\n const { scope } = useContext(ScopeContext) || {};\r\n const serverContext = useContext(ServerContext);\r\n\r\n const scenarioContext = useContext(ScenarioContext);\r\n\r\n const { cid, aid } = scope.values;\r\n\r\n const { flow, isPublishing, deal } = state.context.wizardData;\r\n\r\n const inMarketAudienceRedesignEnabled = _.get(serverContext, ['DynamicPermissions', 'InMarketAudienceRedesign']);\r\n\r\n const load = () => {\r\n const savedCampaign = state.context.wizardData.campaign;\r\n const savedAdGroup = state.context.wizardData.adGroup;\r\n\r\n const adGroupId = savedAdGroup ? savedAdGroup.Id : null;\r\n const campaignId = savedCampaign ? savedCampaign.Id : null;\r\n\r\n let loadPromises = {\r\n adGroup: Promise.resolve(savedAdGroup),\r\n bundleCountriesAndLocationCriterions: loadBundleCountries({\r\n cid,\r\n aid,\r\n serverContext,\r\n }),\r\n };\r\n\r\n loadPromises = _.extend(loadPromises, {\r\n adGroup: loadAdGroup(cid, aid, campaignId, adGroupId),\r\n campaign: loadCampaign(cid, aid, campaignId),\r\n locationCriterions: readLocationCriterions({\r\n cid, aid, campaignId, adGroupId,\r\n }),\r\n dayTimeCriterions: readDayTimeCriterions({\r\n cid, aid, campaignId, adGroupId,\r\n }),\r\n dayTimeCriterionsCampaign: readDayTimeCriterionsCampaign({\r\n cid, aid, campaignId,\r\n }),\r\n targetCriterions: readTargetingCriterions({\r\n cid, aid, campaignId, adGroupId,\r\n }),\r\n audienceCriterions: readAudienceCriterions({\r\n cid, aid, campaignId, adGroupId,\r\n }),\r\n });\r\n\r\n return Promise.props(loadPromises).then(({\r\n adGroup,\r\n campaign,\r\n locationCriterions,\r\n bundleCountriesAndLocationCriterions,\r\n dayTimeCriterions,\r\n dayTimeCriterionsCampaign,\r\n targetCriterions,\r\n audienceCriterions,\r\n }) => {\r\n const adGroupData = modelToViewModelForAdGroup({\r\n adGroupModel: adGroup,\r\n campaignModel: campaign,\r\n locationCriterionsModel: locationCriterions ? locationCriterions.value : [],\r\n bundleCountries: bundleCountriesAndLocationCriterions.bundleCountries,\r\n dayTimeCriterionsModel: dayTimeCriterions ? dayTimeCriterions.value : [],\r\n targetCriterionsModel: targetCriterions ? targetCriterions.value : [],\r\n audienceCriterionsModel: audienceCriterions ? audienceCriterions.value : [],\r\n i18n,\r\n isAudienceAds: isAudienceCampaign(flow),\r\n separateIMA: inMarketAudienceRedesignEnabled,\r\n });\r\n\r\n const campaignData = modelToViewModelForCampaign({\r\n campaignModel: campaign,\r\n dayTimeCriterionsModel: dayTimeCriterionsCampaign ? dayTimeCriterionsCampaign.value : [],\r\n });\r\n\r\n return {\r\n ads: state.context.wizardData && state.context.wizardData.ads,\r\n adGroup: adGroupData.data,\r\n campaign: campaignData.data,\r\n ...(isDealCampaign(flow) ? { deal } : {}),\r\n };\r\n });\r\n };\r\n\r\n const save = ({ data }) => {\r\n const savedCampaign = data.campaign;\r\n const savedAdGroup = data.adGroup;\r\n\r\n if (isPublishing) {\r\n savedCampaign.Status = 'Active';\r\n savedAdGroup.Status = 'Active';\r\n } else {\r\n savedCampaign.Status = 'Paused';\r\n }\r\n\r\n return new Promise((resolve, reject) => saveCampaign({\r\n campaign: { data: savedCampaign },\r\n }, {\r\n scenario: scenarioContext.name,\r\n activityLogger: scenarioContext.createActivity('saveDefaultCampaign'),\r\n i18n,\r\n }).then(() => saveJustAdGroup({\r\n adGroup: { data: savedAdGroup },\r\n campaign: savedCampaign,\r\n }, {\r\n i18n,\r\n })).then(() => {\r\n resolve();\r\n }).catch(err => reject(err)));\r\n };\r\n\r\n return {\r\n load,\r\n save,\r\n };\r\n};\r\n","import { useCallback } from 'react';\r\n\r\nimport { useWizardService, WIZARD_EVENTS } from '@bingads-webui-react/wizard';\r\nimport { AdFormat } from '@bingads-webui-campaign-react/display-plus-native-ads';\r\n\r\n// Specific to multi ad format in native campaign\r\nexport const useSelectedAdFormatState = () => {\r\n const { state: wizardState, send: wizardSend } = useWizardService();\r\n const updateSelectedAdFormat = useCallback(value => wizardSend(WIZARD_EVENTS.UPDATE_WIZARD_DATA, { selectedAdFormat: value }), [wizardSend]);\r\n\r\n return [\r\n wizardState.context.wizardData.selectedAdFormat || AdFormat.Native,\r\n updateSelectedAdFormat,\r\n ];\r\n};\r\n","import React, { useMemo, useCallback, useContext, useState, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\n\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { AdFormatOption, AdFormat } from '@bingads-webui-campaign-react/display-plus-native-ads';\r\nimport { useWizardService, matchStepState, STEP_STATES } from '@bingads-webui-react/wizard';\r\nimport { DisplayAdsWithCopilot } from '@bingads-webui-campaign-react/xandr-display-ads-campaign-shared-components';\r\n\r\nimport { NativeAd } from '../native-ads/components/native-ad';\r\nimport { VideoAds } from '../video-ads/';\r\nimport { useSelectedAdFormatState } from '../../common/use-selected-ad-format';\r\nimport { NativeAdFooter } from '../native-ads/components/native-ad-footer';\r\n\r\nexport const MultiAdFormatStepShell = ({\r\n data,\r\n error,\r\n onDataChange,\r\n adsType = '',\r\n loadClipchampPlayer = null,\r\n}) => {\r\n const [selectedAdFormat, setSelectedAdFormat] = useSelectedAdFormatState();\r\n const i18n = useContext(I18nContext);\r\n const [isLoaded, setIsLoaded] = useState(false);\r\n const [isDisabled, setIsDisabled] = useState(false);\r\n const { state } = useWizardService();\r\n const currentStates = state.toStrings()[1];\r\n\r\n const onFormatChange = useCallback((value) => {\r\n setSelectedAdFormat(value);\r\n // Reset data\r\n onDataChange({ data: value === AdFormat.Native ? { data: {} } : { data: [] } });\r\n }, [onDataChange, setSelectedAdFormat]);\r\n\r\n const stepData = useMemo(() => {\r\n if (selectedAdFormat === AdFormat.Native) {\r\n return data || { data: {} };\r\n }\r\n\r\n return data || { data: [] };\r\n }, [data, selectedAdFormat]);\r\n\r\n // Wait for data is loaded to have a stable data state\r\n useEffect(() => {\r\n if (!isLoaded && matchStepState(state, STEP_STATES.ACTIVE)) {\r\n setIsLoaded(true);\r\n }\r\n }, [state, currentStates, isLoaded]);\r\n\r\n // To ensure disabled is fixed even we remove the ad when update\r\n useEffect(() => {\r\n if (isLoaded && !isDisabled) {\r\n const adData = _.isArray(stepData.data) ? stepData.data[0] : stepData.data;\r\n const adId = adData && adData.Id;\r\n\r\n if (adId) {\r\n setIsDisabled(true);\r\n }\r\n }\r\n }, [isLoaded, isDisabled, stepData.data]);\r\n\r\n // To ensure that ad format is Display when adsType is Display on initial load\r\n useEffect(() => {\r\n if (adsType === AdFormat.Display && selectedAdFormat !== AdFormat.Display) {\r\n setSelectedAdFormat(AdFormat.Display);\r\n }\r\n }, [adsType, setSelectedAdFormat]);\r\n\r\n return (\r\n \r\n
\r\n : null\r\n }\r\n\r\n \r\n {isLoaded && (\r\n <>\r\n
\r\n );\r\n};\r\n\r\nMultiAdFormatStepShell.propTypes = {\r\n data: PropTypes.shape({}).isRequired,\r\n onDataChange: PropTypes.func.isRequired,\r\n error: PropTypes.shape({}).isRequired,\r\n adsType: PropTypes.string,\r\n};\r\n\r\nexport const SingleMultiAdFormatStepShell = props => \r\n 
\r\n \r\n
\r\n \r\n {adTitle} \r\n {adDescription} \r\n \r\n Ad\r\n {businessName}\r\n \r\n
\r\n \r\n );\r\n};\r\n","import React from 'react';\r\n\r\nexport const VideoAdPreview = ({ ad }) => (\r\n \r\n);\r\n","import React from 'react';\r\nimport _ from 'underscore';\r\nimport { ContentViewRegular, ImageMultipleRegular, VideoRegular } from '@fluentui/react-icons';\r\nimport { AdFormat } from '@bingads-webui-campaign-react/display-plus-native-ads';\r\n\r\nconst iconSize = 22;\r\n\r\nexport const getConfigByType = (type) => {\r\n switch (type) {\r\n case AdFormat.Native:\r\n return {\r\n icon: \r\n \r\n \r\n \r\n \r\n\r\n setFilterFormat(change.value)}\r\n value={filterFormat}\r\n >\r\n {_.keys(FilterFormat).map(key => (\r\n \r\n {\r\n data && !_.isEmpty(adIds) && (\r\n \r\n {adIds.map(adId => (\r\n \r\n )\r\n }\r\n {\r\n data && _.isEmpty(adIds) && (\r\n \r\n \r\n )\r\n }\r\n
\r\n );\r\n};\r\n\r\nMultiAdFormatAdsContainer.propTypes = {\r\n data: PropTypes.shape({}).isRequired,\r\n onDataChange: PropTypes.func.isRequired,\r\n};\r\n","import _ from 'underscore';\r\nimport React from 'react';\r\nimport { Activity } from '@bingads-webui-react/hoc-with-signal';\r\nimport { getNeedConfirming } from '@bingads-webui-campaign-react/campaign-settings-utils';\r\nimport { AdFormat } from '@bingads-webui-campaign-react/display-plus-native-ads';\r\n\r\nimport { useVideoAdsRepository, VideoAds } from './video-ads';\r\nimport { useAdGroupRepository, AdGroupStepShell } from './adgroup';\r\nimport { useCampaignRepository, useCampaignEditRepository, CampaignStepShell } from './campaign';\r\nimport { useDisplayAdsRepository, DisplayAds } from './display-ads';\r\nimport { useNativeAdRepository, SingleNativeAdStepShell, NativeAdsContainer, MultiAdsStepShell, useMultipleNativeAdsRepository, useNativeAdsManagerRepository } from './native-ads';\r\nimport { useSummaryRepository, SummaryStepShell } from './summary';\r\nimport { SingleMultiAdFormatStepShell, MultiAdFormatStepShell, MultiAdFormatAdsContainer, useMultiAdFormatAdsManagerRepository, useMultiAdFormatRepository, useSingleMultiAdFormatRepository } from './multi-ad-format';\r\nimport { STEP_PATHS, WIZARD_TYPES } from '../step-constants';\r\n\r\nconst editWizardTypeList = [\r\n WIZARD_TYPES.AUDIENCE_CAMPAIGN_EDIT,\r\n WIZARD_TYPES.AUDIENCE_AD_GROUP_EDIT,\r\n WIZARD_TYPES.AUDIENCE_CAMPAIGN_CTV_EDIT,\r\n WIZARD_TYPES.AUDIENCE_AD_GROUP_CTV_EDIT,\r\n WIZARD_TYPES.AUDIENCE_CAMPAIGN_DEAL_EDIT,\r\n WIZARD_TYPES.AUDIENCE_AD_GROUP_DEAL_EDIT,\r\n];\r\n\r\nexport const getStepConfig = (permissions, wizardType, adsType = '', loadClipchampPlayer = null) => StepConfig.map((step) => {\r\n if (_.get(permissions, ['dynamic', 'ConversionAssociationWarning']) && editWizardTypeList.includes(wizardType) && step.id === STEP_PATHS.CAMPAIGN_EDIT) {\r\n const mapStep = {\r\n ...step,\r\n machineOptions: {\r\n guards: {\r\n needsConfirming: context => getNeedConfirming(permissions, context),\r\n },\r\n },\r\n\r\n };\r\n return mapStep;\r\n } else if (step.id === STEP_PATHS.VIDEO_AD) {\r\n const updatedVideoStep = {\r\n ...step,\r\n view: props => \r\n 
\r\n
\r\n {i18n.getString(_TL_('Nothing to see here'))}
\r\n \r\n {i18n.getString(_TL_(\"You haven't created any {{adType}} yet. Once you create an ad, you'll see it here.\"), { adType: i18n.getString(FilterFormat[filterFormat].label) })}\r\n
\r\n \r\n \r\n \r\n {i18n.getString(_TL_('Note'))} \r\n {i18n.getString(_TL_('Please note that Audience campaigns will always serve on Microsoft sites (e.g., Microsoft Bing, Microsoft Casual Games, MSN, and Outlook.com) even if you’ve added website exclusions for them.'))} \r\n \r\n \r\n
\r\n \r\n \r\n \r\n {i18n.getString(_TL_('Note'))} \r\n {i18n.getString(_TL_('Please note that Audience campaigns will always serve on Microsoft sites (e.g., Microsoft Bing, Microsoft Casual Games, MSN, and Outlook.com) even if you’ve added website exclusions for them.'))} \r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nDisplayPlusEditCampaignWizardInternal.propTypes = {\r\n siteMap: PropTypes.shape({}).isRequired,\r\n scope: PropTypes.shape({\r\n save: PropTypes.func.isRequired,\r\n }).isRequired,\r\n perfMarker: PropTypes.shape({\r\n createChild: PropTypes.func.isRequired,\r\n }).isRequired,\r\n currentCampaign: PropTypes.shape({\r\n Id: PropTypes.number.isRequired,\r\n CampaignSubType: PropTypes.number.isRequired,\r\n }).isRequired,\r\n};\r\n\r\nexport const DisplayPlusEditCampaignWizard = withSiteMap(DisplayPlusEditCampaignWizardInternal);\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { mergeClasses } from '@fluentui/react-components';\r\nimport { withSiteMap, getRoutePathById } from '@bingads-webui-campaign-react/with-site-map';\r\nimport { isAudienceNativeAdsCampaign, isAudienceCTVCampaign, isAudienceDealCampaign } from '@bingads-webui-campaign-react/constants';\r\n\r\nimport { WIZARD_TYPE_TO_FLOW, WIZARD_TYPES } from '../step-constants';\r\nimport { DisplayPlusEditWizard } from './display-plus-edit-wizard';\r\nimport { useDisplayPlusEditWizardStyles } from './wizard-styles';\r\n\r\nconst getWizardType = (currentCampaign) => {\r\n if (isAudienceNativeAdsCampaign(currentCampaign.CampaignSubType)) {\r\n return WIZARD_TYPES.AUDIENCE_AD_GROUP_EDIT;\r\n }\r\n\r\n if (isAudienceCTVCampaign(currentCampaign)) {\r\n return WIZARD_TYPES.AUDIENCE_AD_GROUP_CTV_EDIT;\r\n }\r\n\r\n if (isAudienceDealCampaign(currentCampaign)) {\r\n return WIZARD_TYPES.AUDIENCE_AD_GROUP_DEAL_EDIT;\r\n }\r\n\r\n return WIZARD_TYPES.AUDIENCE_AD_GROUP_EDIT;\r\n};\r\n\r\nconst DisplayPlusEditAdGroupWizardInternal = ({\r\n currentCampaign, currentAdGroup, siteMap, perfMarker,\r\n}) => {\r\n const styles = useDisplayPlusEditWizardStyles();\r\n const routeToNavigateToWhenDone = getRoutePathById(siteMap, 'adgroups');\r\n\r\n const wizardType = getWizardType(currentCampaign);\r\n const flowType = WIZARD_TYPE_TO_FLOW[wizardType];\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nDisplayPlusEditAdGroupWizardInternal.propTypes = {\r\n siteMap: PropTypes.shape({}).isRequired,\r\n scope: PropTypes.shape({\r\n save: PropTypes.func.isRequired,\r\n }).isRequired,\r\n perfMarker: PropTypes.shape({\r\n createChild: PropTypes.func.isRequired,\r\n }).isRequired,\r\n currentCampaign: PropTypes.shape({\r\n CampaignSubType: PropTypes.number.isRequired,\r\n }).isRequired,\r\n currentAdGroup: PropTypes.shape({}).isRequired,\r\n};\r\n\r\nexport const DisplayPlusEditAdGroupWizard = withSiteMap(DisplayPlusEditAdGroupWizardInternal);\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withSiteMap, getRoutePathById } from '@bingads-webui-campaign-react/with-site-map';\r\nimport { isAudienceNativeAdsCampaign, isAudienceCTVCampaign, isAudienceDealCampaign } from '@bingads-webui-campaign-react/constants';\r\nimport { Layout } from '@bingads-webui-react/wizard';\r\nimport { ErrorBar } from '@bingads-webui-fluent-component/wizard-ui-library';\r\n\r\nimport { WIZARD_TYPE_TO_FLOW, WIZARD_TYPES } from '../step-constants';\r\nimport { DisplayPlusWizard } from './wizard';\r\nimport { StepList } from '../step-list';\r\nimport { AdGroupCreationFooter } from '../footers';\r\n\r\nconst getWizardType = (currentCampaign) => {\r\n if (isAudienceNativeAdsCampaign(currentCampaign.CampaignSubType)) {\r\n return WIZARD_TYPES.AUDIENCE_AD_GROUP_CREATION;\r\n }\r\n\r\n if (isAudienceCTVCampaign(currentCampaign)) {\r\n return WIZARD_TYPES.AUDIENCE_AD_GROUP_CTV_CREATION;\r\n }\r\n\r\n if (isAudienceDealCampaign(currentCampaign)) {\r\n return WIZARD_TYPES.AUDIENCE_AD_GROUP_DEAL_CREATION;\r\n }\r\n\r\n return WIZARD_TYPES.AUDIENCE_AD_GROUP_CREATION;\r\n};\r\n\r\nconst DisplayPlusCreateAdGroupWizardInternal = ({\r\n currentCampaign, currentAdGroup, siteMap, perfMarker,\r\n}) => {\r\n const routeToNavigateToWhenDone = getRoutePathById(siteMap, 'adgroups');\r\n\r\n const wizardType = getWizardType(currentCampaign);\r\n const flowType = WIZARD_TYPE_TO_FLOW[wizardType];\r\n\r\n return (\r\n \r\n currentAccount.PlacementExclusionLists['Default.GetOwnedOperatedExclusions'].get()}\r\n >\r\n {oolist => (\r\n oolist.value.length > 0 &&\r\n \r\n {i18n.getString(_TL_('You may be excluding the following websites which will prevent your campaign from serving'))}: { oolist.value.map(item => item.Url).join(', ')}\r\n \r\n )\r\n }\r\n \r\n);\r\n\r\nCheckOOInventoryBlocklists.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n};\r\n","import _ from 'underscore';\r\nimport React, { useContext, useState, useCallback, useEffect, useMemo } from 'react';\r\nimport { Body1Stronger, Body1, tokens, shorthands, makeStyles, Checkbox, Label, RadioGroup, Radio } from '@fluentui/react-components';\r\nimport PropTypes from 'prop-types';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { withCustomValidation } from '@bingads-webui-react/validation';\r\nimport { CheckOOInventoryBlocklists } from './check-oo-inventory-blocklists';\r\nimport { contentTargetingGroups } from './content-targeting-groups';\r\n\r\nconst useContentTargetingStyles = makeStyles({\r\n contentTargetingSpecificOptionsContainerStyle: {\r\n flexDirection: 'column',\r\n },\r\n contentTargetingSpecificOptionContainerStyle: {\r\n display: 'flex',\r\n ...shorthands.padding(tokens.spacingHorizontalXS, tokens.spacingHorizontalNone, tokens.spacingVerticalXS, tokens.spacingHorizontalNone),\r\n ...shorthands.gap(tokens.spacingVerticalS),\r\n ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\r\n },\r\n controlWrapperStyle: {\r\n width: '100%',\r\n '>label': {\r\n width: '100%',\r\n marginTop: '-2px',\r\n },\r\n },\r\n labelDescriptionStyle: {\r\n fontSize: '12px',\r\n color: tokens.colorNeutralForeground3,\r\n },\r\n entireSpecificSelectionStyle: {\r\n paddingBottom: '16px',\r\n },\r\n});\r\n\r\nconst ENTIRE_MICROSOFT_NETWORK = 'entire';\r\nconst SPECIFIC_PLACEMENTS = 'specific';\r\nconst EXCLUDED_PLACEMENT_IDS = [3, 4, 7];\r\n\r\nconst isTheEntireMicrosoftNetworkSelected = placements => _.isEmpty(placements);\r\n\r\nconst EntireNetworkOrSpecificSelection = React.memo(({ entireSpecificSelection, onChangeEntireSpecific }) => {\r\n const i18n = useContext(I18nContext);\r\n const styles = useContentTargetingStyles();\r\n const allPlacementsLabel = i18n.getString(_TL_('The entire Microsoft Advertising Network (recommended)'));\r\n const allPlacementsSubLabel = i18n.getString(_TL_('This option includes Microsoft sites and additional partner traffic for extended reach and lower cost per click.'));\r\n const specificPlacementsLabel = i18n.getString(_TL_('Microsoft sites'));\r\n const specificPlacementsSubLabel = i18n.getString(_TL_('Show your ads on specific Microsoft placements.'));\r\n\r\n return (\r\n \r\n \r\n \r\n {allPlacementsLabel}\r\n \r\n
\r\n\r\n {allPlacementsSubLabel}\r\n \r\n \r\n }\r\n value={ENTIRE_MICROSOFT_NETWORK}\r\n />\r\n \r\n \r\n {specificPlacementsLabel}\r\n \r\n
\r\n\r\n {specificPlacementsSubLabel}\r\n \r\n \r\n }\r\n value={SPECIFIC_PLACEMENTS}\r\n />\r\n \r\n );\r\n});\r\n\r\nEntireNetworkOrSpecificSelection.propTypes = {\r\n entireSpecificSelection: PropTypes.string.isRequired,\r\n onChangeEntireSpecific: PropTypes.func.isRequired,\r\n};\r\n\r\nconst ContentTargetingSpecificPlacements = React.memo(({ groups, selectedPlacements, onToggleContentTargetingPlacement }) => {\r\n const isOnlyOnePlacementSelected = useMemo(() => (selectedPlacements || []).length === 1, [selectedPlacements]);\r\n const i18n = useContext(I18nContext);\r\n const styles = useContentTargetingStyles();\r\n return (\r\n <>\r\n \r\n onToggleContentTargetingPlacement(group.placementId)}\r\n disabled={isDisabled}\r\n className={styles.controlWrapperStyle}\r\n label={\r\n <>\r\n \r\n {i18n.getString(group.name)}\r\n \r\n
\r\n\r\n {i18n.getString(group.description)}\r\n \r\n \r\n }\r\n />\r\n
\r\n );\r\n })}\r\n \r\n );\r\n});\r\n\r\nContentTargetingSpecificPlacements.propTypes = {\r\n groups: PropTypes.arrayOf(PropTypes.shape({\r\n placementId: PropTypes.number.isRequired,\r\n name: PropTypes.string.isRequired,\r\n description: PropTypes.string.isRequired,\r\n })).isRequired,\r\n selectedPlacements: PropTypes.arrayOf(PropTypes.number).isRequired,\r\n onToggleContentTargetingPlacement: PropTypes.func.isRequired,\r\n};\r\n\r\nconst ContentTargetingPlacementsInternal = ({ updateValidation, validationProps, msnSubcategoriesEnabled }) => {\r\n const i18n = useContext(I18nContext);\r\n const placementsSectionLabel = i18n.getString(_TL_('Where do you want to show your ads?'));\r\n const placementOptionsLabel = i18n.getString(_TL_('Choose the specific Microsoft placements'));\r\n const filteredContentTargetingGroups = msnSubcategoriesEnabled ? contentTargetingGroups : contentTargetingGroups.filter(({ placementId }) => !EXCLUDED_PLACEMENT_IDS.includes(placementId));\r\n\r\n const { data: { placements } } = validationProps;\r\n\r\n const [entireSpecificSelection, setEntireSpecificSelection] = useState(isTheEntireMicrosoftNetworkSelected(placements) ? ENTIRE_MICROSOFT_NETWORK : SPECIFIC_PLACEMENTS);\r\n\r\n const selectedPlacements = useMemo(() => (placements ? placements.map(v => v.PlacementId) : []), [placements]);\r\n\r\n useEffect(() => {\r\n const radioSelection = isTheEntireMicrosoftNetworkSelected(placements) ? ENTIRE_MICROSOFT_NETWORK : SPECIFIC_PLACEMENTS;\r\n setEntireSpecificSelection(radioSelection);\r\n }, [setEntireSpecificSelection, placements]);\r\n\r\n const onChangeEntireSpecific = useCallback((_e, data) => {\r\n setEntireSpecificSelection(data.value);\r\n if (data.value === SPECIFIC_PLACEMENTS) {\r\n updateValidation([], {\r\n placements: filteredContentTargetingGroups.map(v => ({ PlacementId: v.placementId })),\r\n });\r\n } else {\r\n updateValidation([], {\r\n placements: [],\r\n });\r\n }\r\n }, [updateValidation, setEntireSpecificSelection, filteredContentTargetingGroups]);\r\n\r\n const onToggleContentTargetingPlacement = useCallback((placementId) => {\r\n if (selectedPlacements.includes(placementId)) {\r\n updateValidation([], {\r\n placements: selectedPlacements.filter(v => v !== placementId).map(v => ({ PlacementId: v })),\r\n });\r\n } else {\r\n updateValidation([], {\r\n placements: [...selectedPlacements, placementId].map(v => ({ PlacementId: v })),\r\n });\r\n }\r\n }, [updateValidation, selectedPlacements]);\r\n const styles = useContentTargetingStyles();\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nUnstyledCompanyPicker.propTypes = {\r\n classes: PropTypes.shape({\r\n pickerContainer: PropTypes.string.isRequired,\r\n editTargetButtonContainer: PropTypes.string.isRequired,\r\n hide: PropTypes.string.isRequired,\r\n noTargetSelected: PropTypes.string.isRequired,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n validationProps: PropTypes.shape({\r\n data: PropTypes.shape({\r\n companyNameTargets: PropTypes.arrayOf(PropTypes.shape([])),\r\n negativeCompanyNameTargets: PropTypes.arrayOf(PropTypes.shape([])),\r\n }),\r\n }).isRequired,\r\n updateValidation: PropTypes.func.isRequired,\r\n onAudienceTargetInfoChange: PropTypes.func,\r\n shouldHide: PropTypes.bool,\r\n showExclusion: PropTypes.bool,\r\n};\r\n\r\nUnstyledCompanyPicker.defaultProps = {\r\n onAudienceTargetInfoChange: noop,\r\n shouldHide: false,\r\n showExclusion: true,\r\n};\r\n\r\nexport const ValidatedCompanyPicker = withBidAdjustment(withDefaultStyles(withCustomValidation(UnstyledCompanyPicker), getCompanyTargetStyles), 'CompanyName', ['companyNameTargets', 'negativeCompanyNameTargets']);\r\n","import {\r\n audienceAssociationSectionStyle,\r\n commonDoubleListBoxStyle,\r\n convertToLocalStyle,\r\n glyphIconStyle,\r\n helpbuttonStyle,\r\n paginationStyle,\r\n searchboxStyle,\r\n uiblockerStyle,\r\n audienceModalStyles,\r\n audienceExpressionStyle,\r\n audienceCombinedListStyle,\r\n tableStyle,\r\n} from '@bingads-webui-campaign-react/common-styles';\r\nimport { criterionSettingCompanyStyles } from '@bingads-webui-campaign-react/campaign-adgroup-settings-shared-styles';\r\n\r\nexport const getCompanyTargetStyles = (_, { palette }) => ({\r\n '@global': {\r\n ...uiblockerStyle({ palette }),\r\n ...audienceModalStyles({ palette }, { modalWidth: 500 }),\r\n ...audienceExpressionStyle(),\r\n ...audienceCombinedListStyle({ palette }),\r\n },\r\n pickerContainer: {\r\n ...criterionSettingCompanyStyles({ palette }, { targetGridWidth: 816 }),\r\n ...audienceAssociationSectionStyle({ palette }, { singleListBoxWidth: 450 }),\r\n ...commonDoubleListBoxStyle({ palette }),\r\n ...paginationStyle({ palette }),\r\n ...tableStyle({ palette }),\r\n ...searchboxStyle({ palette }),\r\n ...convertToLocalStyle(glyphIconStyle({ palette })),\r\n ...convertToLocalStyle(helpbuttonStyle({ palette })),\r\n '& .statusEnabled_icon::before': {\r\n color: '#107c10',\r\n content: '\"\\\\ECCC\"',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n },\r\n '& .statusPaused_icon::before': { // Todo: find icons for status disabled etc.\r\n color: '#323130',\r\n content: '\"\\\\F6B0\"',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n },\r\n '& .statusExcluded_icon::before': { // Todo: find icons for status disabled etc.\r\n color: '#A80000',\r\n content: '\"\\\\E733\"',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n },\r\n },\r\n});\r\n","export const contentTargetingGroups = [\r\n {\r\n name: _TL_('Microsoft Edge Browsers'),\r\n description: _TL_('Native ad placements on Microsoft Edge’s new tab page'),\r\n placementId: 12,\r\n },\r\n {\r\n name: _TL_('Productivity'),\r\n description: _TL_('Microsoft 365 (Native and Display ad placements) and Outlook (Native and Display ad placements)'),\r\n placementId: 13,\r\n },\r\n {\r\n name: _TL_('Gaming'),\r\n description: _TL_('Native, Display, and Video ad placements on Microsoft Casual Games'),\r\n placementId: 14,\r\n },\r\n {\r\n name: _TL_('MSN'),\r\n description: _TL_('Native, Display, and Video ad placements on MSN (serving with all available MSN content)'),\r\n placementId: 15,\r\n },\r\n // {\r\n // name: _TL_('MSN - Sports'),\r\n // description: _TL_('Native, Display, and Video ad placements serving exclusively with MSN sports-related content'),\r\n // placementId: 3,\r\n // },\r\n {\r\n name: _TL_('MSN - Health'),\r\n description: _TL_('Native, Display, and Video ad placements serving exclusively with MSN health-related content'),\r\n placementId: 7,\r\n },\r\n {\r\n name: _TL_('MSN - Money'),\r\n description: _TL_('Native, Display, and Video ad placements serving exclusively with MSN money-related content'),\r\n placementId: 4,\r\n },\r\n];\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { CampaignOData } from '@bingads-webui-react/campaign-odata';\r\nimport { MessageBar, MessageBarType } from '@fluentui/react';\r\nimport { itemStyle } from './styles/placements-function-target-styles';\r\n\r\nexport const CheckOOInventoryBlocklists = ({\r\n i18n,\r\n}) => (\r\n setCompanyAssociationRef(newRef)} />\r\n
\r\n \r\n
\r\n
\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nContentTargetingPlacementsInternal.propTypes = {\r\n updateValidation: PropTypes.func.isRequired,\r\n validationProps: PropTypes.shape({\r\n data: PropTypes.shape({\r\n placements: PropTypes.arrayOf(PropTypes.shape([])),\r\n }).isRequired,\r\n }).isRequired,\r\n msnSubcategoriesEnabled: PropTypes.bool.isRequired,\r\n};\r\n\r\nexport const getContentTargetingPlacementsSummaryText = ({ i18n, placements }) => (\r\n isTheEntireMicrosoftNetworkSelected(placements)\r\n ? i18n.getString(_TL_('The entire Microsoft Advertising Network'))\r\n : i18n.getString(_TL_('Microsoft sites')));\r\n\r\nexport const ContentTargetingPlacements = withCustomValidation(ContentTargetingPlacementsInternal);\r\n","import React, { useEffect, useMemo, useState, useContext } from 'react';\r\nimport { makeStyles } from '@fluentui/react-components';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { flatten, noop, every, isEmpty } from 'underscore';\r\nimport { IndustryTargetSetting } from '@bingads-webui-campaign/audience-criterion-setting';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { withCustomValidation } from '@bingads-webui-react/validation';\r\nimport { AudienceTargetInfo } from '@bingads-webui-campaign/audience-target-info';\r\nimport { criterionHelper } from '@bingads-webui-campaign/audience-campaign-shared';\r\nimport { ActivityContext } from '@bingads-webui-react/hoc-with-signal';\r\nimport { getIndustryTargetStyles } from './styles/industry-target-styles';\r\nimport { withBidAdjustment } from './with-bid-adjustment';\r\n\r\nexport const formatIndustry = ({ industry, i18n }) => {\r\n if (!industry || !industry.length) {\r\n return i18n.getString(_TL_('Target Industries'));\r\n }\r\n\r\n if (industry.length === 1) {\r\n return i18n.getString(_TL_('Targeted: 1 industry'));\r\n }\r\n\r\n return i18n.getString(_TL_('Targeted: {{count}} industries'), { count: (industry.length) });\r\n};\r\n\r\nconst useStyles = makeStyles({\r\n hide: {\r\n display: 'none',\r\n },\r\n});\r\n\r\nconst UnstyledIndustryPicker = (props) => {\r\n const {\r\n classes,\r\n updateValidation,\r\n validationProps,\r\n onAudienceTargetInfoChange,\r\n shouldHide,\r\n showExclusion,\r\n initialIndustryTargets,\r\n } = props;\r\n\r\n const { data: { industry, negativeIndustry } } = validationProps;\r\n\r\n const activity = useContext(ActivityContext);\r\n\r\n const [industryAssociationRef, setIndustryAssociationRef] = useState();\r\n const styles = useStyles();\r\n\r\n const currentLevelTargetInfo = useMemo(() => (\r\n new AudienceTargetInfo({\r\n resourceName: 'AdGroupCriterion',\r\n isForVNext: true,\r\n initAudienceAssociationView: false,\r\n })), []);\r\n\r\n const industryAssociationView = useMemo(() => {\r\n const industryView = new IndustryTargetSetting({\r\n criterionType: 'Industry',\r\n type: 'Industry',\r\n showBidOnlyNote: false,\r\n showExclusion,\r\n defaultBidAdjustment: 0,\r\n isForVNext: true,\r\n currentLevelTargetInfo,\r\n });\r\n\r\n industryView.render();\r\n\r\n return industryView;\r\n }, [currentLevelTargetInfo, showExclusion]);\r\n\r\n const onChange = () => {\r\n if (isEmpty(validationProps.data)) {\r\n // data is still loading\r\n return;\r\n }\r\n\r\n const updatedItems = industryAssociationView.currentLevelTargetInfo.getSnapshot(false);\r\n\r\n const industryTargetsBidAdjustment = [];\r\n\r\n const industryTargets = updatedItems.filter(({ CriterionType }) => (CriterionType === 'Industry'))\r\n .map(({ Id, Criterion }) => {\r\n const { IndustryCriterion } = Criterion;\r\n\r\n const targetWithBidAdjustment = {\r\n Id,\r\n Criterion,\r\n };\r\n\r\n industryTargetsBidAdjustment.push(targetWithBidAdjustment);\r\n\r\n return IndustryCriterion.Target;\r\n });\r\n\r\n const negativeIndustryTargets = updatedItems.filter(({ CriterionType }) => (CriterionType === 'NegativeIndustry'))\r\n .map(({ Criterion }) => {\r\n const { IndustryCriterion } = Criterion;\r\n\r\n return IndustryCriterion.Target;\r\n });\r\n\r\n updateValidation([], { industry: industryTargets, negativeIndustry: negativeIndustryTargets, industryTargetsBidAdjustment });\r\n\r\n if (activity) {\r\n activity.signal(`onIndustryTargetChange - ${JSON.stringify({ industry: industryTargets })}`);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n onAudienceTargetInfoChange(currentLevelTargetInfo);\r\n }, [currentLevelTargetInfo, onAudienceTargetInfoChange]);\r\n\r\n useEffect(() => {\r\n if (industryAssociationRef && industryAssociationRef.childElementCount === 0 && industryAssociationView) {\r\n industryAssociationRef.innerHTML = '';\r\n industryAssociationRef.append(industryAssociationView.el);\r\n }\r\n }, [industryAssociationRef, industryAssociationView]);\r\n\r\n useEffect(() => {\r\n industryAssociationView.searchView.searchTreeInitializationPromise.then(() => {\r\n currentLevelTargetInfo.off('AdGroupCriterionIndustryChanged', onChange);\r\n\r\n const industryTargets = industryAssociationView.searchView.treeView.node.children.map((child) => {\r\n const { children } = child;\r\n\r\n const innerChildren = children.map(innerChild => innerChild.data);\r\n\r\n return [...innerChildren];\r\n });\r\n\r\n const flatIndustryTargets = flatten(industryTargets);\r\n\r\n if (industry && industry.length > 0) {\r\n const selectedIndustries = flatIndustryTargets.filter(({ Id }) => industry.includes(Id));\r\n\r\n const currentTargets = currentLevelTargetInfo.getSnapshot(false).filter(({ CriterionType }) => (CriterionType === 'Industry'));\r\n\r\n // check if the current targets are the same as the selected targets\r\n const isSame = every(currentTargets, ((target) => {\r\n const { Criterion } = target;\r\n\r\n const { IndustryCriterion } = Criterion;\r\n\r\n return industry.includes(IndustryCriterion.Target);\r\n }));\r\n\r\n if (currentTargets.length !== selectedIndustries.length || !isSame) {\r\n selectedIndustries.forEach((data) => {\r\n const { BidAdjustment = 0, Id } = (initialIndustryTargets && initialIndustryTargets.find(({ criterion }) => criterion === data.Id)) || {};\r\n const industryCriterion = criterionHelper.buildLinkedInCriterion(\r\n 'Industry',\r\n data,\r\n true,\r\n BidAdjustment,\r\n 0\r\n );\r\n\r\n const criterion = {\r\n ...industryCriterion,\r\n Id,\r\n };\r\n\r\n currentLevelTargetInfo.createAsync(criterion);\r\n });\r\n }\r\n }\r\n\r\n if (negativeIndustry && negativeIndustry.length > 0) {\r\n const selectedNegativeIndustries = flatIndustryTargets.filter(({ Id }) => negativeIndustry.includes(Id));\r\n\r\n const currentNegativeTargets = currentLevelTargetInfo.getSnapshot(false).filter(({ CriterionType }) => (CriterionType === 'NegativeIndustry'));\r\n\r\n // check if the current targets are the same as the selected targets\r\n const isSame = every(currentNegativeTargets, ((target) => {\r\n const { Criterion } = target;\r\n\r\n const { IndustryCriterion } = Criterion;\r\n\r\n return negativeIndustry.includes(IndustryCriterion.Target);\r\n }));\r\n\r\n if (currentNegativeTargets.length !== selectedNegativeIndustries.length || !isSame) {\r\n selectedNegativeIndustries.forEach((data) => {\r\n const criterion = criterionHelper.buildLinkedInCriterion(\r\n 'Industry',\r\n data,\r\n false,\r\n 0,\r\n 0\r\n );\r\n\r\n currentLevelTargetInfo.createAsync(criterion);\r\n });\r\n }\r\n }\r\n }).then(() => {\r\n currentLevelTargetInfo.on('AdGroupCriterionIndustryChanged', onChange);\r\n currentLevelTargetInfo.trigger('AdGroupCriterionIndustryChanged'); // trigger the initial validation\r\n });\r\n\r\n return () => {\r\n currentLevelTargetInfo.off('AdGroupCriterionIndustryChanged', onChange);\r\n };\r\n }, [industry, negativeIndustry]); // eslint-disable-line react-hooks/exhaustive-deps\r\n\r\n return (\r\n \r\n \r\n
)}\r\n \r\n \r\n \r\n {i18n.getString(_TL_('Styles'))} \r\n
\r\n setIndustryAssociationRef(newRef)} />\r\n
\r\n );\r\n};\r\n\r\nUnstyledIndustryPicker.propTypes = {\r\n classes: PropTypes.shape({\r\n pickerContainer: PropTypes.string.isRequired,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n validationProps: PropTypes.shape({\r\n data: PropTypes.shape({\r\n industry: PropTypes.arrayOf(PropTypes.shape([])),\r\n negativeIndustry: PropTypes.arrayOf(PropTypes.shape([])),\r\n }),\r\n }).isRequired,\r\n updateValidation: PropTypes.func.isRequired,\r\n onAudienceTargetInfoChange: PropTypes.func,\r\n shouldHide: PropTypes.bool,\r\n showExclusion: PropTypes.bool,\r\n initialIndustryTargets: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\r\n};\r\n\r\nUnstyledIndustryPicker.defaultProps = {\r\n shouldHide: false,\r\n showExclusion: true,\r\n onAudienceTargetInfoChange: noop,\r\n};\r\n\r\nconst UnstyledIndustryPickerWithBidAdjustment = withBidAdjustment(UnstyledIndustryPicker, 'Industry', ['industry', 'negativeIndustry']);\r\n\r\nexport const ValidatedIndustryPicker = withDefaultStyles(withCustomValidation(UnstyledIndustryPickerWithBidAdjustment), getIndustryTargetStyles);\r\n","import {\r\n audienceAssociationSectionStyle,\r\n commonDoubleListBoxStyle,\r\n convertToLocalStyle,\r\n glyphIconStyle,\r\n helpbuttonStyle,\r\n paginationStyle,\r\n searchboxStyle,\r\n uiblockerStyle,\r\n audienceModalStyles,\r\n audienceExpressionStyle,\r\n audienceCombinedListStyle,\r\n tableStyle,\r\n} from '@bingads-webui-campaign-react/common-styles';\r\nimport { criterionSettingIndustryStyles } from '@bingads-webui-campaign-react/campaign-adgroup-settings-shared-styles';\r\n\r\nexport const getIndustryTargetStyles = (_, { palette }) => ({\r\n '@global': {\r\n ...uiblockerStyle({ palette }),\r\n ...audienceModalStyles({ palette }, { modalWidth: 500 }),\r\n ...audienceExpressionStyle(),\r\n ...audienceCombinedListStyle({ palette }),\r\n },\r\n pickerContainer: {\r\n ...criterionSettingIndustryStyles({ palette }, { targetGridWidth: 816 }),\r\n ...audienceAssociationSectionStyle({ palette }, { singleListBoxWidth: 450 }),\r\n ...commonDoubleListBoxStyle({ palette }),\r\n ...paginationStyle({ palette }),\r\n ...tableStyle({ palette }),\r\n ...searchboxStyle({ palette }),\r\n ...convertToLocalStyle(glyphIconStyle({ palette })),\r\n ...convertToLocalStyle(helpbuttonStyle({ palette })),\r\n '& .statusEnabled_icon::before': {\r\n color: '#107c10',\r\n content: '\"\\\\ECCC\"',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n },\r\n '& .statusPaused_icon::before': { // Todo: find icons for status disabled etc.\r\n color: '#323130',\r\n content: '\"\\\\F6B0\"',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n },\r\n '& .statusExcluded_icon::before': { // Todo: find icons for status disabled etc.\r\n color: '#A80000',\r\n content: '\"\\\\E733\"',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n },\r\n },\r\n});\r\n","import React, { useContext, useEffect, useMemo, useState } from 'react';\r\nimport { makeStyles } from '@fluentui/react-components';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { every, noop, isEmpty } from 'underscore';\r\nimport { JobFunctionTargetSetting } from '@bingads-webui-campaign/audience-criterion-setting';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { withCustomValidation } from '@bingads-webui-react/validation';\r\nimport { AudienceTargetInfo } from '@bingads-webui-campaign/audience-target-info';\r\nimport { criterionHelper } from '@bingads-webui-campaign/audience-campaign-shared';\r\nimport { ActivityContext } from '@bingads-webui-react/hoc-with-signal';\r\nimport { getJobFunctionTargetStyles } from './styles/job-function-target-styles';\r\nimport { withBidAdjustment } from './with-bid-adjustment';\r\n\r\nexport const formatJobFunction = ({ jobTargets, i18n }) => {\r\n if (!jobTargets || !jobTargets.length) {\r\n return i18n.getString(_TL_('Target Jobs'));\r\n }\r\n\r\n if (jobTargets.length === 1) {\r\n return i18n.getString(_TL_('Targeted: 1 job'));\r\n }\r\n\r\n return i18n.getString(_TL_('Targeted: {{count}} jobs'), { count: (jobTargets.length) });\r\n};\r\n\r\nconst useStyles = makeStyles({\r\n hide: {\r\n display: 'none',\r\n },\r\n});\r\n\r\nconst UnstyledJobFunctionPicker = (props) => {\r\n const {\r\n classes,\r\n updateValidation,\r\n validationProps,\r\n onAudienceTargetInfoChange,\r\n shouldHide,\r\n showExclusion,\r\n initialJobTargets,\r\n } = props;\r\n const { data: { jobTargets, negativeJobTargets } } = validationProps;\r\n\r\n const [jobFunctionAssociationRef, setJobFunctionAssociationRef] = useState();\r\n\r\n const styles = useStyles();\r\n\r\n const activity = useContext(ActivityContext);\r\n\r\n const currentLevelTargetInfo = useMemo(() => (\r\n new AudienceTargetInfo({\r\n resourceName: 'AdGroupCriterion',\r\n isForVNext: true,\r\n initAudienceAssociationView: false,\r\n })), []);\r\n\r\n const jobFunctionAssociationView = useMemo(() => {\r\n const jobFunctionView = new JobFunctionTargetSetting({\r\n criterionType: 'JobFunction',\r\n type: 'JobFunction',\r\n showBidOnlyNote: false,\r\n showExclusion,\r\n defaultBidAdjustment: 0,\r\n isForVNext: true,\r\n currentLevelTargetInfo,\r\n });\r\n\r\n jobFunctionView.render();\r\n\r\n return jobFunctionView;\r\n }, [currentLevelTargetInfo, showExclusion]);\r\n\r\n const onChange = () => {\r\n if (isEmpty(validationProps.data)) {\r\n // data is still loading\r\n return;\r\n }\r\n\r\n const updatedItems = jobFunctionAssociationView.currentLevelTargetInfo.getSnapshot(false);\r\n\r\n const jobTargetBidAdjustments = [];\r\n\r\n const jobTarget = updatedItems.filter(({ CriterionType }) => (CriterionType === 'JobFunction'))\r\n .map(({ Id, Criterion }) => {\r\n const { JobFunctionCriterion } = Criterion;\r\n\r\n const targetWithBidAdjustment = {\r\n Id,\r\n Criterion,\r\n };\r\n\r\n jobTargetBidAdjustments.push(targetWithBidAdjustment);\r\n\r\n return JobFunctionCriterion.Target;\r\n });\r\n\r\n const negativeJobTarget = updatedItems.filter(({ CriterionType }) => (CriterionType === 'NegativeJobFunction'))\r\n .map(({ Criterion }) => {\r\n const { JobFunctionCriterion } = Criterion;\r\n\r\n return JobFunctionCriterion.Target;\r\n });\r\n\r\n updateValidation([], { jobTargets: jobTarget, negativeJobTargets: negativeJobTarget, jobTargetBidAdjustments });\r\n\r\n if (activity) {\r\n activity.signal(`onIndustryTargetChange - ${JSON.stringify({ jobFunction: jobTarget })}`);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n onAudienceTargetInfoChange(currentLevelTargetInfo);\r\n }, [currentLevelTargetInfo, onAudienceTargetInfoChange]);\r\n\r\n useEffect(() => {\r\n if (jobFunctionAssociationRef && jobFunctionAssociationRef.childElementCount === 0 && jobFunctionAssociationView) {\r\n jobFunctionAssociationRef.innerHTML = '';\r\n jobFunctionAssociationRef.append(jobFunctionAssociationView.el);\r\n }\r\n }, [jobFunctionAssociationRef, jobFunctionAssociationView]);\r\n\r\n useEffect(() => {\r\n jobFunctionAssociationView.searchView.initializeSearchDataTask.then(() => {\r\n currentLevelTargetInfo.off('AdGroupCriterionJobFunctionChanged', onChange);\r\n\r\n const allJobTargets = jobFunctionAssociationView.searchView.searchResultView.items.map(item => item);\r\n\r\n if (jobTargets && jobTargets.length > 0) {\r\n const selectedJobTargets = allJobTargets.filter(({ id }) => jobTargets.includes(id));\r\n\r\n const currentTargets = currentLevelTargetInfo.getSnapshot(false).filter(({ CriterionType }) => (CriterionType === 'JobFunction'));\r\n\r\n // check if the current targets are the same as the selected targets\r\n const isSame = every(currentTargets, ((target) => {\r\n const { Criterion } = target;\r\n\r\n const { JobFunctionCriterion } = Criterion;\r\n\r\n return jobTargets.includes(JobFunctionCriterion.Target);\r\n }));\r\n\r\n if (currentTargets.length !== selectedJobTargets.length || !isSame) {\r\n selectedJobTargets.forEach((data) => {\r\n const { BidAdjustment = 0, Id } = (initialJobTargets && initialJobTargets.find(({ criterion }) => criterion === data.id)) || {};\r\n const jobFunctionCriterion = criterionHelper.buildLinkedInCriterion(\r\n 'JobFunction',\r\n data,\r\n true,\r\n BidAdjustment,\r\n 0\r\n );\r\n\r\n const criterion = {\r\n ...jobFunctionCriterion,\r\n Id,\r\n };\r\n\r\n currentLevelTargetInfo.createAsync(criterion);\r\n });\r\n }\r\n }\r\n\r\n if (negativeJobTargets && negativeJobTargets.length > 0) {\r\n const selectedNegativeJobTargets = allJobTargets.filter(({ id }) => negativeJobTargets.includes(id));\r\n\r\n const currentNegativeTargets = currentLevelTargetInfo.getSnapshot(false).filter(({ CriterionType }) => (CriterionType === 'NegativeJobFunction'));\r\n\r\n // check if the current targets are the same as the selected targets\r\n const isSame = every(currentNegativeTargets, ((target) => {\r\n const { Criterion } = target;\r\n\r\n const { JobFunctionCriterion } = Criterion;\r\n\r\n return negativeJobTargets.includes(JobFunctionCriterion.Target);\r\n }));\r\n\r\n if (currentNegativeTargets.length !== selectedNegativeJobTargets.length || !isSame) {\r\n selectedNegativeJobTargets.forEach((data) => {\r\n const criterion = criterionHelper.buildLinkedInCriterion(\r\n 'JobFunction',\r\n data,\r\n false,\r\n 0,\r\n 0\r\n );\r\n\r\n currentLevelTargetInfo.createAsync(criterion);\r\n });\r\n }\r\n }\r\n }).then(() => {\r\n currentLevelTargetInfo.on('AdGroupCriterionJobFunctionChanged', onChange);\r\n currentLevelTargetInfo.trigger('AdGroupCriterionJobFunctionChanged'); // trigger the initial validation\r\n });\r\n\r\n return () => {\r\n currentLevelTargetInfo.off('AdGroupCriterionJobFunctionChanged', onChange);\r\n };\r\n }, [jobTargets, negativeJobTargets]); // eslint-disable-line react-hooks/exhaustive-deps\r\n\r\n return (\r\n \r\n \r\n \r\n );\r\n\r\n return (\r\n <>\r\n (\r\n <>\r\n \r\n \r\n {i18n.getString(_TL_('Advanced settings'))}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n />\r\n \r\n );\r\n};\r\n\r\nAdvancedSettings.propTypes = {\r\n finalUrlSuffix: PropTypes.string,\r\n impressionTrackingUrls: PropTypes.arrayOf(PropTypes.string),\r\n mobileFinalUrls: PropTypes.string,\r\n trackingUrlTemplate: PropTypes.string,\r\n urlCustomParameters: PropTypes.arrayOf(PropTypes.shape({})),\r\n verifiedTrackingSettings: PropTypes.shape({}),\r\n biddingScheme: PropTypes.string,\r\n CallToAction: PropTypes.shape({\r\n language: PropTypes.string,\r\n cta: PropTypes.string,\r\n }),\r\n CallToActionText: PropTypes.string,\r\n CallToActionAriaText: PropTypes.string,\r\n BoostAnchors: PropTypes.shape({}),\r\n setNewCTACallback: PropTypes.func,\r\n isDisplay: PropTypes.bool,\r\n isVideo: PropTypes.bool,\r\n shouldShowDisclaimerPanel: PropTypes.bool,\r\n};\r\n\r\nAdvancedSettings.defaultProps = {\r\n finalUrlSuffix: undefined,\r\n mobileFinalUrls: undefined,\r\n trackingUrlTemplate: undefined,\r\n urlCustomParameters: undefined,\r\n impressionTrackingUrls: undefined,\r\n verifiedTrackingSettings: undefined,\r\n biddingScheme: null,\r\n CallToAction: null,\r\n CallToActionText: undefined,\r\n CallToActionAriaText: undefined,\r\n BoostAnchors: undefined,\r\n setNewCTACallback: null,\r\n isDisplay: false,\r\n isVideo: false,\r\n shouldShowDisclaimerPanel: false,\r\n};\r\n","import _, { map } from 'underscore';\r\nimport React, { useContext, useEffect, useState, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withCustomValidation } from '@bingads-webui-react/validation';\r\nimport { RecommendationContext } from '@bingads-webui-campaign-react/perf-max-recommendation';\r\nimport { TextAssetCollectionWithRecommendations, getTextAssetCollectionConfig, getTextAssetCollectionConfigByFeature } from '@bingads-webui-campaign-react/pmax-text-input';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { PermissionsContext } from '@bingads-webui-react/hoc-with-permissions';\r\n\r\nconst HeadlinesWithRecommendationPrefillInternal = (props) => {\r\n const {\r\n currentData,\r\n withInlineRecommendations,\r\n updateValidation,\r\n isAudienceAd,\r\n } = props;\r\n const i18n = useContext(I18nContext);\r\n const permissions = useContext(PermissionsContext);\r\n const textAssetCollectionConfig = useMemo(() => getTextAssetCollectionConfigByFeature({ featureName: 'displayPlus' }), []);\r\n\r\n const headlineConfig = useMemo(() => getTextAssetCollectionConfig('headlines', i18n, textAssetCollectionConfig), [i18n, textAssetCollectionConfig]);\r\n const [recommendationContext] = useContext(RecommendationContext);\r\n\r\n const headlinesRecommendationText = useMemo(() =>\r\n recommendationContext && recommendationContext.headlines && map(recommendationContext.headlines, rec => rec.Text), [recommendationContext]);\r\n const [prevHeadlineRecommendation, setPrevHeadlineRecommendation] = useState();\r\n\r\n useEffect(() => {\r\n if (headlinesRecommendationText && _.isArray(headlinesRecommendationText) && !_.isEmpty(headlinesRecommendationText) &&\r\n currentData && currentData.Headline0 === '') {\r\n if (prevHeadlineRecommendation &&\r\n (headlinesRecommendationText[0] === prevHeadlineRecommendation[0])) {\r\n return;\r\n }\r\n\r\n setPrevHeadlineRecommendation(headlinesRecommendationText);\r\n currentData.Headline0 = (headlinesRecommendationText && headlinesRecommendationText[0]) || '';\r\n updateValidation([], {\r\n Headlines: currentData,\r\n });\r\n }\r\n }, [prevHeadlineRecommendation, headlinesRecommendationText, currentData, updateValidation]);\r\n\r\n return (\r\n {\r\n anActivity.signal(`display plus native ad editor: uploaded image, isEditing:${!!editingAdId}, image id:${imgId}`);\r\n },\r\n onImageListUpdate: (anActivity, newImageList, curImageList) => {\r\n // log when new images added in audience ads editor\r\n // eslint-disable-next-line newline-per-chained-call\r\n const newImageIdList = _.chain(newImageList).flatten().map(img => `${img.id}`).uniq().sortBy().value();\r\n // eslint-disable-next-line newline-per-chained-call\r\n const curImageIdList = _.chain(curImageList).flatten().map(img => `${img.id}`).uniq().sortBy().value();\r\n const newImages = _.difference(newImageIdList, curImageIdList);\r\n if (newImages.length > 0) {\r\n anActivity.signal(`display plus native ad editor: added images, isEditing:${!!editingAdId}, image ids:${newImages.join(',')}, image count:${newImages.length}`);\r\n }\r\n },\r\n }}\r\n supportImageUpscale={permissions.dynamic.AudienceImageUpscale}\r\n isImageFittingEnabled={isImageFittingEnabled && assetAIEnhancementEnabled}\r\n />\r\n );\r\n }, [previewImagesSharedState, i18n, permissions, shouldLogosBeEnabled, shouldPortraitBeEnabled, updateFinalUrlCallback, data, suggestionPoller, DisplayPlusCopilotRecommendations, perfMarker, IsAmplifyEnabled, DisplayPlusAmplify, UAPLNativeAdIntegration, placementConfig, isMMAV2Enabled, isImageFittingEnabled, assetAIEnhancementEnabled, editingAdId]);\r\n\r\n const textAssetCollectionWithCopilot = useMemo(() => (\r\n \r\n \r\n );\r\n }, [videos, i18nMerged, perfMarker, permissions, oDataConfig, cid, aid, useBrandKit, setUseBrandKit, loadClipchampPlayer, serverContext]);\r\n\r\n return (\r\n
\r\n );\r\n};\r\n\r\nAdFormatOption.propTypes = {\r\n value: PropTypes.string.isRequired,\r\n onChange: PropTypes.func.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n disabled: PropTypes.bool,\r\n showHeader: PropTypes.bool,\r\n};\r\n\r\nAdFormatOption.defaultProps = {\r\n disabled: false,\r\n showHeader: true,\r\n};\r\n","import React, { useState, useMemo, useEffect, useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { noop, get } from 'underscore';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport SharedBudgetSwitchView from '@bingads-webui-campaign-legacy/shared-budget/view/shared-budget-switch-editor';\r\nimport Budget from '@bingads-webui-campaign-legacy/budget/view/budget';\r\nimport { withCustomValidation } from '@bingads-webui-react/validation';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { ValidatedLegacyBidStrategy } from '@bingads-webui-campaign/bid-strategy';\r\nimport types from '@bingads-webui-campaign-legacy/bidding-strategy/bidding-strategy-type';\r\nimport { getBudgetStyles } from '../styles/bid-strategy-styles';\r\n\r\nconst AudienceBudgetBidStrategyInternal = ({\r\n data,\r\n classes,\r\n updateValidation,\r\n campaignType,\r\n campaignSubType,\r\n isEnableMSANDisplayCampaignsEnabled,\r\n isEnableMSANVideoCampaignsEnabled,\r\n setBudgetView,\r\n hideBidStrategy,\r\n activity,\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n const campaign = useMemo(() => (\r\n isEnableMSANDisplayCampaignsEnabled || isEnableMSANVideoCampaignsEnabled ? data : data.campaign\r\n ), [data, isEnableMSANDisplayCampaignsEnabled, isEnableMSANVideoCampaignsEnabled]);\r\n const bidStrategyName = get(data, ['campaign', 'BidStrategyName'], '');\r\n\r\n const [sharedBudgetRef, setSharedBudgetRef] = useState();\r\n\r\n const sharedBudget = useMemo(() => {\r\n const factory = SharedBudgetSwitchView.newFactory(Budget);\r\n\r\n const sharedBudgetView = factory({\r\n accountCurrencyCode: 'USD',\r\n model: undefined,\r\n withRealTimeUpdates: true,\r\n });\r\n\r\n sharedBudgetView.render();\r\n\r\n return sharedBudgetView;\r\n }, []);\r\n\r\n const onBudgetChange = () => {\r\n const budget = sharedBudget.getValues();\r\n const isValid = sharedBudget.validate();\r\n if (activity) {\r\n activity.signal(`onBudgetChange - ${JSON.stringify(budget)} - isValid: ${isValid}}`);\r\n }\r\n updateValidation(isValid ? [] : [i18n.getString(_TL_('Invalid budget'))], { BudgetId: budget && budget.Id, Budget: { Amount: budget && budget.Amount, Id: budget && budget.Id, Type: budget && budget.Type } });\r\n };\r\n\r\n useEffect(() => {\r\n if (setBudgetView && sharedBudget) {\r\n setBudgetView(sharedBudget);\r\n }\r\n }, [sharedBudget, setBudgetView]);\r\n\r\n useEffect(() => {\r\n if (sharedBudgetRef) {\r\n sharedBudgetRef.innerHTML = '';\r\n sharedBudgetRef.append(sharedBudget.el);\r\n\r\n sharedBudget.update(campaign.Budget);\r\n sharedBudget.budgetView.on('budget.updated', onBudgetChange);\r\n sharedBudget.budgetView.on('change', onBudgetChange);\r\n sharedBudget.grid.gridView.on('didUpdate', onBudgetChange);\r\n sharedBudget.viewModel.sharedBudgetSwitch.subscribe(() => {\r\n onBudgetChange();\r\n });\r\n }\r\n\r\n return noop;\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [sharedBudgetRef]);\r\n\r\n useEffect(() => {\r\n sharedBudget.viewModel.isCPSSelected(campaign.BiddingScheme.Type === types.costPerSale);\r\n sharedBudget.viewModel.sharedBudgetIsNotAllowedWarning(i18n.getString(_TL_('Shared budget is not allowed if CPS is selected')));\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [campaign.BiddingScheme.Type]);\r\n\r\n return (\r\n setJobFunctionAssociationRef(newRef)} />\r\n
\r\n );\r\n};\r\n\r\nUnstyledJobFunctionPicker.propTypes = {\r\n classes: PropTypes.shape({\r\n pickerContainer: PropTypes.string.isRequired,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n validationProps: PropTypes.shape({\r\n data: PropTypes.shape({\r\n jobTargets: PropTypes.arrayOf(PropTypes.shape([])),\r\n negativeJobTargets: PropTypes.arrayOf(PropTypes.shape([])),\r\n }),\r\n }).isRequired,\r\n updateValidation: PropTypes.func.isRequired,\r\n onAudienceTargetInfoChange: PropTypes.func,\r\n shouldHide: PropTypes.bool,\r\n showExclusion: PropTypes.bool,\r\n initialJobTargets: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\r\n};\r\n\r\nUnstyledJobFunctionPicker.defaultProps = {\r\n shouldHide: false,\r\n showExclusion: true,\r\n onAudienceTargetInfoChange: noop,\r\n};\r\n\r\nconst UnstyledJobFunctionPickerWithBidAdjustment = withBidAdjustment(UnstyledJobFunctionPicker, 'JobFunction', ['jobTargets', 'negativeJobTargets']);\r\n\r\nexport const ValidatedJobFunctionPicker = withDefaultStyles(withCustomValidation(UnstyledJobFunctionPickerWithBidAdjustment), getJobFunctionTargetStyles);\r\n","import {\r\n audienceAssociationSectionStyle,\r\n commonDoubleListBoxStyle,\r\n convertToLocalStyle,\r\n glyphIconStyle,\r\n helpbuttonStyle,\r\n paginationStyle,\r\n searchboxStyle,\r\n uiblockerStyle,\r\n audienceModalStyles,\r\n audienceExpressionStyle,\r\n audienceCombinedListStyle,\r\n tableStyle,\r\n} from '@bingads-webui-campaign-react/common-styles';\r\nimport { criterionSettingJobFunctionStyles } from '@bingads-webui-campaign-react/campaign-adgroup-settings-shared-styles';\r\n\r\nexport const getJobFunctionTargetStyles = (_, { palette }) => ({\r\n '@global': {\r\n ...uiblockerStyle({ palette }),\r\n ...audienceModalStyles({ palette }, { modalWidth: 500 }),\r\n ...audienceExpressionStyle(),\r\n ...audienceCombinedListStyle({ palette }),\r\n },\r\n pickerContainer: {\r\n ...criterionSettingJobFunctionStyles({ palette }, { targetGridWidth: 816 }),\r\n ...audienceAssociationSectionStyle({ palette }, { singleListBoxWidth: 450 }),\r\n ...commonDoubleListBoxStyle({ palette }),\r\n ...paginationStyle({ palette }),\r\n ...tableStyle({ palette }),\r\n ...searchboxStyle({ palette }),\r\n ...convertToLocalStyle(glyphIconStyle({ palette })),\r\n ...convertToLocalStyle(helpbuttonStyle({ palette })),\r\n '& .statusEnabled_icon::before': {\r\n color: '#107c10',\r\n content: '\"\\\\ECCC\"',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n },\r\n '& .statusPaused_icon::before': { // Todo: find icons for status disabled etc.\r\n color: '#323130',\r\n content: '\"\\\\F6B0\"',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n },\r\n '& .statusExcluded_icon::before': { // Todo: find icons for status disabled etc.\r\n color: '#A80000',\r\n content: '\"\\\\E733\"',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n },\r\n },\r\n});\r\n","import { tableStyle } from '@bingads-webui-campaign-react/common-styles';\r\nimport { audienceBudgetBidsStyles } from '@bingads-webui-campaign-react/campaign-adgroup-settings-shared-styles';\r\n\r\nexport const getBidAdjustmentStyles = (_, { palette }) => ({\r\n pickerContainer: {\r\n ...audienceBudgetBidsStyles({ palette }),\r\n ...tableStyle({ palette }),\r\n overflow: 'auto',\r\n '& .statusEnabled_icon::before': {\r\n color: '#107c10',\r\n content: '\"\\\\ECCC\"',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n },\r\n '& .statusPaused_icon::before': { // Todo: find icons for status disabled etc.\r\n color: '#323130',\r\n content: '\"\\\\F6B0\"',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n },\r\n '& .statusExcluded_icon::before': { // Todo: find icons for status disabled etc.\r\n color: '#A80000',\r\n content: '\"\\\\E733\"',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n },\r\n },\r\n});\r\n","import { mergeStyles } from '@fluentui/react/lib/Styling';\r\n\r\nexport const placementsOptionStyle = mergeStyles({\r\n paddingLeft: '26px',\r\n fontWeight: '100',\r\n});\r\n\r\nexport const placementsAllSpecificChoiceGroup = mergeStyles({\r\n marginBottom: '20px',\r\n});\r\n\r\nexport const placementsCheckboxes = mergeStyles({\r\n marginBottom: '20px',\r\n});\r\n\r\nexport const itemStyle = mergeStyles({\r\n width: '320px',\r\n border: '1px solid',\r\n borderRadius: '4px',\r\n backgroundColor: '#FFFFFF',\r\n borderColor: '#D1D1D1',\r\n '&:hover': {\r\n backgroundColor: '#F5F5F5 !important',\r\n borderColor: '#BDBDBD !important',\r\n },\r\n});\r\n\r\nexport const itemStyleChecked = mergeStyles({\r\n width: '320px',\r\n border: '1px solid',\r\n borderRadius: '4px',\r\n backgroundColor: 'white !important',\r\n borderColor: '#BDBDBD !important',\r\n '&:hover': {\r\n backgroundColor: '#F5F5F5 !important',\r\n borderColor: '#BDBDBD !important',\r\n },\r\n});\r\n\r\nexport const itemStyleDisabled = mergeStyles({\r\n width: '320px',\r\n border: '1px solid',\r\n borderRadius: '4px',\r\n backgroundColor: '#F5F5F5 !important',\r\n borderColor: '#BDBDBD !important',\r\n});\r\n\r\nexport const placementCard = mergeStyles({\r\n paddingLeft: '16px',\r\n width: '280px',\r\n});\r\n\r\nexport const iconSection = mergeStyles({\r\n padding: '4px',\r\n border: 'solid 1px',\r\n width: '40px',\r\n height: '40px',\r\n marginTop: '8px',\r\n borderColor: 'white',\r\n backgroundColor: '#F0F0F0',\r\n '&:hover': {\r\n backgroundColor: '#E1E4E9 !important',\r\n },\r\n});\r\n\r\nexport const iconSectionChecked = mergeStyles({\r\n padding: '4px',\r\n border: 'solid 1px',\r\n width: '40px',\r\n height: '40px',\r\n marginTop: '8px',\r\n borderColor: 'white',\r\n backgroundColor: '#CFE4FA !important',\r\n '&:hover': {\r\n backgroundColor: '#E1E4E9 !important',\r\n },\r\n});\r\n\r\nexport const iconSectionDisabled = mergeStyles({\r\n padding: '4px',\r\n border: 'solid 1px',\r\n width: '40px',\r\n height: '40px',\r\n marginTop: '8px',\r\n borderColor: 'white',\r\n backgroundColor: '#E1E4E9 !important',\r\n});\r\n\r\nexport const titleStyle = mergeStyles({\r\n paddingLeft: '16px',\r\n fontWeight: '600',\r\n lineHeight: '16px',\r\n});\r\n\r\nexport const subheaderStyle = mergeStyles({\r\n paddingLeft: '56px',\r\n display: 'flex',\r\n paddingBottom: '12px',\r\n color: '#616161',\r\n lineHeight: '0.3',\r\n fontSize: '13px',\r\n});\r\n","import { any } from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport React, { useState, useContext, useMemo, useEffect, useCallback } from 'react';\r\nimport { Button, Link, mergeClasses, makeStyles } from '@fluentui/react-components';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { BidAdjustment as BidAdjustmentView } from '@bingads-webui-campaign/target-bid-adjustment';\r\n\r\nimport { getBidAdjustmentStyles } from './styles/bid-adjustment-styles';\r\n\r\nconst useStyles = makeStyles({\r\n hide: {\r\n display: 'none',\r\n },\r\n});\r\n\r\nconst TargetEditButton = (props) => {\r\n const {\r\n isBidAdjustmentsVisible, onClick, isTargetSelected, i18n, classes, readOnly,\r\n } = props;\r\n\r\n if (readOnly || !isBidAdjustmentsVisible) {\r\n return null;\r\n }\r\n\r\n return (\r\n \r\n {\r\n !isTargetSelected && (\r\n \r\n {i18n.getString(_TL_('No targets selected.'))}\r\n \r\n \r\n )\r\n }\r\n {\r\n // eslint-disable-next-line jsx-a11y/anchor-is-valid\r\n onClick()}>{i18n.getString(_TL_('Edit target'))}\r\n }\r\n
\r\n );\r\n};\r\n\r\nTargetEditButton.propTypes = {\r\n isBidAdjustmentsVisible: PropTypes.bool.isRequired,\r\n onClick: PropTypes.func.isRequired,\r\n isTargetSelected: PropTypes.bool.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n classes: PropTypes.shape({\r\n editTargetButtonContainer: PropTypes.string,\r\n noTargetSelected: PropTypes.string,\r\n }).isRequired,\r\n readOnly: PropTypes.bool,\r\n};\r\n\r\nTargetEditButton.defaultProps = {\r\n readOnly: false,\r\n};\r\n\r\n// 'targetNameList' is the list of fields in validationProps.data that are used to construct target grid\r\nexport const withBidAdjustment = (Component, criterionType, targetsFieldNameList) => {\r\n const HOC = (props) => {\r\n const { showBidAdjustments, readOnly, ...rest } = props;\r\n const [isBidAdjustmentsVisible, setIsBidAdjustmentsVisible] = useState(showBidAdjustments);\r\n const [bidAdjustmentRef, setBidAdjustmentRef] = useState();\r\n const [targetInfo, setTargetInfo] = useState();\r\n\r\n const i18n = useContext(I18nContext);\r\n\r\n const bidAdjustmentclasses = useDefaultStyles(getBidAdjustmentStyles);\r\n const styles = useStyles();\r\n\r\n const { validationProps = {} } = props;\r\n const { data } = validationProps;\r\n\r\n const isTargetSelected = useMemo(() => data && targetsFieldNameList.length > 0 &&\r\n any(targetsFieldNameList, targetsFieldName => data[targetsFieldName] && data[targetsFieldName].length > 0), [data]);\r\n\r\n const updateTargetInfo = useCallback(info => setTargetInfo(info), []);\r\n\r\n useEffect(() => {\r\n if (bidAdjustmentRef && bidAdjustmentRef.childElementCount === 0 && isBidAdjustmentsVisible && targetInfo) {\r\n const bidAdjustmentView = new BidAdjustmentView({\r\n currentLevelTargetInfo: targetInfo,\r\n criterionTypes: [criterionType],\r\n isAudienceCampaign: true,\r\n isForVNext: true,\r\n supportCashbackSettings: false,\r\n readonly: readOnly,\r\n });\r\n\r\n bidAdjustmentView.render();\r\n\r\n bidAdjustmentRef.innerHTML = '';\r\n bidAdjustmentRef.append(bidAdjustmentView.el);\r\n }\r\n }, [bidAdjustmentRef, isBidAdjustmentsVisible, readOnly, targetInfo]);\r\n\r\n const updateBidAdjustmentVisibility = useCallback((isVisible) => {\r\n setIsBidAdjustmentsVisible(isVisible);\r\n }, []);\r\n\r\n const targetEditButtonProps = useMemo(() => ({\r\n readOnly,\r\n isBidAdjustmentsVisible,\r\n onClick: updateBidAdjustmentVisibility,\r\n isTargetSelected,\r\n i18n,\r\n classes: bidAdjustmentclasses,\r\n }), [readOnly, isBidAdjustmentsVisible, updateBidAdjustmentVisibility, isTargetSelected, i18n, bidAdjustmentclasses]);\r\n\r\n return (\r\n \r\n \r\n setImpressionTrackingSettingRef(newRef)}\r\n />\r\n
\r\n );\r\n};\r\n\r\nImpressionTrackingSetting.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n impressionTrackingUrls: PropTypes.shape(PropTypes.string).isRequired,\r\n updateValidation: PropTypes.func.isRequired,\r\n};\r\n\r\nconst validatedImpressionTrackingSetting = withDefaultStyles(\r\n withCustomValidation(ImpressionTrackingSetting),\r\n getTopGridPanelCustomStyles\r\n);\r\n\r\nexport { validatedImpressionTrackingSetting as ImpressionTrackingSetting };\r\n","import React from 'react';\r\n\r\nexport const disclaimerInfo = i18n => (\r\n \r\n
\r\n );\r\n };\r\n\r\n HOC.propTypes = {\r\n showBidAdjustments: PropTypes.bool,\r\n readOnly: PropTypes.bool,\r\n validationProps: PropTypes.shape({\r\n data: PropTypes.shape({}),\r\n }).isRequired,\r\n };\r\n\r\n HOC.defaultProps = {\r\n showBidAdjustments: false,\r\n readOnly: false,\r\n };\r\n\r\n return HOC;\r\n};\r\n","export const getCollapsiblePanelStyles = (components, theme) => ({\r\n border: 'none',\r\n marginBottom: 'unset',\r\n backgroundColor: 'unset',\r\n\r\n '& .panel-heading': {\r\n padding: 0,\r\n borderBottom: 'none',\r\n marginBottom: 18,\r\n\r\n '& .panel-title': {\r\n fontSize: 18,\r\n '& > a': {\r\n color: theme && theme.palette && theme.palette.themePrimary,\r\n padding: 0,\r\n '&:hover, &:active': {\r\n color: theme && theme.palette && theme.palette.themeDarker,\r\n textDecoration: 'none',\r\n backgroundColor: 'unset',\r\n },\r\n },\r\n\r\n '& > a:after': {\r\n transform: 'rotate(180deg)',\r\n },\r\n\r\n '& > a.collapsed:after': {\r\n transform: 'rotate(90deg)',\r\n },\r\n },\r\n },\r\n\r\n '& .panel-collapse': {\r\n '& .panel-body': {\r\n padding: 0,\r\n overflow: 'hidden',\r\n },\r\n },\r\n});\r\n","import { getCollapsiblePanelStyles } from './collapsible-panel';\r\n\r\nexport const getNativeAdsStyles = (components, theme) => ({\r\n collapsiblePanel: getCollapsiblePanelStyles(components, theme),\r\n});\r\n","import { UAPPlacementTypeAlias as EPT } from '@bingads-webui-campaign-react/unified-ad-preview-library-cmui';\r\n\r\n//\r\n// Ad Preview Constants\r\nexport const extraPlacementInfo = {\r\n [EPT.MSANV2.MSEdgeCarousel]: {\r\n previewTitle: _TL_('Microsoft Edge carousel'),\r\n previewHeaderTitle: _TL_('Ad preview (2.01 : 1 aspect ratio)'),\r\n customClassName: 'mmav2_201x100',\r\n imagePreviewHeight: 10, // 152,\r\n editingPlacementType: EPT.MSANV2.MSEdgeCarousel,\r\n hasLogo: true,\r\n },\r\n [EPT.MSANV2.MSANBanner]: {\r\n previewTitle: _TL_('MSN banner'),\r\n previewHeaderTitle: _TL_('Ad preview (2 : 1 aspect ratio)'),\r\n customClassName: 'mmav2_200x100',\r\n imagePreviewHeight: 100,\r\n editingPlacementType: EPT.MSANV2.MSANBanner,\r\n },\r\n [EPT.MSANV2.MSANRiver]: {\r\n previewTitle: _TL_('MSN feed'),\r\n previewHeaderTitle: _TL_('Ad preview (1.91 : 1 aspect ratio)'),\r\n customClassName: 'mmav2_191x100',\r\n imagePreviewHeight: 200,\r\n editingPlacementType: EPT.MSANV2.MSANRiver,\r\n hasLogo: true,\r\n },\r\n [EPT.MSANV2.MSNCarousel]: {\r\n previewTitle: _TL_('MSN carousel'),\r\n previewHeaderTitle: _TL_('Ad preview (1.69 : 1 aspect ratio)'),\r\n customClassName: 'mmav2_169x100',\r\n imagePreviewHeight: 372,\r\n editingPlacementType: EPT.MSANV2.MSNCarousel,\r\n },\r\n [EPT.MSANV2.MSNPartnerStripe]: {\r\n previewTitle: _TL_('MSN partner stripe'),\r\n previewHeaderTitle: _TL_('Ad preview (1.53 : 1 aspect ratio)'),\r\n customClassName: 'mmav2_153x100',\r\n imagePreviewHeight: 150,\r\n editingPlacementType: EPT.MSANV2.MSNPartnerStripe,\r\n },\r\n [EPT.MSANV2.MSNRestoday]: {\r\n previewTitle: _TL_('MSN Restoday'),\r\n previewHeaderTitle: _TL_('Ad preview (1.24 : 1 aspect ratio)'),\r\n customClassName: 'mmav2_124x100',\r\n imagePreviewHeight: 84,\r\n editingPlacementType: EPT.MSANV2.MSNRestoday,\r\n },\r\n [EPT.MSANV2.MSANRectangle]: {\r\n previewTitle: _TL_('MSN rectangle image'),\r\n previewHeaderTitle: _TL_('Ad preview (1.20 : 1 aspect ratio)'),\r\n customClassName: 'mmav2_120x100',\r\n imagePreviewHeight: 250,\r\n editingPlacementType: EPT.MSANV2.MSANRectangle,\r\n hasLogo: true,\r\n },\r\n [EPT.MSANV2.MSEdgeMobile]: {\r\n previewTitle: _TL_('Microsoft Edge mobile'),\r\n previewHeaderTitle: _TL_('Ad preview (1 : 1 aspect ratio)'),\r\n customClassName: 'mmav2_1x1',\r\n imagePreviewHeight: 150,\r\n editingPlacementType: EPT.MSANV2.MSEdgeMobile,\r\n hasLogo: true,\r\n },\r\n [EPT.Outlook.Mobile]: {\r\n previewTitle: _TL_('Microsoft Outlook web (mobile)'),\r\n customClassName: 'outlook_text_mobile',\r\n editingPlacementType: EPT.Outlook.Mobile,\r\n hasLogo: true,\r\n },\r\n [EPT.Outlook.Web]: {\r\n previewTitle: _TL_('Microsoft Outlook web (computer)'),\r\n customClassName: 'outlook_text_web',\r\n editingPlacementType: EPT.Outlook.Web,\r\n hasLogo: true,\r\n },\r\n [EPT.Responsive.MSAN.WideImage]: {\r\n previewTitle: _TL_('MSN feed'),\r\n previewHeaderTitle: _TL_('Ad preview (1.91 : 1 aspect ratio)'),\r\n customClassName: 'msan_191x100',\r\n imagePreviewHeight: 200,\r\n disclaimerMessage: _TL_('This is an example of how your ad could appear on other websites on the Microsoft Advertising Network. The final ad format is likely to change to match the look and feel of the website.'),\r\n editingPlacementType: EPT.MSAN.WideImage,\r\n },\r\n [EPT.Responsive.MSAN.MSEdgeSingleCarousel]: {\r\n previewTitle: _TL_('Microsoft Edge single carousel'),\r\n previewHeaderTitle: _TL_('Ad preview (1.78 : 1 aspect ratio)'),\r\n customClassName: 'edge_178x100',\r\n imagePreviewHeight: 220,\r\n editingPlacementType: EPT.MSAN.MSEdgeSingleCarousel,\r\n },\r\n [EPT.Responsive.MSAN.MSNInArticle]: {\r\n previewTitle: _TL_('MSN in-article ad'),\r\n previewHeaderTitle: _TL_('Ad preview (1.5 : 1 aspect ratio)'),\r\n customClassName: 'msan_150x100',\r\n imagePreviewHeight: 200,\r\n editingPlacementType: EPT.MSAN.MSNInArticle,\r\n },\r\n [EPT.Responsive.MSAN.MSNSmallHeadline]: {\r\n previewTitle: _TL_('MSN small headline'),\r\n previewHeaderTitle: _TL_('Ad preview (1.33 : 1 aspect ratio)'),\r\n customClassName: 'msan_133x100',\r\n imagePreviewHeight: 75,\r\n editingPlacementType: EPT.MSAN.MSNSmallHeadline,\r\n },\r\n [EPT.Responsive.MSAN.SquareImage]: {\r\n previewTitle: _TL_('MSN square image'),\r\n previewHeaderTitle: _TL_('Ad preview (1 : 1 aspect ratio)'),\r\n customClassName: 'msan_1x1',\r\n imagePreviewHeight: 75,\r\n disclaimerMessage: _TL_('This is an example of how your ad could appear on other websites on the Microsoft Advertising Network. The final ad format is likely to change to match the look and feel of the website.'),\r\n editingPlacementType: EPT.MSAN.SquareImage,\r\n },\r\n [EPT.Responsive.MSANV2.MSANRiver]: {\r\n previewTitle: _TL_('MSN feed'),\r\n previewHeaderTitle: _TL_('Ad preview (1.91 : 1 aspect ratio)'),\r\n customClassName: 'mmav2_191x100',\r\n imagePreviewHeight: 200,\r\n editingPlacementType: EPT.MSANV2.MSANRiver,\r\n hasLogo: true,\r\n },\r\n [EPT.Responsive.MSANV2.MSEdgeMobile]: {\r\n previewTitle: _TL_('Microsoft Edge mobile'),\r\n previewHeaderTitle: _TL_('Ad preview (1 : 1 aspect ratio)'),\r\n customClassName: 'mmav2_1x1',\r\n imagePreviewHeight: 150,\r\n editingPlacementType: EPT.MSANV2.MSEdgeMobile,\r\n hasLogo: true,\r\n },\r\n [EPT.Responsive.Outlook.Mobile]: {\r\n previewTitle: _TL_('Microsoft Outlook web (mobile)'),\r\n customClassName: 'outlook_text_mobile',\r\n editingPlacementType: EPT.Outlook.Mobile,\r\n },\r\n [EPT.Responsive.Outlook.Web]: {\r\n previewTitle: _TL_('Microsoft Outlook web (computer)'),\r\n customClassName: 'outlook_text_web',\r\n editingPlacementType: EPT.Outlook.Web,\r\n },\r\n [EPT.Responsive.Boost.WindowsSpotlight]: {\r\n previewTitle: _TL_('Windows Spotlight'),\r\n previewHeaderTitle: _TL_('Ad preview'),\r\n editingPlacementType: EPT.Boost.WindowsSpotlight,\r\n hideHeaderButtons: true,\r\n },\r\n [EPT.Responsive.Boost.DiscoverCard]: {\r\n previewTitle: _TL_('Discover card'),\r\n previewHeaderTitle: _TL_('Ad preview'),\r\n editingPlacementType: EPT.Boost.DiscoverCard,\r\n hideHeaderButtons: true,\r\n },\r\n [EPT.Responsive.Boost.StartMenu]: {\r\n previewTitle: _TL_('Start Menu'),\r\n previewHeaderTitle: _TL_('Ad preview'),\r\n editingPlacementType: EPT.Boost.StartMenu,\r\n hasLogo: true,\r\n hideHeaderButtons: true,\r\n },\r\n [EPT.Responsive.Boost.ActionCenter]: {\r\n previewTitle: _TL_('Action Center'),\r\n previewHeaderTitle: _TL_('Ad preview'),\r\n editingPlacementType: EPT.Boost.ActionCenter,\r\n hasLogo: true,\r\n hideHeaderButtons: true,\r\n },\r\n [EPT.Responsive.Boost.Banner]: {\r\n previewTitle: _TL_('Banner'),\r\n previewHeaderTitle: _TL_('Ad preview'),\r\n editingPlacementType: EPT.Boost.Banner,\r\n hasLogo: true,\r\n hideHeaderButtons: true,\r\n },\r\n [EPT.Responsive.Boost.Prong1Prong2Feed]: {\r\n previewTitle: _TL_('Prong 1 / Prong 2 / Feed'),\r\n previewHeaderTitle: _TL_('Ad preview'),\r\n editingPlacementType: EPT.Boost.Prong1Prong2Feed,\r\n hasLogo: true,\r\n hideHeaderButtons: true,\r\n },\r\n [EPT.Responsive.Boost.Coachmark]: {\r\n previewTitle: _TL_('CoachMark'),\r\n previewHeaderTitle: _TL_('Ad preview'),\r\n editingPlacementType: EPT.Boost.Coachmark,\r\n hideHeaderButtons: true,\r\n },\r\n};\r\n\r\nexport const responsiveMsanMMAConfig = [{\r\n placementSetName: 'responsiveMsanMMAConfig',\r\n placementTypes: [\r\n EPT.Responsive.MSAN.WideImage,\r\n EPT.Responsive.MSAN.MSEdgeSingleCarousel,\r\n EPT.Responsive.MSAN.MSNInArticle,\r\n EPT.Responsive.MSAN.MSNSmallHeadline,\r\n EPT.Responsive.MSAN.SquareImage,\r\n EPT.Responsive.Outlook.Web,\r\n EPT.Responsive.Outlook.Mobile,\r\n ],\r\n}];\r\n\r\nexport const msanMMAV2Config = [{\r\n placementSetName: 'msanMMAV2Config',\r\n placementTypes: [\r\n EPT.MSANV2.MSEdgeCarousel,\r\n EPT.MSANV2.MSANBanner,\r\n EPT.MSANV2.MSANRiver,\r\n EPT.MSANV2.MSNCarousel,\r\n EPT.MSANV2.MSNPartnerStripe,\r\n EPT.MSANV2.MSNRestoday,\r\n EPT.MSANV2.MSANRectangle,\r\n EPT.MSANV2.MSEdgeMobile,\r\n EPT.Outlook.Web,\r\n EPT.Outlook.Mobile,\r\n ],\r\n}];\r\n\r\nexport const msanMMAConfig = [{\r\n placementSetName: 'msanMMAConfig',\r\n placementTypes: [\r\n EPT.MSAN.WideImage,\r\n EPT.MSAN.MSEdgeSingleCarousel,\r\n EPT.MSAN.MSNInArticle,\r\n EPT.MSAN.MSNSmallHeadline,\r\n EPT.MSAN.SquareImage,\r\n EPT.Outlook.Web,\r\n EPT.Outlook.Mobile,\r\n ],\r\n}];\r\n\r\nexport const responsiveMsanMMABoostConfig = [{\r\n placementSetName: 'responsiveMsanMMABoostConfig',\r\n placementTypes: [\r\n EPT.Responsive.MSAN.WideImage,\r\n EPT.Responsive.MSAN.MSEdgeSingleCarousel,\r\n EPT.Responsive.MSAN.MSNInArticle,\r\n EPT.Responsive.MSAN.MSNSmallHeadline,\r\n EPT.Responsive.MSAN.SquareImage,\r\n EPT.Responsive.Boost.WindowsSpotlight,\r\n EPT.Responsive.Boost.DiscoverCard,\r\n EPT.Responsive.Boost.StartMenu,\r\n EPT.Responsive.Boost.ActionCenter,\r\n EPT.Responsive.Boost.Prong1Prong2Feed,\r\n ],\r\n}];\r\n\r\nexport const responsiveMsanMMABoostConfigV2 = [{\r\n placementSetName: 'responsiveMsanMMABoostConfig',\r\n placementTypes: [\r\n EPT.Responsive.MSANV2.MSANRiver,\r\n EPT.Responsive.MSAN.MSEdgeSingleCarousel,\r\n EPT.Responsive.MSAN.MSNInArticle,\r\n EPT.Responsive.MSAN.MSNSmallHeadline,\r\n EPT.Responsive.MSANV2.MSEdgeMobile,\r\n EPT.Responsive.Boost.WindowsSpotlight,\r\n EPT.Responsive.Boost.DiscoverCard,\r\n EPT.Responsive.Boost.StartMenu,\r\n EPT.Responsive.Boost.ActionCenter,\r\n EPT.Responsive.Boost.Prong1Prong2Feed,\r\n ],\r\n}];\r\n\r\nexport const msanMMABoostConfig = [{\r\n placementSetName: 'msanMMABoostConfig',\r\n placementTypes: [\r\n EPT.MSAN.WideImage,\r\n EPT.MSAN.MSEdgeSingleCarousel,\r\n EPT.MSAN.MSNInArticle,\r\n EPT.MSAN.MSNSmallHeadline,\r\n EPT.MSAN.SquareImage,\r\n EPT.Boost.WindowsSpotlight,\r\n EPT.Boost.DiscoverCard,\r\n EPT.Boost.StartMenu,\r\n EPT.Boost.ActionCenter,\r\n EPT.Boost.Banner,\r\n EPT.Boost.Prong1Prong2Feed,\r\n EPT.Boost.Coachmark,\r\n ],\r\n}];\r\n\r\nexport const msanMMABoostConfigV2 = [{\r\n placementSetName: 'msanMMABoostConfig',\r\n placementTypes: [\r\n EPT.MSANV2.MSANRiver,\r\n EPT.MSAN.MSEdgeSingleCarousel,\r\n EPT.MSAN.MSNInArticle,\r\n EPT.MSAN.MSNSmallHeadline,\r\n EPT.MSANV2.MSEdgeMobile,\r\n EPT.Boost.WindowsSpotlight,\r\n EPT.Boost.DiscoverCard,\r\n EPT.Boost.StartMenu,\r\n EPT.Boost.ActionCenter,\r\n EPT.Boost.Banner,\r\n EPT.Boost.Prong1Prong2Feed,\r\n EPT.Boost.Coachmark,\r\n ],\r\n}];\r\n\r\nexport const BiddingSchemes = {\r\n EnhancedCpc: 'EnhancedCpc',\r\n MaxConversions: 'MaxConversions',\r\n ManualCpm: 'ManualCpm',\r\n};\r\n\r\nexport const AdPreviewOverideStylesByKey = {\r\n mma_191x100: { imagePreviewHeight: 153, imagePreviewWidth: 292 },\r\n edge_178x100: { imagePreviewHeight: 220, imagePreviewWidth: 390 },\r\n msan_191x100: { imagePreviewHeight: 200, imagePreviewWidth: 382 },\r\n msan_150x100: { imagePreviewHeight: 200, imagePreviewWidth: 300 },\r\n};\r\n\r\nexport const ERROR_ENTITY = {\r\n Campaign: 'campaign',\r\n AdGroup: 'adGroup',\r\n Ad: 'ResponsiveAd',\r\n};\r\n","import { extensionEditorStyles } from '@bingads-webui-campaign-react/common-styles';\r\nimport { AdPreviewOverideStylesByKey } from '../constants';\r\n\r\nconst IndicatorWidth = 10;\r\nconst IndicatorsGap = 8;\r\n\r\nconst getIndicatorsWidth = placements => (placements * IndicatorWidth) + ((placements - 1) * IndicatorsGap);\r\n\r\nexport const getImageExperienceStyles = (_, { palette = {} }) => ({\r\n '@global': {\r\n ...extensionEditorStyles({ palette }),\r\n },\r\n nativeAdStepShell: {\r\n width: '100%',\r\n },\r\n 'nativeAdStepShell-l': {\r\n width: 'calc(100% - 64px)',\r\n },\r\n nativeAdImagePreviewCarousel: {\r\n position: 'sticky',\r\n width: 420,\r\n top: '0px',\r\n '& .carousel-inner .ad-placement-preview': {\r\n height: 450,\r\n },\r\n '& .new-preview-carousel-container-adprelib': {\r\n // backgroundColor: '#ffffff',\r\n border: '1px solid #C8C8C8 !important',\r\n // borderRadius: '4px',\r\n // boxShadow: '0px 2px 4px 0px rgba(0, 0, 0, 0.10)',\r\n // maxWidth: '420px',\r\n minWidth: 'unset !important',\r\n\r\n '& .preview-string': {\r\n bottom: 'unset !important',\r\n },\r\n\r\n '& .ad-preview-actions': {\r\n display: 'flex',\r\n },\r\n '& .carousel-inner': {\r\n height: 450,\r\n },\r\n\r\n '& .carousel-indicators': {\r\n display: 'flex',\r\n gap: '8px',\r\n left: '50% !important',\r\n margin: '48px 0 !important',\r\n transform: 'translateX(-50%)',\r\n\r\n '& li': {\r\n margin: '0',\r\n },\r\n },\r\n\r\n '& .carousel-control': {\r\n display: 'flex',\r\n width: '12px',\r\n margin: '12px 0 !important',\r\n left: '50% !important',\r\n },\r\n\r\n '& .carousel-wrapper .carousel-control.left': {\r\n transform: ({ placements }) => {\r\n const transformations = [];\r\n\r\n // Move left arrow to the center\r\n transformations.push('translateX(-50%)');\r\n\r\n // Move left arrow to the left of the indicators\r\n const indicatorsWidth = getIndicatorsWidth(placements);\r\n transformations.push(`translateX(-${indicatorsWidth / 2}px)`);\r\n\r\n // Add extra space between the left arrow and the indicators\r\n transformations.push('translateX(-16px)');\r\n\r\n return transformations.join(' ');\r\n },\r\n bottom: 16,\r\n },\r\n\r\n '& .carousel-wrapper .carousel-control.right': {\r\n transform: ({ placements }) => {\r\n const transformations = [];\r\n\r\n // Move right arrow to the center\r\n transformations.push('translateX(-50%)');\r\n\r\n // Move right arrow to the right of the indicators\r\n const indicatorsWidth = getIndicatorsWidth(placements);\r\n transformations.push(`translateX(${indicatorsWidth / 2}px)`);\r\n\r\n // Add extra space between the right arrow and the indicators\r\n transformations.push('translateX(14px)');\r\n\r\n return transformations.join(' ');\r\n },\r\n bottom: 16,\r\n },\r\n\r\n '& .ad-preview-title': {\r\n height: '24px',\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n whiteSpace: 'nowrap',\r\n\r\n '& .preview-title-string-key': {\r\n color: '#323130',\r\n fontSize: '14px',\r\n fontWeight: 700,\r\n marginRight: '8px',\r\n },\r\n\r\n '& .preview-title-preview-type': {\r\n fontSize: '14px',\r\n },\r\n },\r\n\r\n '& .carousel-inner .ad-placement-preview, & .carousel-inner .ad-placement-card-preview': {\r\n overflow: 'hidden',\r\n\r\n '& .card-parent': {\r\n width: '100%',\r\n },\r\n\r\n '& .responsive-ad-preview-content': {\r\n boxSizing: 'border-box',\r\n width: '100%',\r\n },\r\n },\r\n '& .ad-placement-preview.boost-windows, & .ad-placement-card-preview.boost-windows': {\r\n '& .card-parent': {\r\n '& .responsive-ad-preview-content': {\r\n height: 'fit-content',\r\n width: 'fit-content',\r\n maxWidth: '100%',\r\n '& .text-container-apl': {\r\n maxWidth: 'calc(100% - 25px)',\r\n },\r\n },\r\n },\r\n },\r\n '& .ad-placement-preview.boost-start-menu, & .ad-placement-card-preview.boost-start-menu': {\r\n '& .new-responsive-ad-preview-container': {\r\n height: '100%',\r\n width: '100%',\r\n },\r\n },\r\n '& .ad-placement-preview.boost-actionCenter, & .ad-placement-card-preview.boost-actionCenter': {\r\n '& .new-responsive-ad-preview-container': {\r\n height: '100%',\r\n width: '100%',\r\n },\r\n },\r\n '& .ad-placement-preview.boost-banner, & .ad-placement-card-preview.boost-banner': {\r\n '& .new-responsive-ad-preview-container': {\r\n height: '100%',\r\n width: '100%',\r\n },\r\n },\r\n '& .ad-placement-preview.mma_191x100, & .ad-placement-card-preview.mma_191x100': {\r\n '& .card-parent': {\r\n maxWidth: AdPreviewOverideStylesByKey.mma_191x100.imagePreviewWidth,\r\n '& .text-container-apl': {\r\n padding: '5px 12px 12px 12px',\r\n '& .short-headline': {\r\n wordWrap: 'break-word',\r\n },\r\n '& .final-url': {\r\n whiteSpace: 'nowrap',\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n },\r\n },\r\n },\r\n },\r\n\r\n '& .ad-placement-preview.edge_178x100, & .ad-placement-card-preview.edge_178x100': {\r\n '& .card-parent': {\r\n '& .responsive-ad-preview-content': {\r\n height: 'fit-content',\r\n width: 'fit-content',\r\n maxWidth: '100%',\r\n '& .text-container-apl': {\r\n maxWidth: 'calc(100% - 25px)',\r\n },\r\n },\r\n },\r\n },\r\n\r\n '& .ad-placement-preview.msan_191x100, & .ad-placement-card-preview.msan_191x100': {\r\n '& .card-parent': {\r\n maxWidth: AdPreviewOverideStylesByKey.msan_191x100.imagePreviewWidth,\r\n },\r\n },\r\n\r\n '& .ad-placement-preview.msan_150x100, & .ad-placement-card-preview.msan_150x100': {\r\n '& .card-parent': {\r\n maxWidth: AdPreviewOverideStylesByKey.msan_150x100.imagePreviewWidth,\r\n },\r\n },\r\n\r\n '& .ad-placement-preview.msan_1x1, & .ad-placement-card-preview.msan_1x1': {\r\n padding: 20,\r\n },\r\n\r\n '& .ad-placement-preview.msan_133x100, & .ad-placement-card-preview.msan_133x100': {\r\n padding: 20,\r\n },\r\n\r\n '& .ad-placement-preview.bing_text, & .ad-placement-card-preview.bing_text': {\r\n '& .responsive-ad-preview-content': {\r\n '& .text-container-apl': {\r\n '& .final-url > .multi-line-processed-text': {\r\n whiteSpace: 'nowrap',\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n },\r\n },\r\n },\r\n },\r\n\r\n '& .ad-placement-preview.outlook_text_mobile, & .ad-placement-card-preview.outlook_text_mobile': {\r\n '& .responsive-ad-preview-content': {\r\n boxSizing: 'content-box',\r\n maxWidth: 'calc(100% - 50px)',\r\n '& .description': {\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n width: '100%',\r\n whiteSpace: 'nowrap',\r\n },\r\n },\r\n },\r\n\r\n '& .ad-placement-preview.outlook_text_web, & .ad-placement-card-preview.outlook_text_web': {\r\n padding: '0px 8px',\r\n\r\n '& .responsive-ad-preview-content': {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n minWidth: 0,\r\n '& .text-container-apl': {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n alignItems: 'center',\r\n whiteSpace: 'nowrap',\r\n minWidth: 0,\r\n '& .pre-headline-divider': {\r\n height: 2,\r\n },\r\n '& .description-parent': {\r\n flex: '1 1 0px',\r\n minWidth: 0,\r\n '& .description': {\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n width: '100%',\r\n },\r\n },\r\n },\r\n\r\n '& .business-name-with-ads': {\r\n marginRight: 10,\r\n },\r\n },\r\n },\r\n },\r\n },\r\n 'nativeAdImagePreviewCarousel-xxl': {\r\n '@media (min-width: 1400px)': {\r\n width: ({ isMMAV2Enabled }) => (isMMAV2Enabled ? 670 : 530),\r\n },\r\n width: 420,\r\n },\r\n 'nativeAdImagePreviewCarousel-xl': {\r\n width: 420,\r\n },\r\n rightStyles: {\r\n // '@media (min-width: 1750px)': {\r\n // width: '50%',\r\n // },\r\n '& .image-experience-content': {\r\n minWidth: 'unset !important',\r\n },\r\n },\r\n container: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n width: '100%',\r\n gap: '32px',\r\n '& .text-input-container': {\r\n width: '100% !important',\r\n },\r\n '& .title-item': {\r\n width: 'auto',\r\n maxWidth: '100%',\r\n },\r\n },\r\n leftStyles: {\r\n width: '100%',\r\n maxWidth: '530px',\r\n },\r\n 'leftStyles-xxl': {\r\n width: '530px',\r\n },\r\n 'leftStyles-xl': {\r\n width: '430px',\r\n },\r\n headerStackStyles: {\r\n width: 'unset',\r\n },\r\n 'headerStackStyles-l': {\r\n width: '430px',\r\n },\r\n 'headerStackStyles-xl': {\r\n width: '430px',\r\n },\r\n 'headerStackStyles-xxl': {\r\n width: '530px',\r\n },\r\n imageExperienceStyle: {\r\n '& .image-experience-content': {\r\n minWidth: 'unset !important',\r\n },\r\n '& .image-list-choice-group .ms-ChoiceFieldGroup-flexContainer': {\r\n width: 'unset !important',\r\n },\r\n },\r\n textAssetStyle: {\r\n '& .text-assets-collection-container': {\r\n width: '100%',\r\n // '@media (max-width: 1750px)': {\r\n // width: 'unset !important',\r\n // },\r\n },\r\n },\r\n businessNameStyle: {\r\n '& .business-name-container': {\r\n width: '100%',\r\n // '@media (max-width: 1750px)': {\r\n // width: 'unset !important',\r\n // },\r\n },\r\n },\r\n imageListLoadingContainer: {\r\n minHeight: 84,\r\n '& .loading': {\r\n paddingTop: 30,\r\n },\r\n },\r\n imageListErrorContainer: {\r\n paddingTop: 10,\r\n '& .alert': {\r\n alignItems: 'center',\r\n padding: [4, 16, 4, 12],\r\n\r\n '& .alert-image:before': {\r\n lineHeight: '32px',\r\n },\r\n\r\n '& .alert__content': {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n flexGrow: 1,\r\n alignItems: 'center',\r\n },\r\n\r\n '& .alert__action': {\r\n marginLeft: 'auto',\r\n marginTop: 'unset',\r\n },\r\n },\r\n },\r\n adPreviewPlacementHeader: {\r\n '& > .ad-preview-title': {\r\n margin: '20px 24px 16px 24px',\r\n fontSize: 18,\r\n fontWeight: 'normal',\r\n lineHeight: '24px',\r\n },\r\n },\r\n adPreviewPlacementContainer: {\r\n height: 450,\r\n display: 'flex',\r\n justifyContent: 'flex-start',\r\n flexDirection: 'column',\r\n\r\n '&:hover .card-parent .placement-card-content': {\r\n borderColor: '#004578',\r\n },\r\n\r\n '& .ad-placement-card-preview': ({ isMMAV2Enabled }) => (isMMAV2Enabled ? {} : {\r\n overflow: 'visible !important', // to show the shadow\r\n margin: 'unset !important',\r\n }),\r\n\r\n '& .ad-placement-card-preview.edge_178x100': {\r\n '& .card-parent': {\r\n maxWidth: 220 * 1.78,\r\n },\r\n },\r\n\r\n '& .ad-placement-card-preview.msan_133x100': {\r\n marginTop: '150px !important',\r\n paddingBottom: '0 !important',\r\n },\r\n\r\n '& .ad-placement-card-preview.msan_1x1': {\r\n marginTop: '150px !important',\r\n paddingBottom: '0 !important',\r\n },\r\n\r\n '& .ad-placement-card-preview.outlook_text_web': {\r\n marginTop: '150px !important',\r\n },\r\n\r\n '& .ad-placement-card-preview.outlook_text_mobile': {\r\n margin: '150px 11.5px 0 11.5px !important',\r\n },\r\n\r\n '& .preview-string': {\r\n width: '100%',\r\n fontSize: 14,\r\n textAlign: 'center',\r\n lineHeight: '20px',\r\n paddingTop: 12,\r\n marginBottom: ({ isMMAV2Enabled }) => (isMMAV2Enabled ? 20 : 0),\r\n },\r\n\r\n '& .additional-disclaimer-message': {\r\n position: 'absolute',\r\n left: 0,\r\n width: '100%',\r\n bottom: 0,\r\n padding: '0 24px',\r\n fontSize: 12,\r\n textAlign: 'left',\r\n lineHeight: '20px',\r\n },\r\n\r\n '& .placement-validation-message': {\r\n display: 'inline-block',\r\n width: '100%',\r\n fontSize: 14,\r\n textAlign: 'center',\r\n lineHeight: 2,\r\n marginRight: 16,\r\n },\r\n\r\n '& .responsive-boost-ad-placement-container': {\r\n display: 'flex',\r\n justifyContent: 'center',\r\n '& > .ad-placement-card-preview': {\r\n boxShadow: '0px 0.511px 1.533px rgb(0 0 0 / 10%), 0px 2.72533px 6.132px rgb(0 0 0 / 13%) !important',\r\n borderRadius: '5.11px !important',\r\n },\r\n },\r\n '& .responsive-boost-ad-placement-container.responsive-boost-start-menu': {\r\n marginTop: '30%',\r\n },\r\n '& .responsive-boost-ad-placement-container.responsive-boost-action-center': {\r\n marginTop: '20%',\r\n },\r\n '& .responsive-boost-ad-placement-container.responsive-boost-banner': {\r\n marginTop: '35%',\r\n marginLeft: 15,\r\n marginRight: 15,\r\n },\r\n },\r\n});\r\n","export const getNativeAdPanels = (serverContext, isVideo, isDisplay) => {\r\n if (isVideo || isDisplay) {\r\n const multiAdFormatAdPanels = {\r\n advancedPanels: [\r\n 'third-party-measurement',\r\n ],\r\n };\r\n\r\n if (isVideo && serverContext.DynamicPermissions.AdvancedURLOptionsForVideo) {\r\n multiAdFormatAdPanels.advancedPanels.push('advanced-url-options');\r\n }\r\n\r\n if (isDisplay && serverContext.DynamicPermissions.AdvancedURLOptionsForDisplay) {\r\n multiAdFormatAdPanels.advancedPanels.push('advanced-url-options');\r\n }\r\n\r\n if (serverContext.Permissions.isImpressionTrackingForDisplayAndVideoEnabled) {\r\n multiAdFormatAdPanels.advancedPanels.push('impression-tracking-URLs');\r\n }\r\n\r\n return multiAdFormatAdPanels;\r\n }\r\n\r\n const panels = {\r\n basicPanels: [\r\n 'images',\r\n 'business-name',\r\n 'text',\r\n ],\r\n advancedPanels: [\r\n 'mobile-final-url',\r\n 'advanced-url-options',\r\n 'impression-tracking-URLs',\r\n 'third-party-measurement',\r\n 'ads-optimization',\r\n ],\r\n };\r\n\r\n if (serverContext.DynamicPermissions.VideoAsAnAsset && !serverContext.Permissions.IsAmplifyEnabled) {\r\n panels.basicPanels.push('videos');\r\n }\r\n\r\n if (serverContext.Permissions.IsAmplifyEnabled && serverContext.DynamicPermissions.DisplayPlusAmplify) {\r\n panels.basicPanels.push('logos');\r\n panels.basicPanels.push('hotspot-panel');\r\n panels.basicPanels.push('portrait-images');\r\n\r\n panels.advancedPanels.push('anchor-ad');\r\n panels.advancedPanels.push('call-to-action');\r\n } else if (serverContext.Permissions.IsMSANLogoAndCTAForMMAEnabled) {\r\n panels.basicPanels.push('logos', 'call-to-action');\r\n }\r\n\r\n if (serverContext.Permissions.IsMSANDisclaimerEnabled &&\r\n !serverContext.Permissions.IsDomesticSimplifiedChineseEnabled) {\r\n panels.advancedPanels.push('disclaimer');\r\n }\r\n\r\n return panels;\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { ValidatedLegacyCallToAction } from '@bingads-webui-campaign-react/legacy-call-to-action';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nconst getStyles = () => ({\r\n container: {\r\n height: '100%',\r\n '& #language-cta-boost': {\r\n position: 'relative',\r\n marginBottom: '10px',\r\n },\r\n '& #cta-boost': {\r\n position: 'relative',\r\n marginBottom: '10px',\r\n },\r\n },\r\n});\r\n\r\nexport const ValidatedCallToAction = ({\r\n data,\r\n ...rest\r\n}) => {\r\n const classes = useDefaultStyles(getStyles);\r\n\r\n const {\r\n languageValue,\r\n value,\r\n ctaText,\r\n ctaAriaText,\r\n } = data;\r\n\r\n return (\r\n \r\n
\r\n {\r\n showBidAdjustments && !isBidAdjustmentsVisible && (\r\n \r\n )\r\n }\r\n \r\n
\r\n setBidAdjustmentRef(newRef)} />\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nValidatedCallToAction.propTypes = {\r\n data: PropTypes.shape({\r\n languageValue: PropTypes.string,\r\n value: PropTypes.string,\r\n ctaText: PropTypes.string,\r\n ctaAriaText: PropTypes.string,\r\n }).isRequired,\r\n};\r\n\r\n","import React, { useEffect, useMemo, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _, { noop } from 'underscore';\r\nimport classNames from 'classnames';\r\nimport { withCustomValidation } from '@bingads-webui-react/validation';\r\nimport {\r\n useDefaultStyles,\r\n withDefaultStyles,\r\n} from '@bingads-webui-react/with-default-styles';\r\nimport { ImpressionTrackingUrlOptions as ImpressionTrackingView } from '@bingads-webui-campaign/audience-campaign-shared';\r\nimport { mergeI18n } from '@bingads-webui-campaign-react/i18n-merger';\r\nimport { adEditorOverrideStyle } from '@bingads-webui-campaign-react/ad-editor-styles';\r\n\r\nconst getTopGridPanelCustomStyles = (__, palette, iconFontFamily) =>\r\n Object.assign({}, adEditorOverrideStyle({ palette, iconFontFamily }));\r\n\r\nconst extractImpressionTrackingSetting = (impressionTrackingUrls) => {\r\n if (_.isArray(impressionTrackingUrls)) {\r\n return impressionTrackingUrls;\r\n }\r\n return ['', ''];\r\n};\r\n\r\nexport const formatImpressionTrackingSetting = (\r\n impressionTrackingUrls,\r\n i18n\r\n) => {\r\n const [firstUrl, secondUrl] = extractImpressionTrackingSetting(impressionTrackingUrls);\r\n\r\n const getImpressionTrackingComponent = url => (\r\n \r\n {i18n.getString(_TL_('Impression tracking URL: ')) +\r\n (!url || url === '' ? i18n.getString(_TL_('None')) : url)}\r\n
\r\n );\r\n\r\n return (\r\n \r\n {getImpressionTrackingComponent(firstUrl)}\r\n {getImpressionTrackingComponent(secondUrl)}\r\n
\r\n );\r\n};\r\n\r\nconst ImpressionTrackingSetting = ({\r\n i18n,\r\n impressionTrackingUrls,\r\n updateValidation,\r\n}) => {\r\n const classes = useDefaultStyles();\r\n\r\n const [\r\n impressionTrackingSettingRef,\r\n setImpressionTrackingSettingRef,\r\n ] = useState();\r\n\r\n useEffect(() => {\r\n updateValidation([], { ImpressionTrackingUrls: impressionTrackingUrls });\r\n }, [impressionTrackingUrls, updateValidation]);\r\n\r\n const legacyI18n = useMemo(\r\n () => window.globalLegacyI18n.get('$/i18n!legacy/global'),\r\n []\r\n );\r\n const i18nMerged = useMemo(() => mergeI18n(legacyI18n, i18n), [\r\n legacyI18n,\r\n i18n,\r\n ]);\r\n\r\n const impressionTrackingViewReact = useMemo(\r\n () => {\r\n const impressionTrackingView = new ImpressionTrackingView({\r\n i18n: i18nMerged,\r\n initialImpressionTrackingUrls: impressionTrackingUrls,\r\n isIASSectionVisible: false,\r\n isVerticalUrlInput: true,\r\n });\r\n\r\n impressionTrackingView.render();\r\n\r\n return impressionTrackingView;\r\n },\r\n [impressionTrackingUrls, i18nMerged]\r\n );\r\n\r\n useEffect(\r\n () => {\r\n if (impressionTrackingSettingRef) {\r\n impressionTrackingSettingRef.innerHTML = '';\r\n impressionTrackingSettingRef.append(impressionTrackingViewReact.el);\r\n\r\n impressionTrackingViewReact.on('InputChange', (value) => {\r\n updateValidation([], {\r\n ImpressionTrackingUrls: value,\r\n });\r\n });\r\n }\r\n\r\n return noop;\r\n },\r\n [\r\n impressionTrackingSettingRef,\r\n impressionTrackingViewReact,\r\n updateValidation,\r\n ]\r\n );\r\n\r\n return (\r\n \r\n {i18n.getString(_TL_('Set up the third-party impression tracking information for your ads.'))}\r\n
\r\n \r\n {i18n.getString(_TL_('This is a campaign-level disclaimer that will only serve in your Native ads.'))}\r\n
\r\n);\r\n\r\n","import React, { useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { withCustomValidation, withError } from '@bingads-webui-react/validation';\r\nimport { withUnvalidatedControlErrors, withControlErrorHandling } from '@bingads-webui-campaign-react/error-handling';\r\nimport { BoostAnchors } from '@bingads-webui-campaign-react/responsive-ad-editor-components';\r\n\r\nconst ValidatedAnchorAdInternal = ({\r\n validationProps,\r\n updateValidation,\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n\r\n const { data = {} } = validationProps;\r\n\r\n const { BoostAnchors: BoostAnchorsData } = data;\r\n\r\n const onUpdate = (result) => {\r\n updateValidation([], { BoostAnchors: result });\r\n };\r\n\r\n return (\r\n \r\n {thirdPartyMeasurementWithValidation}\r\n
\r\n \r\n )\r\n }\r\n {shouldShowDisclaimerPanel && (\r\n \r\n {advancedInputSections()}\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nTextAssetCollectionWithRecommendationPrefillInternal.propTypes = {\r\n cancelFetchRecommendationAssetsJob: PropTypes.func.isRequired,\r\n fetchRecommendationAssets: PropTypes.func.isRequired,\r\n withInlineRecommendations: PropTypes.bool.isRequired,\r\n textAssetConfig: PropTypes.shape({\r\n headlines: PropTypes.shape({}),\r\n longHeadlines: PropTypes.shape({}),\r\n descriptions: PropTypes.shape({}),\r\n }),\r\n validationProps: PropTypes.shape({\r\n data: PropTypes.shape({\r\n Headlines: PropTypes.shape({}),\r\n LongHeadlines: PropTypes.shape({}),\r\n Descriptions: PropTypes.shape({}),\r\n }),\r\n }),\r\n isAudienceAd: PropTypes.bool.isRequired,\r\n};\r\n\r\nTextAssetCollectionWithRecommendationPrefillInternal.defaultProps = {\r\n textAssetConfig: {\r\n headlines: {},\r\n longHeadlines: {},\r\n descriptions: {},\r\n },\r\n validationProps: {\r\n data: {\r\n Headlines: {},\r\n LongHeadlines: {},\r\n Descriptions: {},\r\n },\r\n },\r\n};\r\n\r\nexport const TextAssetCollectionWithRecommendationPrefill = TextAssetCollectionWithRecommendationPrefillInternal;\r\n","import React, { useMemo, useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport {\r\n HeadlineAssetCollection,\r\n LongHeadlineAssetCollection,\r\n DescriptionAssetCollection,\r\n} from '@bingads-webui-campaign-react/pmax-text-input';\r\nimport { PermissionsContext } from '@bingads-webui-react/hoc-with-permissions';\r\nimport { withCustomValidation } from '@bingads-webui-react/validation';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { getImageExperienceStyles } from '../../styles';\r\n\r\nconst TextAssetCollectionWithCoPilotInternal = (props) => {\r\n const {\r\n fetchRecommendationAssets,\r\n cancelFetchRecommendationAssetsJob,\r\n setAddNewShortHeadlinesCallback,\r\n setAddNewLongHeadlinesCallback,\r\n setAddNewDescriptionCallback,\r\n isAudienceAd,\r\n } = props;\r\n\r\n const classes = useDefaultStyles(getImageExperienceStyles);\r\n const permissions = useContext(PermissionsContext);\r\n\r\n const headlineAssetCollection = useMemo(() => (\r\n \r\n {headlineAssetCollection}\r\n {longHeadlineAssetCollection}\r\n {descriptionAssetCollection}\r\n
\r\n );\r\n};\r\n\r\nTextAssetCollectionWithCoPilotInternal.propTypes = {\r\n fetchRecommendationAssets: PropTypes.func.isRequired,\r\n cancelFetchRecommendationAssetsJob: PropTypes.func.isRequired,\r\n setAddNewShortHeadlinesCallback: PropTypes.func.isRequired,\r\n setAddNewLongHeadlinesCallback: PropTypes.func.isRequired,\r\n setAddNewDescriptionCallback: PropTypes.func.isRequired,\r\n isAudienceAd: PropTypes.bool,\r\n};\r\n\r\nTextAssetCollectionWithCoPilotInternal.defaultProps = {\r\n isAudienceAd: false,\r\n};\r\n\r\nexport const TextAssetCollectionWithCoPilot = withCustomValidation(TextAssetCollectionWithCoPilotInternal);\r\n","import React, { useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { isEmpty, any, uniq } from 'underscore';\r\nimport { HotspotPanel } from '@bingads-webui-campaign-react/responsive-ad-editor-components';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { withCustomValidation, withError } from '@bingads-webui-react/validation';\r\nimport { withUnvalidatedControlErrors, withControlErrorHandling } from '@bingads-webui-campaign-react/error-handling';\r\nimport { entityIs, andComp, propertyIs } from '@bingads-webui-campaign-react/form-error';\r\nimport { ERROR_ENTITY } from '../constants';\r\n\r\nconst nativeAdHotspotsProp = andComp(entityIs(ERROR_ENTITY.Ad), propertyIs('Uri'));\r\n\r\nconst ValidatedHotspotInternal = ({\r\n updateValidation,\r\n validationProps,\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n\r\n const { data = {} } = validationProps;\r\n\r\n const { hotspots } = data;\r\n\r\n const validateHotSpot = (newHostpots) => {\r\n const missField = newHostpots.map(i =>\r\n isEmpty(i.glyph) || isEmpty(i.title) || isEmpty(i.actionText) || isEmpty(i.uri) ||\r\n (isEmpty(i.placement)));\r\n\r\n if (any(missField)) {\r\n return [i18n.getString(_TL_('HotSpot missing required field'))];\r\n }\r\n\r\n // check if any duplicate hotspot\r\n const hotspotStrings = newHostpots.map(hotspot => hotspot.title + hotspot.actionText + hotspot.desc + hotspot.uri + hotspot.glyph);\r\n\r\n if (newHostpots.length !== uniq(hotspotStrings).length) {\r\n return [i18n.getString(_TL_('HotSpots duplication'))];\r\n }\r\n\r\n return [];\r\n };\r\n\r\n const onUpdateHotspots = (newHostpots) => {\r\n updateValidation(validateHotSpot(newHostpots), { hotspots: [...newHostpots] });\r\n };\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nMultiAdVideoPreview.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n selectedVideoIdx: PropTypes.string,\r\n data: PropTypes.shape({\r\n data: PropTypes.instanceOf(Array),\r\n }).isRequired,\r\n};\r\n\r\nMultiAdVideoPreview.defaultProps = {\r\n selectedVideoIdx: null,\r\n};\r\n","import classNames from 'classnames';\r\nimport React, { useContext, useMemo, useRef, useState, useCallback, useEffect } from 'react';\r\nimport _, { noop, isArray, first, isEmpty } from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport { mergeStyles } from '@fluentui/react';\r\nimport { Tab, TabList } from '@fluentui/react-components';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { withActivityContext } from '@bingads-webui-react/hoc-with-signal';\r\n\r\nimport {\r\n Collapse,\r\n TextTitle,\r\n useCollapseState,\r\n ValidatedPanel,\r\n ValidatedFixedPanel,\r\n getPanelErrorProps,\r\n collapseExpander,\r\n} from '@bingads-webui-campaign/wizard-jumbo-card';\r\nimport { getFinalUrlCardSummaryDetails } from '@bingads-webui-campaign-react/validated-url-input';\r\nimport { withControlErrorHandling, withUnvalidatedControlErrors } from '@bingads-webui-campaign-react/error-handling';\r\nimport { withCustomValidation, withError } from '@bingads-webui-react/validation';\r\nimport { withFinalUrlRecommendationUpdate } from '@bingads-webui-campaign-react/perf-max-recommendation';\r\nimport { ValidatedLegacyCallToActionWithLanguage } from '@bingads-webui-campaign-react/legacy-call-to-action';\r\nimport {\r\n CopilotRepositoryProvider,\r\n withBannerService,\r\n} from '@bingads-webui/inline-copilot';\r\nimport { mergeI18n } from '@bingads-webui-campaign-react/i18n-merger';\r\nimport { entityIs, andComp, propertyIs } from '@bingads-webui-campaign-react/form-error';\r\nimport { useResponsiveStyles } from '@bingads-webui-campaign-react/common-hooks';\r\nimport {\r\n ValidatedFinalUrlWithRecommendations,\r\n ValidatedStoreBackedBusinessName,\r\n} from '@bingads-webui-campaign-react/pmax-text-input';\r\nimport { getODataConfig, ValidatedVideoExperienceWithRecommendationFetch } from '@bingads-webui-campaign-react/xandr-video-campaign-shared-components';\r\nimport { PerformanceMarkerContext } from '@bingads-webui-campaign-react/performance-marker-provider';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport { InstrumentationContext } from '@bingads-webui-react/hoc-with-instrumentation';\r\nimport { withScope } from '@bingads-webui-react/scope-service';\r\nimport { getTextCardSummaryDetails } from '@bingads-webui-campaign-react/validated-text-collection';\r\nimport {\r\n ImageListPortalContainerWithControlErrorHandling,\r\n ImageListSummaryCardDetails,\r\n ValidatedImageExperienceWrapper,\r\n PerfMaxAdPreview,\r\n PerfMaxAdPreviewUAPL,\r\n PerfMaxImageSuggestionCarousel,\r\n} from '@bingads-webui-campaign-react/pmax-image-experience';\r\nimport { AdPlacementsGroupType } from '@bingads-webui-campaign-react/ad-placement-consts';\r\nimport { useCopilot } from '@bingads-webui-campaign-react/copilot-experience';\r\nimport { DisclaimerAdExtension } from '@bingads-webui-campaign/campaign-ui-schemas';\r\nimport Repository from '@bingads-webui-campaign-legacy/adextension-shared/service/repository';\r\nimport { getAssetEnhancementSettings } from '@bingads-webui-campaign/image-experience-utils';\r\nimport { CampaignFetchProvider } from '@bingads-webui-campaign-react/campaign-http';\r\n\r\nimport { getImageExperienceStyles } from './styles';\r\nimport ImageAssetsImg from './media/image-assets.svg';\r\nimport VideoAssetsImg from './media/video-assets.svg';\r\nimport FinalUrlImg from './media/final-url.svg';\r\nimport LogoAssetsImg from './media/logo-assets.svg';\r\nimport BusinessNameImg from './media/business-name.svg';\r\nimport TextAssetsImg from './media/text.svg';\r\nimport hotspotImg from './media/hotspot.svg';\r\nimport CallToActionImg from './media/call-to-action.svg';\r\nimport { AdvancedSettings } from './components/advanced-settings';\r\nimport { TextAssetCollectionWithRecommendationPrefill } from './components/text-asset-collection-with-recommendation-prefill';\r\nimport { TextAssetCollectionWithCoPilot } from './components/text-asset-collection-with-copilot';\r\nimport {\r\n extraPlacementInfo,\r\n msanMMAConfig,\r\n msanMMAV2Config,\r\n responsiveMsanMMAConfig,\r\n responsiveMsanMMABoostConfigV2,\r\n msanMMABoostConfig,\r\n msanMMABoostConfigV2,\r\n responsiveMsanMMABoostConfig,\r\n AdPreviewOverideStylesByKey,\r\n ERROR_ENTITY,\r\n} from './constants';\r\nimport { getNativeAdPanels } from './configs';\r\nimport { ValidatedHotspot } from './components/validated-hotspot';\r\nimport { MultiAdVideoPreview } from './components/multi-ad-video-preview';\r\n\r\nconst DisplayPlusMaxImageCount = 16;\r\nconst DisplayPlusMaxVideoCount = 5;\r\n\r\nconst TAB_IMAGE_ADS = 'imageAds';\r\nconst TAB_VIDEO_ADS = 'videoAds';\r\n\r\nconst videoTypesWithOrder = ['VideoMedia16X9'];\r\n\r\nconst advancedSettingsStyles = mergeStyles({\r\n marginBottom: 40,\r\n});\r\n\r\nconst nativeAdBusinessNameProp = andComp(entityIs(ERROR_ENTITY.Ad), propertyIs('BusinessName'));\r\nconst nativeAdFinalUrlsProp = andComp(entityIs(ERROR_ENTITY.Ad), propertyIs('FinalUrls'));\r\nconst ValidatedFinalUrlWithStoreURL = withError(withCustomValidation(withFinalUrlRecommendationUpdate(ValidatedFinalUrlWithRecommendations)));\r\nconst ServerValidatedFinalUrl = withControlErrorHandling(withUnvalidatedControlErrors(ValidatedFinalUrlWithStoreURL, { filter: nativeAdFinalUrlsProp }));\r\n\r\nconst getPlacementCount = (IsAmplifyEnabled, DisplayPlusAmplify, IsMMAV2Enabled) => {\r\n if (IsAmplifyEnabled && DisplayPlusAmplify) {\r\n return 11;\r\n } else if (IsMMAV2Enabled) {\r\n return 10;\r\n }\r\n return 7;\r\n};\r\n\r\nexport const DisplayPlusNativeAdsInternal = ({\r\n data: ads,\r\n editingAdId,\r\n onDataChange,\r\n isSaving,\r\n isCanceling,\r\n biddingScheme,\r\n scope,\r\n activity,\r\n supportImageFitting,\r\n setAds,\r\n loadClipchampPlayer = null,\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n const serverContext = useContext(ServerContext);\r\n const perfMarker = useContext(PerformanceMarkerContext);\r\n const instrumentation = useContext(InstrumentationContext);\r\n\r\n const { cid, aid } = scope.values || {};\r\n const { Permissions, DynamicPermissions } = serverContext || {};\r\n const permissions = useMemo(() => ({ dynamic: { ...DynamicPermissions }, ...Permissions }), [DynamicPermissions, Permissions]);\r\n\r\n const {\r\n IsAmplifyEnabled, IsMSANLogoAndCTAForMMAEnabled, IsMSANDisclaimerEnabled, IsDomesticSimplifiedChineseEnabled,\r\n } = Permissions;\r\n\r\n const useClipchamp = permissions && permissions.dynamic && permissions.dynamic.VideoTemplateUI;\r\n\r\n const {\r\n DisplayPlusCopilotRecommendations, DisplayPlusAmplify, UAPLNativeAdIntegration, CopilotCTALogoGeneration,\r\n ImageFittingMVP = false, ImageFittingExlcudeMAE = true, ImageFittingUnifiedImageROI, AdPreviewRefresh,\r\n } = DynamicPermissions;\r\n\r\n const isMMAV2Enabled = Permissions.IsMMAV2Enabled && !(IsAmplifyEnabled && DisplayPlusAmplify);\r\n\r\n const stylingProps = useMemo(() =>\r\n (\r\n {\r\n component: {\r\n placements: getPlacementCount(DisplayPlusAmplify, IsAmplifyEnabled, isMMAV2Enabled),\r\n isMMAV2Enabled,\r\n },\r\n }\r\n ), [DisplayPlusAmplify, IsAmplifyEnabled, isMMAV2Enabled]);\r\n\r\n const getClasses = useResponsiveStyles(getImageExperienceStyles, stylingProps);\r\n\r\n const { data } = ads;\r\n const finalUrls = data && data.FinalUrls;\r\n const FinalUrlForRecommendation = data && data.FinalUrlForRecommendation;\r\n const businessName = data && data.BusinessName;\r\n const mobileFinalUrls = data && data.MobileFinalUrls;\r\n const headlines = (data && data.Headlines) || [];\r\n const longHeadlines = (data && data.LongHeadlines) || [];\r\n const descriptions = (data && data.Descriptions) || [];\r\n const TrackingUrlTemplate = data && data.TrackingUrlTemplate;\r\n const FinalUrlSuffix = data && data.FinalUrlSuffix;\r\n const UrlCustomParameters = data && data.UrlCustomParameters;\r\n const images = data && data.Images;\r\n const videos = data && data.videos;\r\n const impressionTrackingUrls = data && data.ImpressionTrackingUrls;\r\n const verifiedTrackingSettings = data && data.VerifiedTrackingSettings;\r\n const hotspots = data && data.hotspots;\r\n const CallToAction = data && data.CallToAction;\r\n const CallToActionText = data && data.CallToActionText;\r\n const CallToActionAriaText = data && data.CallToActionAriaText;\r\n const BoostAnchors = data && data.BoostAnchors;\r\n const Campaign = data && data.Campaign;\r\n const LegacyResponsiveAd = data && data.LegacyResponsiveAd; // true if is RA\r\n\r\n // disable image fitting for boost campaigns\r\n // disable image fitting for RA\r\n const isImageFittingEnabled = ImageFittingMVP && !ImageFittingExlcudeMAE && ImageFittingUnifiedImageROI && supportImageFitting && !(IsAmplifyEnabled && DisplayPlusAmplify) && !LegacyResponsiveAd;\r\n\r\n const nativeAdPanels = getNativeAdPanels(serverContext).basicPanels;\r\n\r\n const [\r\n allAdSettingsSections,\r\n adSettingsExpandedSections,\r\n setAdSettingsExpandedSections,\r\n ] = useCollapseState(\r\n nativeAdPanels /* all sections */,\r\n ['images', 'videos', 'logos', 'portrait-images', 'hotspot', 'business-name', 'text', 'call-to-action'] /* initially expanded sections */\r\n );\r\n\r\n const [\r\n finalUrlSection,\r\n finalUrlExpandedSection,\r\n setFinalUrlExpandedSection,\r\n ] = useCollapseState(['final-url'], ['final-url']);\r\n\r\n const maxUploadNum = useMemo(() => {\r\n const imageListLength = images && images.ImageList && isArray(images.ImageList) ? images.ImageList.length : 0;\r\n return DisplayPlusMaxImageCount - imageListLength;\r\n }, [images]);\r\n\r\n // copilot states and actions\r\n const [addNewDescriptionCallback, setAddNewDescriptionCallback] = useState(noop);\r\n const [addNewShortHeadlinesCallback, setAddNewShortHeadlinesCallback] = useState(noop);\r\n const [addNewLongHeadlinesCallback, setAddNewLongHeadlinesCallback] = useState(noop);\r\n\r\n const [finalUrlForCopilotRecommendations, setFinalUrlForCopilotRecommendations] = useState(first(finalUrls));\r\n\r\n const [selectedVideoIdx, setSelectedVideoIdx] = useState(null);\r\n const [selectedValue, setSelectedValue] = useState('imageAds');\r\n const [imageExperiencePortalContainerState, setImageExperiencePortalContainerState] = useState({});\r\n const [previewImagesSharedState, setPreviewImagesSharedState] = useState({ previewImageId: null, cropImageObj: null });\r\n const [imageExperienceAddNewImageCallback, setImageExperienceAddNewImageCallback] = useState(noop);\r\n const [newCTACallback, setNewCTACallback] = useState(noop);\r\n const [assetAIEnhancementEnabled, setAssetAIEnhancementEnabled] = useState(false);\r\n const [assetAIEnhancementSettingsCalled, setAssetAIEnhancementSettingsCalled] = useState(false);\r\n const [useBrandKit, setUseBrandKit] = useState(true);\r\n\r\n const imagesContainerRef = useRef(null);\r\n const logosContainerRef = useRef(null);\r\n const portraitContainerRef = useRef(null);\r\n\r\n const oDataConfig = useMemo(() => getODataConfig(serverContext), [serverContext]);\r\n\r\n const legacyI18n = useMemo(() => window.globalLegacyI18n.get('$/i18n!legacy/global'), []);\r\n const i18nMerged = useMemo(() => mergeI18n(legacyI18n, i18n), [legacyI18n, i18n]);\r\n\r\n const shouldLogosBeEnabled = useMemo(() => _.indexOf(nativeAdPanels, 'logos') !== -1, [nativeAdPanels]);\r\n const shouldPortraitBeEnabled = useMemo(() => _.indexOf(nativeAdPanels, 'portrait-images') !== -1, [nativeAdPanels]);\r\n\r\n const collectionsSummary = useMemo(() => ([\r\n { collection: headlines, displayText: i18n.getString(_TL_('short headlines')), displayTextSingular: i18n.getString(_TL_('short headline')) },\r\n { collection: longHeadlines, displayText: i18n.getString(_TL_('long headlines')), displayTextSingular: i18n.getString(_TL_('long headline')) },\r\n { collection: descriptions, displayText: i18n.getString(_TL_('descriptions')), displayTextSingular: i18n.getString(_TL_('description')) },\r\n ]), [headlines, longHeadlines, descriptions, i18n]);\r\n\r\n const textCardSummaryDetails = useMemo(() => getTextCardSummaryDetails(collectionsSummary, i18n), [collectionsSummary, i18n]);\r\n\r\n const hotspotSummaryDetails = useMemo(() => {\r\n if (!hotspots) {\r\n return i18n.getString(_TL_('No hotspots added'));\r\n }\r\n if (hotspots.length === 0) {\r\n return i18n.getString(_TL_('No hotspots added'));\r\n } else if (hotspots.length === 1) {\r\n return i18n.getString(_TL_('1 hotspot added'));\r\n }\r\n return i18n.getString(_TL_('{{count}} hotspots added'), { count: hotspots.length });\r\n }, [hotspots, i18n]);\r\n\r\n const allAssetsExpand = useMemo(\r\n () => collapseExpander({ setActiveKeys: setAdSettingsExpandedSections }),\r\n [setAdSettingsExpandedSections]\r\n );\r\n\r\n const finalUrlValidationProps = useMemo(() => ({\r\n data: {\r\n FinalUrls: finalUrls,\r\n },\r\n initialValue: {\r\n FinalUrls: finalUrls,\r\n },\r\n debounce: 400,\r\n }), [finalUrls]);\r\n\r\n const textAssetsValidationProps = useMemo(() => ({\r\n data: {\r\n Headlines: headlines,\r\n LongHeadlines: longHeadlines,\r\n Descriptions: descriptions,\r\n },\r\n }), [headlines, longHeadlines, descriptions]);\r\n\r\n const ctaValidationProps = useMemo(() => ({\r\n data: {\r\n ...CallToAction,\r\n },\r\n }), [CallToAction]);\r\n\r\n const onTabSelect = useCallback((event, tab) => {\r\n setSelectedValue(tab.value);\r\n }, []);\r\n\r\n const onReset = useCallback(() => {\r\n const dataPatch = {\r\n data: {\r\n data: {\r\n ...data,\r\n Images: {\r\n ...data.Images,\r\n ImageList: [],\r\n ImageAssets: null,\r\n },\r\n Headlines: {\r\n Headline0: '',\r\n Headline1: '',\r\n Headline2: '',\r\n },\r\n LongHeadlines: {\r\n LongHeadline0: '',\r\n },\r\n Descriptions: {\r\n Description0: '',\r\n Description1: '',\r\n },\r\n },\r\n isValid: false,\r\n },\r\n };\r\n\r\n setAds({\r\n ...data,\r\n Images: {\r\n ...data.Images,\r\n ImageList: [],\r\n ImageAssets: null,\r\n },\r\n Headlines: {\r\n Headline0: '',\r\n Headline1: '',\r\n Headline2: '',\r\n },\r\n LongHeadlines: {\r\n LongHeadline0: '',\r\n },\r\n Descriptions: {\r\n Description0: '',\r\n Description1: '',\r\n },\r\n });\r\n\r\n onDataChange(dataPatch);\r\n }, [data, onDataChange]);\r\n\r\n const [shouldShowDisclaimerPanel, setShouldShowDisclaimerPanel] = useState(false);\r\n const disclaimerRepositoryRef = useRef(new Repository({\r\n schema: DisclaimerAdExtension,\r\n skipExtensionCache: true,\r\n }));\r\n\r\n useEffect(() => {\r\n if (activity && activity.signal) {\r\n activity.signal(`[VideoAdsCopilot] - VideoAsAnAsset useBrandKitToggle changed to ${useBrandKit}`);\r\n }\r\n }, [useBrandKit, activity]);\r\n\r\n useEffect(() => {\r\n if (!IsMSANDisclaimerEnabled) {\r\n setShouldShowDisclaimerPanel(false);\r\n return null;\r\n }\r\n\r\n if (IsDomesticSimplifiedChineseEnabled) {\r\n setShouldShowDisclaimerPanel(false);\r\n return null;\r\n }\r\n\r\n if (Campaign && Campaign.Id) {\r\n return disclaimerRepositoryRef.current.association.findAll({\r\n where: {\r\n campaignId: Campaign.Id,\r\n },\r\n }).then((disclaimerdata) => {\r\n if (disclaimerdata && disclaimerdata.length > 0) {\r\n setShouldShowDisclaimerPanel(true);\r\n } else {\r\n setShouldShowDisclaimerPanel(false);\r\n }\r\n });\r\n }\r\n setShouldShowDisclaimerPanel(false);\r\n return null;\r\n }, [Campaign, IsMSANDisclaimerEnabled, IsDomesticSimplifiedChineseEnabled]);\r\n\r\n const {\r\n copilotBanner,\r\n suggestionPoller,\r\n } = useCopilot({\r\n maxUploadNum,\r\n addNewShortHeadlinesCallback,\r\n addNewLongHeadlinesCallback,\r\n addNewDescriptionCallback,\r\n imageExperienceAddNewImageCallback,\r\n newCTACallback,\r\n currentCTA: CallToAction && CallToAction.cta,\r\n onReset,\r\n cid,\r\n aid,\r\n serverContext,\r\n instrumentation,\r\n data,\r\n isSaving,\r\n isCanceling,\r\n enableCopilotRecommendations: DisplayPlusCopilotRecommendations,\r\n skipBusinessNameRecommendation: IsAmplifyEnabled && DisplayPlusAmplify,\r\n });\r\n\r\n const updateFinalUrlForCopilotRecommendations = useCallback(() => {\r\n // to prevent sending too many requests, only update the copilot recommendations after user has finished editing URL\r\n if (IsAmplifyEnabled && DisplayPlusAmplify) {\r\n // for boost campaigns remove the boost prefix from the final url\r\n const schemeRegex = /^(?!https?:\\/\\/)[\\w-]+:/i;\r\n\r\n // Replace the scheme part with an empty string\r\n const urlWithoutScheme = FinalUrlForRecommendation.replace(schemeRegex, '');\r\n\r\n setFinalUrlForCopilotRecommendations(urlWithoutScheme);\r\n } else {\r\n setFinalUrlForCopilotRecommendations(FinalUrlForRecommendation);\r\n }\r\n }, [DisplayPlusAmplify, FinalUrlForRecommendation, IsAmplifyEnabled]);\r\n\r\n const onFinalUrlFocusOut = useCallback(() => {\r\n updateFinalUrlForCopilotRecommendations();\r\n }, [updateFinalUrlForCopilotRecommendations]);\r\n\r\n const onFinalUrlKeyUp = useCallback((e) => {\r\n const { key } = e;\r\n if (key === 'Enter') {\r\n updateFinalUrlForCopilotRecommendations();\r\n }\r\n }, [updateFinalUrlForCopilotRecommendations]);\r\n\r\n const finalUrlAdditionalProps = useMemo(() => ({\r\n onBlur: onFinalUrlFocusOut,\r\n onKeyUp: onFinalUrlKeyUp,\r\n }), [onFinalUrlKeyUp, onFinalUrlFocusOut]);\r\n\r\n const updateFinalUrlCallback = useCallback((newFinalUrls) => {\r\n setAds({\r\n ...data,\r\n FinalUrls: newFinalUrls,\r\n });\r\n\r\n onDataChange({\r\n data: {\r\n data: {\r\n ...data,\r\n FinalUrls: newFinalUrls,\r\n },\r\n },\r\n });\r\n }, [data, onDataChange]);\r\n\r\n useEffect(() => {\r\n if (isImageFittingEnabled && !assetAIEnhancementSettingsCalled) {\r\n setAssetAIEnhancementSettingsCalled(true);\r\n getAssetEnhancementSettings({ aid, cid, oDataConfig }).then((settings) => {\r\n if (settings && settings.AssetAIEnhancementOptout) {\r\n setAssetAIEnhancementEnabled(settings.AssetAIEnhancementOptout === 'false');\r\n }\r\n });\r\n }\r\n }, [aid, assetAIEnhancementSettingsCalled, cid, isImageFittingEnabled, oDataConfig]);\r\n\r\n // memoized native ads components\r\n const serverValidatedFinalUrl = useMemo(() => (\r\n \r\n \r\n {i18n.getString(_TL_('Ad preview'))}\r\n \r\n
\r\n \r\n {videoTemplateUIEnabled ? (\r\n
\r\n \r\n \r\n {i18n.getString(_TL_('This is an example of what your video ad might look like. Depending on placement, the actual ad shown may appear differently.'))}\r\n \r\n
\r\n \r\n \r\n {i18n.getString(_TL_('Image ads'))} \r\n {i18n.getString(_TL_('Video ads'))} \r\n \r\n {selectedValue === TAB_IMAGE_ADS && PerfMaxAdPreviewElement}\r\n {selectedValue === TAB_VIDEO_ADS && (\r\n
\r\n );\r\n }, [UAPLNativeAdIntegration, i18n, images, hotspots, headlines, longHeadlines, descriptions, businessName, finalUrls, previewImagesSharedState, CallToAction, placementCustomizationPredicate, adPlacementsGroupType, adPreviewConfig, getClasses, isMMAV2Enabled, activity, isImageFittingEnabled, assetAIEnhancementEnabled, permissions.dynamic.VideoAsAnAsset, IsAmplifyEnabled, selectedValue, onTabSelect, selectedVideoIdx, data]);\r\n\r\n const validatedImageExperienceWrapper = useMemo(() => {\r\n let mappedPreviewImageSharedState = previewImagesSharedState;\r\n const { editingPlacementType } = previewImagesSharedState || {};\r\n if (editingPlacementType && extraPlacementInfo[editingPlacementType]) {\r\n // in editing panel, show normal placement components\r\n mappedPreviewImageSharedState = {\r\n ...previewImagesSharedState,\r\n editingPlacementType: extraPlacementInfo[editingPlacementType].editingPlacementType,\r\n };\r\n }\r\n\r\n return (\r\n \r\n {data && (\r\n \r\n
\r\n );\r\n};\r\n\r\nDisplayPlusNativeAdsInternal.propTypes = {\r\n data: PropTypes.shape({\r\n data: PropTypes.shape({\r\n FinalUrls: PropTypes.string,\r\n MobileFinalUrls: PropTypes.string,\r\n BusinessName: PropTypes.string,\r\n Headlines: PropTypes.arrayOf(PropTypes.string),\r\n LongHeadlines: PropTypes.arrayOf(PropTypes.string),\r\n Descriptions: PropTypes.arrayOf(PropTypes.string),\r\n Images: PropTypes.shape({}),\r\n videos: PropTypes.shape({}),\r\n TrackingUrlTemplate: PropTypes.string,\r\n FinalUrlSuffix: PropTypes.string,\r\n UrlCustomParameters: PropTypes.string,\r\n ImpressionTrackingUrls: PropTypes.string,\r\n VerifiedTrackingSettings: PropTypes.shape({}),\r\n FinalUrlForRecommendation: PropTypes.string,\r\n CallToAction: PropTypes.shape({\r\n cta: PropTypes.string,\r\n language: PropTypes.string,\r\n }),\r\n CallToActionText: PropTypes.string,\r\n CallToActionAriaText: PropTypes.string,\r\n hotspots: PropTypes.shape({}),\r\n BoostAnchors: PropTypes.shape({}),\r\n }),\r\n }).isRequired,\r\n onDataChange: PropTypes.func.isRequired,\r\n error: PropTypes.shape({}).isRequired,\r\n scope: PropTypes.shape({\r\n values: PropTypes.shape({\r\n cid: PropTypes.string,\r\n aid: PropTypes.string,\r\n }),\r\n }).isRequired,\r\n isSaving: PropTypes.bool.isRequired,\r\n isCanceling: PropTypes.bool.isRequired,\r\n biddingScheme: PropTypes.string,\r\n editingAdId: PropTypes.string,\r\n activity: PropTypes.shape({}),\r\n supportImageFitting: PropTypes.bool,\r\n setAds: PropTypes.func,\r\n};\r\n\r\nDisplayPlusNativeAdsInternal.defaultProps = {\r\n biddingScheme: null,\r\n editingAdId: null,\r\n activity: undefined,\r\n supportImageFitting: false,\r\n setAds: () => { },\r\n};\r\n\r\nexport const DisplayPlusNativeAds = withActivityContext(withBannerService(withScope(DisplayPlusNativeAdsInternal)));\r\n","import { identity, result, has } from 'underscore';\r\nimport { getBulkApiErrors } from '@bingads-webui-campaign/api-errors';\r\n\r\nexport const ERROR_ENTITY = {\r\n Campaign: 'campaign',\r\n AdGroup: 'adGroup',\r\n Ad: 'ResponsiveAd',\r\n};\r\n\r\nexport const isBulkWrappedResponse = bulkResult => has(bulkResult, 'entity');\r\n\r\nconst getBulkUploadEntityType = entitySchema =>\r\n (entitySchema.properties['bulk-upload-type'] || {}).value ||\r\n entitySchema.name;\r\n\r\nexport const getBulkUploadErrorType = entitySchema =>\r\n `${getBulkUploadEntityType(entitySchema)} Error`;\r\n\r\nexport const mapBulkUpsertErrors = (\r\n errors,\r\n bulkUpsertEntityErrorMap,\r\n errorProcessor = identity,\r\n scenario,\r\n i18n,\r\n activityLogger\r\n) =>\r\n getBulkApiErrors(errors, scenario, i18n, activityLogger).map((error) => {\r\n const errorType = error.type;\r\n const mappedErrorType = result(bulkUpsertEntityErrorMap, errorType, errorType);\r\n // eslint-disable-next-line no-param-reassign\r\n error.type = mappedErrorType;\r\n return errorProcessor(error);\r\n });\r\n\r\nexport const modelToViewModelForBulkErrors = (errors, bulkUpsertEntityErrorMap, scenario, i18n, activityLogger) =>\r\n mapBulkUpsertErrors(errors, bulkUpsertEntityErrorMap, /* errorProcessor */ identity, scenario, i18n, activityLogger);\r\n","import { map, pick, each, object, find, filter } from 'underscore';\r\nimport Promise from 'bluebird';\r\nimport {\r\n setMTImageModel,\r\n getFlattenedImageAssetList,\r\n updateAssetsIdsAsync,\r\n} from '@bingads-webui-campaign-react/responsive-ad-editor-utils';\r\nimport { thirdPartyMeasurementStringToViewModel, getVerifiedTrackingSettingWrite } from '@bingads-webui-campaign-react/third-party-measurement';\r\n\r\nfunction formatIntoTextArrayString(texts) {\r\n let res = '';\r\n map(texts, (textValue = '') => {\r\n // To escape double quotes in the text value to avoid bulkupsert failure\r\n res += `${res === '' ? '' : ','}{\"Text\":\"${textValue.replace(/\"/g, '\\\\\"')}\"}`;\r\n });\r\n return `[${res}]`;\r\n}\r\n\r\nconst formatHotspots = (hotspots) => {\r\n const hotspotsArray = map(hotspots, (hotspot) => {\r\n const hotspotObj = {\r\n Title: hotspot.title,\r\n ActionText: hotspot.actionText,\r\n Description: hotspot.desc,\r\n Uri: hotspot.uri,\r\n Glyph: hotspot.glyph,\r\n Placement: hotspot.placement,\r\n };\r\n return hotspotObj;\r\n });\r\n return hotspotsArray;\r\n};\r\n\r\nconst getProcessedDataAsync = (originalData, imageList, imageOdata, permissions, UiUnsupportedRatios = [], isImageFittingEnabled = false) => {\r\n // for portrait images we need to check if we are in display plus amlify and isamplifyenabled.\r\n // if it is boost campaigns mma v2 should be disabled.\r\n const isBoostCampaign = permissions.dynamic.DisplayPlusAmplify && permissions.IsAmplifyEnabled;\r\n\r\n const flattenedIncludedImageAssetList = getFlattenedImageAssetList(imageList, !isBoostCampaign, !isBoostCampaign);\r\n const imageIndexAsThumbnail = 0;\r\n\r\n return updateAssetsIdsAsync(flattenedIncludedImageAssetList, imageIndexAsThumbnail, !isBoostCampaign, imageOdata)\r\n .then((updates) => {\r\n const originalThumbnailAsset = flattenedIncludedImageAssetList[imageIndexAsThumbnail];\r\n const overrideInfo = updates[imageIndexAsThumbnail];\r\n let imageToGenerateThumbnail;\r\n\r\n if (overrideInfo) {\r\n imageToGenerateThumbnail = originalThumbnailAsset.copyThumbnailLookToNewImage({\r\n id: overrideInfo.id,\r\n src: overrideInfo.bingSrc,\r\n });\r\n } else {\r\n imageToGenerateThumbnail = originalThumbnailAsset;\r\n }\r\n\r\n const portraitImage = find(imageList, items => items.find(item => item.isPortrait));\r\n\r\n setMTImageModel(\r\n originalData,\r\n updates,\r\n map(imageList, imageArray => filter(imageArray, imageObj => imageObj.isIncluded)) /* imageList */,\r\n {\r\n isMultimediaAdinMSANEnabled: !isBoostCampaign,\r\n isMultimediaAd: false,\r\n isMMAV2Enabled: !isBoostCampaign,\r\n isBoostPortraitImageEnabled: isBoostCampaign, // this.isBoostPortraitImageEnabled,\r\n isBoost200x100ImageEnabled: permissions && permissions.IsBoost200x100ImageEnabled, // this.isBoost200x100ImageEnabled,\r\n isBoostNewAspectRatioSupportEnabled: permissions && permissions.IsBoostNewAspectRatioSupportEnabled, // this.isBoostNewAspectRatioSupportEnabled,\r\n isImageFittingEnabled,\r\n },\r\n UiUnsupportedRatios,\r\n portraitImage && portraitImage[0]\r\n );\r\n\r\n return {\r\n mtModel: originalData,\r\n imageToGenerateThumbnail,\r\n };\r\n });\r\n};\r\n\r\nexport const viewModelToModelForAd = ({\r\n adsViewModel, campaign, adGroup, imageOdata, permissions, isImageFittingEnabled = false,\r\n}, isDeletedEntities = false) => {\r\n // parse the ads\r\n const adViewModel = [];\r\n\r\n let images;\r\n let videos;\r\n\r\n if (adsViewModel.length === 0) {\r\n return Promise.resolve(adViewModel);\r\n }\r\n\r\n const ad = adsViewModel[0];\r\n\r\n if (ad.videos && Array.isArray(ad.videos)) {\r\n videos = ad.videos.map(video => ({\r\n id: video.id,\r\n idString: video.idString,\r\n subType: video.type,\r\n }));\r\n }\r\n\r\n const fields = {\r\n 'Client Id': '0', // `${ad.uid}`,\r\n FinalUrls: ad.FinalUrls,\r\n Videos: JSON.stringify(videos),\r\n Images: JSON.stringify(images),\r\n MobileFinalUrls: ad.MobileFinalUrls,\r\n BusinessName: ad.BusinessName,\r\n Headlines: ad.Headlines ? formatIntoTextArrayString(ad.Headlines) : undefined,\r\n LongHeadlines: ad.LongHeadlines ? formatIntoTextArrayString(ad.LongHeadlines) : undefined,\r\n Descriptions: ad.Descriptions ? formatIntoTextArrayString(ad.Descriptions) : undefined,\r\n TrackingUrlTemplate: ad.TrackingUrlTemplate,\r\n FinalUrlSuffix: ad.FinalUrlSuffix,\r\n UrlCustomParameters: ad.UrlCustomParameters,\r\n ImpressionTrackingUrls: ad.ImpressionTrackingUrls,\r\n HotSpots: JSON.stringify(formatHotspots(ad.hotspots)),\r\n Campaign: pick(campaign, 'Id'),\r\n AdGroup: pick(adGroup, 'Id'),\r\n CallToAction: ad.CallToAction && ad.CallToAction.cta,\r\n CallToActionLanguage: ad.CallToAction && ad.CallToAction.language,\r\n CallToActionText: ad.CallToActionText,\r\n CallToActionAriaText: ad.CallToActionAriaText,\r\n BoostAnchors: ad.BoostAnchors,\r\n ...getVerifiedTrackingSettingWrite(ad.VerifiedTrackingSettings),\r\n };\r\n\r\n // only add call to action if we have the value set.\r\n if (ad.CallToActionAriaText) {\r\n fields.CallToActionAriaText = ad.CallToActionAriaText;\r\n }\r\n\r\n if (ad.Id) {\r\n fields.Id = ad.Id;\r\n }\r\n\r\n if (isDeletedEntities) {\r\n fields.Status = 'Deleted';\r\n }\r\n\r\n if (ad.Images && ad.Images.ImageList && imageOdata) {\r\n return getProcessedDataAsync(fields, ad.Images.ImageList, imageOdata, permissions, [], isImageFittingEnabled)\r\n .then(({ mtModel }) => {\r\n adViewModel.push(mtModel);\r\n\r\n return adViewModel;\r\n });\r\n }\r\n\r\n adViewModel.push(fields);\r\n return Promise.resolve(adViewModel);\r\n};\r\n\r\n\r\nconst processTextAttribute = (jsonTextAttribute, name) =>\r\n object(JSON.parse(jsonTextAttribute).map((textAttribute, index) => ([`${name}${index}`, textAttribute.Text])));\r\n\r\nexport const bulkModelToViewModelForAd = ({\r\n adsModel,\r\n originalAdsModel,\r\n}) => {\r\n const savedAd = adsModel[0];\r\n\r\n savedAd.Images = originalAdsModel.data.Images;\r\n savedAd.videos = originalAdsModel.data.videos || [];\r\n savedAd.Headlines = savedAd.Headlines ? processTextAttribute(savedAd.Headlines, 'Headline') : undefined;\r\n savedAd.LongHeadlines = savedAd.LongHeadlines ? processTextAttribute(savedAd.LongHeadlines, 'LongHeadline') : undefined;\r\n savedAd.Descriptions = savedAd.Descriptions ? processTextAttribute(savedAd.Descriptions, 'Description') : undefined;\r\n savedAd.VerifiedTrackingSettings = savedAd.VerifiedTrackingData ? thirdPartyMeasurementStringToViewModel(savedAd.VerifiedTrackingData) : undefined;\r\n savedAd.hotspots = originalAdsModel.data.hotspots || [];\r\n savedAd.CallToAction = {\r\n cta: savedAd.CallToAction,\r\n language: savedAd.CallToActionLanguage,\r\n };\r\n\r\n const adViewModel = {\r\n data: savedAd,\r\n isValid: true,\r\n isDirty: false,\r\n currentPageIndex: 1,\r\n };\r\n\r\n return adViewModel;\r\n};\r\n\r\n\r\nexport const modelToViewModelForAd = ({\r\n adsModel,\r\n}) => {\r\n const adsVideoModel = { ...adsModel };\r\n\r\n return adsVideoModel;\r\n};\r\n\r\nexport const splitUpdateAndCreateAds = ({\r\n adsViewModel, oldAdsModel, campaign, adGroup, imageOdata, permissions, isImageFittingEnabled = false,\r\n}) => {\r\n const adIds = [];\r\n\r\n const adsToCreate = [];\r\n const adsToUpdate = [];\r\n const adsToDelete = [];\r\n\r\n each([adsViewModel], (ad) => {\r\n if (ad.Images && ad.Images.ImageList) {\r\n // check if the ad has ID\r\n if (ad.Id) {\r\n adsToUpdate.push(ad);\r\n\r\n // add the Ids of Ads that have already been saved to API\r\n // so that we can delete if the oldAdsModel contains more Ids\r\n adIds.push(ad.Id);\r\n } else {\r\n adsToCreate.push(ad);\r\n }\r\n }\r\n });\r\n\r\n if (oldAdsModel) {\r\n // get ids of the ads that are deleted (missing in adIds array)\r\n each([oldAdsModel], (ad) => {\r\n if (ad.Images && ad.Images.ImageList) {\r\n adsToDelete.push(ad);\r\n }\r\n });\r\n }\r\n\r\n const promises = {\r\n createAds: viewModelToModelForAd({\r\n adsViewModel: adsToCreate, campaign, adGroup, imageOdata, permissions, isImageFittingEnabled,\r\n }),\r\n updateAds: viewModelToModelForAd({\r\n adsViewModel: adsToUpdate, campaign, adGroup, imageOdata, permissions, isImageFittingEnabled,\r\n }),\r\n deleteAds: viewModelToModelForAd({\r\n adsViewModel: adsToDelete, campaign, adGroup, imageOdata, permissions, isImageFittingEnabled,\r\n }, true),\r\n };\r\n\r\n return Promise.props(promises).then((results) => {\r\n const updatedAds = results.updateAds || [];\r\n const createdAds = results.createAds || [];\r\n const deletedAds = results.deleteAds || [];\r\n\r\n const adsNeededToCreate = createdAds;\r\n\r\n const adsNeededToUpdate = [...updatedAds, ...deletedAds];\r\n\r\n return { adsNeededToCreate, adsNeededToUpdate };\r\n });\r\n};\r\n","import Promise from 'bluebird';\r\nimport _ from 'underscore';\r\nimport { ResponsiveAd } from '@bingads-webui/campaign-odata-schemas';\r\nimport { edmCampaign } from '@bingads-webui/edm-campaign';\r\nimport { getODataConfig } from '@bingads-webui-campaign-react/xandr-video-campaign-shared-components';\r\nimport { getLogVersion } from '@bingads-webui-campaign-react/asset-library-model';\r\nimport { newVideoFromMTObject } from '@bingads-webui-campaign-react/image-experience-video-part';\r\nimport {\r\n getLoggerWithoutPageInfo,\r\n createVideoRepository,\r\n createImageRepository,\r\n createFolderRepository,\r\n uploadVideoMetadata,\r\n} from '@bingads-webui-campaign-react/asset-library-services';\r\n\r\nimport { isBulkWrappedResponse, getBulkUploadErrorType, modelToViewModelForBulkErrors, ERROR_ENTITY } from './common';\r\nimport { bulkModelToViewModelForAd, splitUpdateAndCreateAds, viewModelToModelForAd } from './native-ad';\r\n\r\nconst GENERIC_ERROR_MESSAGE_KEY = _TL_(\"We've encountered an error and can't continue. Please contact support for further assistance.\");\r\nconst adEDM = edmCampaign.types.resolve('Model.ResponsiveAd');\r\n\r\nconst adResource = new adEDM.ResourceIdentifier();\r\n\r\nconst createData = data => adResource.bulkCreate.bind(adResource)(data);\r\nconst updateData = data => adResource.bulkUpdate.bind(adResource)(data);\r\n\r\nconst bulkUpsertAdSettingsEntityErrorMap = {\r\n [getBulkUploadErrorType(ResponsiveAd)]: ERROR_ENTITY.Ad,\r\n};\r\n\r\nconst getErrorsPlaceholders = () => ({\r\n systemErrors: [],\r\n serverErrors: [],\r\n});\r\n\r\nexport const deleteAd = ({ ad, campaign, adGroup }) => viewModelToModelForAd({ adsViewModel: ad, campaign, adGroup }, true)\r\n .then(deleteAds => updateData(deleteAds))\r\n .then(result => result, err => err);\r\n\r\nexport const saveAds = ({\r\n ads: adsViewModel,\r\n oldAdsModel,\r\n campaign,\r\n adGroup,\r\n activity = null,\r\n imageOdata = null,\r\n permissions,\r\n}, { scenario, i18n }, { isImageFittingEnabled = false } = {}) => splitUpdateAndCreateAds({\r\n adsViewModel: adsViewModel.data, oldAdsModel, campaign, adGroup, imageOdata, permissions, isImageFittingEnabled,\r\n})\r\n .then(({ adsNeededToCreate, adsNeededToUpdate }) => {\r\n // const adsModel = viewModelToModelForAd({ adsViewModel, campaign, adGroup });\r\n\r\n // const modelToSave = adsModel;\r\n\r\n const promises = {};\r\n\r\n if (adsNeededToCreate.length > 0) {\r\n promises.createAds = createData(adsNeededToCreate);\r\n }\r\n\r\n if (adsNeededToUpdate.length > 0) {\r\n promises.updateAds = updateData(adsNeededToUpdate);\r\n }\r\n\r\n return promises;\r\n }).then(promises => Promise.props(promises)\r\n .then((results) => {\r\n const updatedAds = results.updateAds || [];\r\n const createdAds = results.createAds || [];\r\n\r\n const result = [...updatedAds, ...createdAds];\r\n\r\n const data = {\r\n ads: bulkModelToViewModelForAd({\r\n adsModel: result,\r\n originalAdsModel: adsViewModel,\r\n }),\r\n ...getErrorsPlaceholders(),\r\n };\r\n\r\n\r\n if (activity) {\r\n activity.signal(`onAdsSavedSuccessfully, redirecting to campaign grid page - adCount: ${result.length}`);\r\n }\r\n return data;\r\n }, (bulkOrSystemError) => {\r\n if (isBulkWrappedResponse(bulkOrSystemError)) {\r\n const { entity, errors } = bulkOrSystemError;\r\n\r\n // we need to attach uid to each error to identify which video panel has an error.\r\n // the uid is stored in the clientid of the error.\r\n\r\n const ads = entity ?\r\n bulkModelToViewModelForAd({\r\n adsModel: entity,\r\n originalAdsModel: adsViewModel,\r\n }) :\r\n adsViewModel;\r\n\r\n const serverErrors = modelToViewModelForBulkErrors(\r\n errors,\r\n bulkUpsertAdSettingsEntityErrorMap,\r\n scenario,\r\n i18n,\r\n activity\r\n );\r\n\r\n if (activity) {\r\n activity.signal(`onAdsSavedUnsuccessfully, ${JSON.stringify(serverErrors)}`);\r\n }\r\n // eslint-disable-next-line prefer-promise-reject-errors\r\n return Promise.reject({\r\n ads: { ...ads },\r\n serverErrors,\r\n });\r\n }\r\n\r\n // Activity\r\n // eslint-disable-next-line no-console\r\n console.warn(`Campaign bulk upsert system error: ${bulkOrSystemError.stack || bulkOrSystemError.message || bulkOrSystemError}`);\r\n // eslint-disable-next-line prefer-promise-reject-errors\r\n return Promise.reject({\r\n ads: adsViewModel,\r\n systemErrors: [i18n.getString(GENERIC_ERROR_MESSAGE_KEY)],\r\n // TODO: We would want to return the criterions with Ids, but UI's bulk drops them\r\n });\r\n }));\r\n\r\nexport const saveAdsWithMetadata = (data, context) => {\r\n const { serverContext, activityLogger, i18n } = context;\r\n const logger = getLoggerWithoutPageInfo(activityLogger, getLogVersion(), 'NativeAdsAdStep');\r\n const cid = serverContext.CurrentCustomer.Id;\r\n const aid = serverContext.CurrentAccount.Id;\r\n const oDataConfig = getODataConfig(serverContext);\r\n\r\n const videoRepository = createVideoRepository({\r\n oDataConfig,\r\n aid,\r\n cid,\r\n });\r\n\r\n const folderRepository = createFolderRepository({\r\n i18n,\r\n logger,\r\n oDataConfig,\r\n aid,\r\n cid,\r\n });\r\n\r\n const imageRepository = createImageRepository({\r\n oDataConfig,\r\n aid,\r\n cid,\r\n logger,\r\n i18n,\r\n activity: activityLogger,\r\n });\r\n\r\n const uploadVideoIfNeeded = ({ ads }) => {\r\n const videoPromises = [];\r\n\r\n if (ads.data.videos && ads.data.videos.length > 0) {\r\n ads.data.videos.forEach((video, index) => {\r\n if (video && !video.id) {\r\n videoPromises.push(uploadVideoMetadata({\r\n videoMetadata: video,\r\n newVideoFromMTObject,\r\n folderRepository,\r\n imageRepository,\r\n videoRepository,\r\n }).then((v) => {\r\n _.extend(ads.data.videos[index], v);\r\n }));\r\n }\r\n });\r\n }\r\n\r\n if (_.isEmpty(videoPromises)) {\r\n return Promise.resolve(ads);\r\n }\r\n\r\n return Promise.all(videoPromises).then(() => ads);\r\n };\r\n\r\n return uploadVideoIfNeeded(data).then(() => saveAds(data, context));\r\n};\r\n\r\n","import React from 'react';\r\nimport _ from 'underscore';\r\nimport classNames from 'classnames';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { Radio, RadioGroup, Text } from '@fluentui/react-components';\r\nimport { ContentViewRegular, ImageMultipleRegular, VideoRegular } from '@fluentui/react-icons';\r\n\r\nconst iconSize = 24;\r\n\r\nconst getStyles = () => ({\r\n titleContainer: {\r\n marginBottom: 20,\r\n },\r\n adFormatContainer: {\r\n maxWidth: 530,\r\n marginBottom: 12,\r\n },\r\n radioGroup: {\r\n alignItems: 'stretch !important',\r\n },\r\n radioOption: {\r\n flex: 1,\r\n background: 'white',\r\n margin: 3,\r\n padding: 12,\r\n borderRadius: 4,\r\n border: '1px solid #E1DFDD',\r\n justifyContent: 'start',\r\n\r\n '& .fui-Radio__indicator': {\r\n position: 'absolute',\r\n top: 4,\r\n right: 4,\r\n display: 'none',\r\n\r\n '& svg': {\r\n marginLeft: 1.5,\r\n },\r\n },\r\n\r\n '& .fui-Radio__label': {\r\n flex: 1,\r\n },\r\n\r\n '&.selected .fui-Radio__indicator': {\r\n display: 'block',\r\n },\r\n\r\n '&.selected': {\r\n border: '1px solid #0078D4',\r\n },\r\n },\r\n labelContainer: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'start',\r\n minHeight: 135,\r\n },\r\n label: {\r\n display: 'flex',\r\n fontSize: 16,\r\n marginBottom: 5,\r\n\r\n '& svg': {\r\n paddingRight: 4,\r\n },\r\n },\r\n});\r\n\r\nexport const AdFormat = {\r\n Native: 'Native',\r\n Display: 'Display',\r\n Video: 'Video',\r\n};\r\n\r\nconst OptionConfigs = {\r\n [AdFormat.Native]: {\r\n label: _TL_('Native'),\r\n description: _TL_('Show personalized, responsive, and visually rich ads based on your assets.'),\r\n getIcon: () => \r\n
\r\n \r\n )}\r\n \r\n \r\n \r\n\r\n {\r\n DisplayPlusCopilotRecommendations && (copilotBanner)\r\n }\r\n \r\n \r\n
\r\n \r\n {serverValidatedFinalUrl}\r\n
\r\n \r\n \r\n {imageListPortalContainer}\r\n
\r\n \r\n \r\n {videosContainer}\r\n
\r\n \r\n \r\n
\r\n )\r\n }\r\n \r\n \r\n {storeBackedBusinessName}\r\n
\r\n \r\n \r\n {advancedSettings}\r\n
\r\n \r\n
\r\n \r\n {adPreview}\r\n
\r\n \r\n {validatedImageExperienceWrapper}\r\n
\r\n \r\n {showHeader && (\r\n onChange(data.value)}\r\n value={value}\r\n layout=\"horizontal-stacked\"\r\n disabled={disabled}\r\n >\r\n {_.keys(AdFormat).map(key => (\r\n \r\n \r\n {i18n.getString(OptionConfigs[AdFormat[key]].description)}\r\n \r\n
\r\n }\r\n />\r\n ))}\r\n \r\n \r\n {i18n.getString(_TL_('Show compelling ads to your ideal audience across the Microsoft Advertising Network.'))} \r\n
\r\n )}\r\n {i18n.getString(disabled ? _TL_('Edit ads') : _TL_('Create ads'))}
\r\n\r\n {OptionConfigs[AdFormat[key]].getIcon()}\r\n {i18n.getString(OptionConfigs[AdFormat[key]].label)}\r\n
\r\n \r\n \r\n {_.range(count).map(index => ( \r\n);\r\n\r\nSectionShimmer.propTypes = {\r\n count: PropTypes.number,\r\n};\r\n\r\nSectionShimmer.defaultProps = {\r\n count: 3,\r\n};\r\n","import React, { useEffect, useMemo, useState, useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { noop, every, pluck } from 'underscore';\r\nimport { criterionHelper } from '@bingads-webui-campaign/audience-campaign-shared';\r\nimport { CompanyNameTargetSetting } from '@bingads-webui-campaign/audience-criterion-setting';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { withCustomValidation } from '@bingads-webui-react/validation';\r\nimport { AudienceTargetInfo } from '@bingads-webui-campaign/audience-target-info';\r\nimport { ActivityContext } from '@bingads-webui-react/hoc-with-signal';\r\nimport { getCompanyTargetStyles } from './styles/company-target-styles';\r\n\r\nexport const formatCompany = ({ companyNameTargets, i18n }) => {\r\n if (!companyNameTargets || !companyNameTargets.length) {\r\n return i18n.getString(_TL_('Target Companies'));\r\n }\r\n\r\n if (companyNameTargets.length === 1) {\r\n return i18n.getString(_TL_('Targeted: 1 company'));\r\n }\r\n\r\n return i18n.getString(_TL_('Targeted: {{count}} companies'), { count: (companyNameTargets.length) });\r\n};\r\n\r\nconst UnstyledCompanyPicker = (props) => {\r\n const {\r\n classes,\r\n updateValidation,\r\n validationProps,\r\n showExclusion,\r\n } = props;\r\n\r\n const { data: { companyNameTargets, negativeCompanyNameTargets } } = validationProps;\r\n\r\n const [companyAssociationRef, setCompanyAssociationRef] = useState();\r\n\r\n const activity = useContext(ActivityContext);\r\n\r\n const currentLevelTargetInfo = useMemo(() => (\r\n new AudienceTargetInfo({\r\n resourceName: 'AdGroupCriterion',\r\n isForVNext: true,\r\n initAudienceAssociationView: false,\r\n })), []);\r\n\r\n const companyAssociationView = useMemo(() => {\r\n const companyView = new CompanyNameTargetSetting({\r\n criterionType: 'CompanyName',\r\n type: 'CompanyName',\r\n showBidOnlyNote: false,\r\n showExclusion,\r\n defaultBidAdjustment: 0,\r\n isForVNext: true,\r\n currentLevelTargetInfo,\r\n });\r\n\r\n companyView.render();\r\n\r\n return companyView;\r\n }, [currentLevelTargetInfo, showExclusion]);\r\n\r\n const onChange = () => {\r\n const updatedItems = companyAssociationView.currentLevelTargetInfo.getSnapshot(false);\r\n\r\n const companyNameTarget = updatedItems.filter(({ CriterionType }) => (CriterionType === 'CompanyName'))\r\n .map(({ Criterion }) => {\r\n const { CompanyNameCriterion } = Criterion;\r\n\r\n return CompanyNameCriterion;\r\n });\r\n\r\n const negativeCompanyNameTarget = updatedItems.filter(({ CriterionType }) => (CriterionType === 'NegativeCompanyName'))\r\n .map(({ Criterion }) => {\r\n const { CompanyNameCriterion } = Criterion;\r\n\r\n return CompanyNameCriterion;\r\n });\r\n\r\n updateValidation([], { companyNameTargets: companyNameTarget, negativeCompanyNameTargets: negativeCompanyNameTarget });\r\n\r\n if (activity) {\r\n activity.signal(`onCompanyTargetChange - ${JSON.stringify({ companies: companyNameTarget })}`);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (companyAssociationRef) {\r\n companyAssociationRef.innerHTML = '';\r\n companyAssociationRef.append(companyAssociationView.el);\r\n\r\n currentLevelTargetInfo.off('AdGroupCriterionCompanyNameChanged', onChange);\r\n\r\n const currentTargets = currentLevelTargetInfo.getSnapshot(false).filter(({ CriterionType }) => (CriterionType === 'CompanyName'));\r\n const currentNegativeTargets = currentLevelTargetInfo.getSnapshot(false).filter(({ CriterionType }) => (CriterionType === 'NegativeCompanyName'));\r\n\r\n // check if the current targets are the same as the selected targets\r\n const isCompanyTargetSame = every(currentTargets, ((target) => {\r\n const { Criterion } = target;\r\n\r\n const { CompanyNameCriterion } = Criterion;\r\n\r\n return pluck(companyNameTargets, 'Target').includes(CompanyNameCriterion.Target);\r\n }));\r\n\r\n // check if the current targets are the same as the selected targets\r\n const isNegativeCompanyTargetSame = every(currentNegativeTargets, ((target) => {\r\n const { Criterion } = target;\r\n\r\n const { CompanyNameCriterion } = Criterion;\r\n\r\n return pluck(negativeCompanyNameTargets, 'Target').includes(CompanyNameCriterion.Target);\r\n }));\r\n\r\n if (companyNameTargets && (currentTargets.length !== companyNameTargets.length || !isCompanyTargetSame)) {\r\n companyNameTargets.forEach((companyTarget) => {\r\n const criterionData = {\r\n ...companyTarget,\r\n Id: companyTarget.Target,\r\n };\r\n\r\n const criterion = criterionHelper.buildLinkedInCriterion(\r\n 'CompanyName',\r\n criterionData,\r\n true,\r\n 0,\r\n 0\r\n );\r\n currentLevelTargetInfo.createAsync(criterion);\r\n });\r\n }\r\n\r\n if (negativeCompanyNameTargets && (currentNegativeTargets.length !== negativeCompanyNameTargets.length || !isNegativeCompanyTargetSame)) {\r\n negativeCompanyNameTargets.forEach((companyTarget) => {\r\n const criterionData = {\r\n ...companyTarget,\r\n Id: companyTarget.Target,\r\n };\r\n\r\n const criterion = criterionHelper.buildLinkedInCriterion(\r\n 'CompanyName',\r\n criterionData,\r\n false,\r\n 0,\r\n 0\r\n );\r\n currentLevelTargetInfo.createAsync(criterion);\r\n });\r\n }\r\n\r\n currentLevelTargetInfo.on('AdGroupCriterionCompanyNameChanged', onChange);\r\n }\r\n\r\n return noop;\r\n }, [companyAssociationView, companyAssociationRef, companyNameTargets, negativeCompanyNameTargets]); // eslint-disable-line react-hooks/exhaustive-deps\r\n\r\n return (\r\n (a: T, b: T, msg?: string, msg2?: string): void {\r\n if (a !== b) {\r\n // eslint-disable-next-line no-nested-ternary\r\n const message = msg ? msg2 ? `${msg} ${msg2}` : msg : \"\";\r\n fail(`Expected ${a} === ${b}. ${message}`);\r\n }\r\n}\r\n\r\nexport function assertLessThan(a: number, b: number, msg?: string): void {\r\n if (a >= b) {\r\n fail(`Expected ${a} < ${b}. ${msg || \"\"}`);\r\n }\r\n}\r\n\r\nexport function assertLessThanOrEqual(a: number, b: number): void {\r\n if (a > b) {\r\n fail(`Expected ${a} <= ${b}`);\r\n }\r\n}\r\n\r\nexport function assertGreaterThanOrEqual(a: number, b: number): void {\r\n if (a < b) {\r\n fail(`Expected ${a} >= ${b}`);\r\n }\r\n}\r\n\r\nexport function assertIsDefined(value: T, message?: string): asserts value is NonNullable {\r\n if (value === undefined || value === null) {\r\n fail(message);\r\n }\r\n}\r\n\r\nexport function assertNever(member: never, message = \"Assert never:\"): never {\r\n const detail = JSON.stringify(member);\r\n return failInDebug(`${message} ${detail}`);\r\n}\r\n","import React from 'react';\r\nimport { makeStyles, shorthands, tokens } from '@fluentui/react-components';\r\nimport { SideNavigation } from '@bingads-webui-fluent-component/navigation';\r\n\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n width: '85px',\r\n flexShrink: 0,\r\n },\r\n tab: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n width: '100%',\r\n\r\n '& span.side-navigation-item-text': {\r\n textOverflow: 'ellipsis',\r\n display: '-webkit-box',\r\n WebkitLineClamp: 3,\r\n WebkitBoxOrient: 'vertical',\r\n ...shorthands.overflow('hidden'),\r\n wordBreak: 'break-word',\r\n hyphens: 'auto',\r\n },\r\n '&.side-navigation-item-button:hover, &.side-navigation-item-button:focus': {\r\n '& > span': { color: tokens.colorNeutralForeground3BrandHover },\r\n },\r\n },\r\n});\r\n\r\nexport const Navigation = ({ items }) => {\r\n const classes = useStyles();\r\n return (\r\n \r\n {label && (\r\n \r\n {label}\r\n \r\n )}\r\n
\r\n );\r\n};\r\n\r\nColorPicker.propTypes = {\r\n i18n: PropTypes.shape({ getString: PropTypes.func }).isRequired,\r\n label: PropTypes.string,\r\n className: PropTypes.string,\r\n color: PropTypes.string.isRequired,\r\n onChangeColor: PropTypes.func,\r\n};\r\n\r\nColorPicker.defaultProps = {\r\n label: null,\r\n className: '',\r\n onChangeColor: () => {},\r\n};\r\n","export const callToActionOptions = [\r\n _TL_('Custom Text'),\r\n _TL_('Act Now'),\r\n _TL_('Apply Now'),\r\n _TL_('Bet Now'),\r\n _TL_('Bid Now'),\r\n _TL_('Book A Car'),\r\n _TL_('Book Hotel'),\r\n _TL_('Book Now'),\r\n _TL_('Build Now'),\r\n _TL_('Buy Now'),\r\n _TL_('Chat Now'),\r\n _TL_('Compare'),\r\n _TL_('Contact Us'),\r\n _TL_('Dealers'),\r\n _TL_('Directions'),\r\n _TL_('Donate'),\r\n _TL_('Download'),\r\n _TL_('Email Now'),\r\n _TL_('Enroll Now'),\r\n _TL_('File Now'),\r\n _TL_('Find Job'),\r\n _TL_('Find Store'),\r\n _TL_('Free Play'),\r\n _TL_('Free Quote'),\r\n _TL_('Free Trial'),\r\n _TL_('Get Coupon'),\r\n _TL_('Get Deals'),\r\n _TL_('Get Demo'),\r\n _TL_('Get Offer'),\r\n _TL_('Get Quote'),\r\n _TL_('Go To Demo'),\r\n _TL_('Join Now'),\r\n _TL_('Learn More'),\r\n _TL_('Listen Now'),\r\n _TL_('Log In'),\r\n _TL_('Order Now'),\r\n _TL_('Play Game'),\r\n _TL_('Play Now'),\r\n _TL_('Post Job'),\r\n _TL_('Register'),\r\n _TL_('Renew Now'),\r\n _TL_('Rent A Car'),\r\n _TL_('Rent Now'),\r\n _TL_('Reorder'),\r\n _TL_('Reserve'),\r\n _TL_('Save Now'),\r\n _TL_('Schedule'),\r\n _TL_('See Demo'),\r\n _TL_('See Menu'),\r\n _TL_('See Models'),\r\n _TL_('See Offer'),\r\n _TL_('See Offers'),\r\n _TL_('See Sale'),\r\n _TL_('Sell Now'),\r\n _TL_('Shop Now'),\r\n _TL_('Showtimes'),\r\n _TL_('Sign In'),\r\n _TL_('Sign Up'),\r\n _TL_('Start Now'),\r\n _TL_('Subscribe'),\r\n _TL_('Switch Now'),\r\n _TL_('Test Drive'),\r\n _TL_('Try Now'),\r\n _TL_('View Cars'),\r\n _TL_('View Demo'),\r\n _TL_('Visit Plans'),\r\n _TL_('Visit Store'),\r\n _TL_('Vote Now'),\r\n _TL_('Watch'),\r\n _TL_('Watch More'),\r\n _TL_('Watch Now'),\r\n];\r\n","import React, { useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Label } from '@fluentui/react';\r\nimport { HelpPopupInline } from '@bingads-webui-react/help-popup';\r\nimport {\r\n Caption1Strong,\r\n Combobox,\r\n makeStyles,\r\n mergeClasses,\r\n Option,\r\n} from '@fluentui/react-components';\r\nimport { RemainingCharsValidatedTextField } from '@bingads-webui-campaign-react/remaining-chars-hint';\r\n\r\nimport { callToActionOptions } from './constants';\r\n\r\nconst useCallToActionStyles = makeStyles({\r\n root: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n },\r\n label: {\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n },\r\n select: {\r\n width: '100%',\r\n },\r\n input: {\r\n width: '100%',\r\n },\r\n customTextContainer: {\r\n '& .text-input-container': {\r\n width: '100%',\r\n },\r\n },\r\n});\r\n\r\nexport const CallToAction = ({\r\n cta,\r\n i18n,\r\n label,\r\n inlinePopup,\r\n labelAction,\r\n placeholder,\r\n onChangeCta,\r\n withCustomText,\r\n ctaValidations,\r\n helpTopic,\r\n helpLabel,\r\n}) => {\r\n const classes = useCallToActionStyles();\r\n const selectedOptions = withCustomText ? callToActionOptions : callToActionOptions.slice(1);\r\n const isCustomTextOptionSelected = cta && (cta === callToActionOptions[0] || !callToActionOptions.includes(cta));\r\n const [customInputText, setCustomInputText] = React.useState(isCustomTextOptionSelected ? cta : '');\r\n\r\n const handleSelect = (_ev, data) => {\r\n if (data && data.optionText) onChangeCta(data.optionText);\r\n };\r\n\r\n const handleInput = ({ data }) => {\r\n setCustomInputText(data.callToAction);\r\n };\r\n\r\n const ctaSchema = useMemo(() => ({\r\n type: 'object',\r\n properties: {\r\n callToAction: {\r\n type: 'string',\r\n maxLength: ctaValidations.maxLength,\r\n minLength: ctaValidations.minLength || 0,\r\n },\r\n },\r\n }), [ctaValidations.maxLength, ctaValidations.minLength]);\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nAudienceBudgetBidStrategyInternal.protoTypes = {\r\n classes: PropTypes.shape({\r\n pickerContainer: PropTypes.string.isRequired,\r\n }).isRequired,\r\n data: PropTypes.shape({\r\n campaign: PropTypes.shape({\r\n Budget: PropTypes.shape({\r\n Amount: PropTypes.number,\r\n Id: PropTypes.number,\r\n Type: PropTypes.string,\r\n }),\r\n BiddingScheme: PropTypes.shape({\r\n Type: PropTypes.string,\r\n BidStrategyId: PropTypes.number,\r\n }),\r\n BidStrategyName: PropTypes.string,\r\n }),\r\n }).isRequired,\r\n updateValidation: PropTypes.func.isRequired,\r\n campaignType: PropTypes.string.isRequired,\r\n campaignSubType: PropTypes.string,\r\n isEnableMSANDisplayCampaignsEnabled: PropTypes.bool,\r\n isEnableMSANVideoCampaignsEnabled: PropTypes.bool,\r\n setBudgetView: PropTypes.func,\r\n hideBidStrategy: PropTypes.bool,\r\n activity: PropTypes.shape({\r\n signal: PropTypes.func,\r\n }),\r\n};\r\n\r\nAudienceBudgetBidStrategyInternal.defaultProps = {\r\n campaignSubType: undefined,\r\n isEnableMSANDisplayCampaignsEnabled: false,\r\n isEnableMSANVideoCampaignsEnabled: false,\r\n setBudgetView: undefined,\r\n hideBidStrategy: false,\r\n activity: undefined,\r\n};\r\n\r\nexport const AudienceBudgetBidStrategy = withCustomValidation(withDefaultStyles(AudienceBudgetBidStrategyInternal, getBudgetStyles));\r\n","import {\r\n audienceAssociationSectionStyle,\r\n commonDoubleListBoxStyle,\r\n convertToLocalStyle,\r\n glyphIconStyle,\r\n helpbuttonStyle,\r\n paginationStyle,\r\n searchboxStyle,\r\n uiblockerStyle,\r\n audienceModalStyles,\r\n audienceExpressionStyle,\r\n audienceCombinedListStyle,\r\n tableStyle,\r\n sharedBudgetGridWrapper,\r\n containerBudgetStyle,\r\n} from '@bingads-webui-campaign-react/common-styles';\r\nimport {\r\n audienceTargetsSettingsStyles,\r\n criterionSettingCompanyStyles,\r\n audienceCampaignSettingsStyles,\r\n} from '@bingads-webui-campaign-react/campaign-adgroup-settings-shared-styles';\r\n\r\nexport const getBudgetStyles = (_, { palette }) => ({\r\n '@global': {\r\n ...uiblockerStyle({ palette }),\r\n ...audienceModalStyles({ palette }, { modalWidth: 500 }),\r\n ...audienceExpressionStyle(),\r\n ...audienceCombinedListStyle({ palette }),\r\n },\r\n pickerContainer: {\r\n ...audienceCampaignSettingsStyles({ palette }),\r\n ...containerBudgetStyle({ palette }),\r\n ...sharedBudgetGridWrapper({ palette }),\r\n ...criterionSettingCompanyStyles({ palette }, { targetGridWidth: 816 }),\r\n ...audienceAssociationSectionStyle({ palette }, { singleListBoxWidth: 450 }),\r\n ...audienceTargetsSettingsStyles({ palette }),\r\n ...commonDoubleListBoxStyle({ palette }),\r\n ...paginationStyle({ palette }),\r\n ...tableStyle({ palette }),\r\n ...searchboxStyle({ palette }),\r\n ...convertToLocalStyle(glyphIconStyle({ palette })),\r\n ...convertToLocalStyle(helpbuttonStyle({ palette })),\r\n '& .statusEnabled_icon::before': {\r\n color: '#107c10',\r\n content: '\"\\\\ECCC\"',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n },\r\n '& .statusPaused_icon::before': { // Todo: find icons for status disabled etc.\r\n color: '#323130',\r\n content: '\"\\\\F6B0\"',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n },\r\n '& .statusExcluded_icon::before': { // Todo: find icons for status disabled etc.\r\n color: '#A80000',\r\n content: '\"\\\\E733\"',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n },\r\n },\r\n});\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport { Stack, Shimmer } from '@fluentui/react';\r\n\r\nexport const SectionShimmer = ({ count }) => (\r\n setSharedBudgetRef(newRef)} />\r\n
\r\n {!hideBidStrategy &&\r\n \r\n
\r\n }\r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nconst Panels = ({\r\n currentPanel, switchPanel, isScenePanel, scene, video, videoGenerated, sceneGenerated, generateError, setGenerateError,\r\n}) => {\r\n const renderPreview = useCallback(() => {\r\n if (isScenePanel && !isEmpty(scene)) {\r\n if (sceneGenerated === 0) {\r\n return \r\n {!isEmpty(scene) && \r\n );\r\n};\r\n\r\n\r\nPanels.propTypes = {\r\n currentPanel: PropTypes.string.isRequired,\r\n switchPanel: PropTypes.func.isRequired,\r\n isScenePanel: PropTypes.bool.isRequired,\r\n scene: PropTypes.shape({}).isRequired,\r\n video: PropTypes.shape({}).isRequired,\r\n videoGenerated: PropTypes.number.isRequired,\r\n sceneGenerated: PropTypes.number.isRequired,\r\n generateError: PropTypes.string,\r\n setGenerateError: PropTypes.func.isRequired,\r\n};\r\n\r\nPanels.defaultProps = {\r\n generateError: undefined,\r\n};\r\n\r\nexport const PreviewView = ({\r\n scene, video, videoGenerated, sceneGenerated, currentPanel, switchPanel, isScenePanel, generateError, setGenerateError,\r\n}) => {\r\n const classes = useDefaultStyles(getPreviewStyles);\r\n return (\r\n \r\n {isApplying && (\r\n \r\n \r\n )}\r\n } ids array of entity IDs\r\n */\r\n constructor(options, parentId, ids) {\r\n super(options);\r\n if (!parentId) {\r\n throw new Error('parentId is required');\r\n }\r\n if (!isArray(ids) || isEmpty(ids)) {\r\n throw new Error('ids is required and must be an array');\r\n }\r\n this.parentId = parentId;\r\n this.ids = ids;\r\n }\r\n}\r\n\r\nexport class AppealAllForParentEntity extends AppealBase {\r\n constructor(options, parentId) {\r\n super(options);\r\n if (!parentId) {\r\n throw new Error('parentId is required');\r\n }\r\n this.parentId = parentId;\r\n }\r\n\r\n createAppealParamsWithIDs(ids) {\r\n return new AppealByIDsForParentEntity(this.options, this.parentId, ids);\r\n }\r\n}\r\n\r\nexport class AppealByIDs extends AppealBase {\r\n /**\r\n * Initialized AppealByIDs\r\n * @param {AppealBaseOptions} options options\r\n * @param {Array} ids array of entity+parent entity IDs\r\n */\r\n constructor(options, ids) {\r\n super(options);\r\n if (!isArray(ids) || isEmpty(ids) || some(ids, negate(isValidEntityAndParentID))) {\r\n throw new Error('ids is required and must be an array of EntityAndParentID');\r\n }\r\n this.ids = ids;\r\n }\r\n}\r\n\r\nexport class AppealAllByFilter extends AppealBase {\r\n constructor(options, filter) {\r\n super(options);\r\n if (!filter) {\r\n throw new Error('filter is required');\r\n }\r\n this.filter = filter;\r\n }\r\n}\r\n","import Promise from 'bluebird';\r\nimport * as utilities from '@bingads-webui-campaign-legacy/editorial-appeal/utilities';\r\nimport { AppealAllForParentEntity, AppealByIDsForParentEntity } from './params';\r\n\r\nexport { isAppealableStatus } from '@bingads-webui-campaign-legacy/editorial-appeal/utilities';\r\n\r\nconst toType = obj =>\r\n ({})\r\n .toString.call(obj) // returns \"[object Type]\"\r\n .substring(8, obj.length - 1); // returns \"Type\"\r\n\r\nconst assertInputs = (appealParams) => {\r\n if (!appealParams) {\r\n throw new Error('appealParams is required');\r\n }\r\n if (!(appealParams instanceof AppealByIDsForParentEntity) && !(appealParams instanceof AppealAllForParentEntity)) {\r\n // TODO: see TODOs\r\n throw new Error(`appealParams must be an instance of AppealByIDsForParentEntity, AppealAllForParentEntity. ${toType(appealParams)} is not supported`);\r\n }\r\n};\r\n\r\nconst processRejectReasonsFromOdata = (controller, permissions) =>\r\n odataResponse => (odataResponse.Errors ?\r\n Promise.reject(odataResponse.Errors) :\r\n utilities.processRejectReasonsFromOdata(odataResponse, controller, permissions));\r\n\r\n/**\r\n * @typedef {Object} AggregatedRejectReasons\r\n * @property {Array} appealIds array of entity IDs that can be appealed\r\n * @property {Array} appealData array of appeal data\r\n * @property {boolean} appealData.Appeal whether the entity has been appealed(?)\r\n * @property {string} appealData.Justification justification for appeal\r\n * @property {boolean} appealData.IsAppealable whether the entity can be appealed\r\n * @property {Array} appealData.RejectedReasons array of rejection reasons\r\n * @property {Array} appealData.RejectedTerms array of rejection terms\r\n * @property {string} appealData.EntityType entity type\r\n */\r\n\r\nconst resolveAppealParams = (appealParams) => {\r\n const {\r\n getEditorialReasonsByIDsForParentEntity, getAllEntitiesForParentEntity,\r\n } = appealParams.options;\r\n let getEditorialReasons;\r\n let appealParamsPromise;\r\n if (appealParams instanceof AppealByIDsForParentEntity ||\r\n appealParams instanceof AppealAllForParentEntity) {\r\n getEditorialReasons = getEditorialReasonsByIDsForParentEntity;\r\n\r\n if (appealParams instanceof AppealAllForParentEntity) {\r\n appealParamsPromise = getAllEntitiesForParentEntity(appealParams)\r\n .then(appealParams.createAppealParamsWithIDs.bind(appealParams));\r\n } else {\r\n appealParamsPromise = Promise.resolve(appealParams);\r\n }\r\n } // TODO: add support for AppealByIDs and AppealAllByFilter when needed\r\n\r\n return Promise.props({ getEditorialReasons, appealParams: appealParamsPromise });\r\n};\r\n\r\n/**\r\n * Fetches and aggregates editorial rejections for given entities\r\n * @param {AppealByIDsForParentEntity|AppealAllForParentEntity|AppealByIDs|AppealAllByFilter} appealParams Customer ID\r\n * @returns {Promise} a promise that resolves to an object of aggregated reject reasons\r\n */\r\nconst getAppealRejections = ({ appealParams, getEditorialReasons }) => {\r\n const {\r\n permissions,\r\n controller,\r\n } = appealParams.options;\r\n\r\n return Promise.resolve(appealParams)\r\n .then(getEditorialReasons)\r\n .then(processRejectReasonsFromOdata(controller, permissions));\r\n};\r\n\r\nexport const editorialAppealAggregator = (appealParams) => {\r\n assertInputs(appealParams);\r\n return Promise.resolve(appealParams)\r\n .then(resolveAppealParams)\r\n .then(getAppealRejections);\r\n};\r\n\r\nexport const requestAppeal = (appealParams, appealData, appealIds) => {\r\n const {\r\n requestAppealAllForParentEntity,\r\n requestAppealByIDsForParentEntity,\r\n } = appealParams.options;\r\n let requestAppealFunc;\r\n if (appealParams instanceof AppealByIDsForParentEntity) {\r\n requestAppealFunc = requestAppealByIDsForParentEntity;\r\n } else if (appealParams instanceof AppealAllForParentEntity) {\r\n requestAppealFunc = requestAppealAllForParentEntity;\r\n } // TODO: add support for AppealByIDs and AppealAllByFilter when needed\r\n\r\n return requestAppealFunc(appealParams, appealData, appealIds);\r\n};\r\n","import { first } from 'underscore';\r\nimport React, { useCallback, useState, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { DefaultButton, PrimaryButton, Panel, PanelType, Stack } from '@fluentui/react';\r\nimport { LegacyEditorialAppealRequestForm, LegacyInlineErrorView } from '@bingads-webui-campaign-react/legacy-editorial-appeal-request-form';\r\nimport { UiBlocker } from '@bingads-webui-react/ui-blocker';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { mergeStyles, fabricPanelFixStyle } from '@bingads-webui-campaign-react/common-styles';\r\n\r\nconst PANEL_WIDTH = 784;\r\n\r\nexport const panelStylesProp = {\r\n footer: {\r\n ...fabricPanelFixStyle().footer,\r\n },\r\n commands: {\r\n zIndex: 1,\r\n },\r\n content: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n },\r\n};\r\n\r\nconst getStyles = (components, theme = {}) => ({\r\n uiBlockerAdapter: {\r\n ...mergeStyles(\r\n { theme },\r\n components.reactUIBlockerStyle(theme.palette, 'rgba(255, 255, 255, 0.4)'),\r\n {\r\n '& .react-block-ui-none, & .react-block-ui': {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n flexGrow: 1,\r\n overflowY: 'hidden', // to not extend to the content, but shrink to flex-parent\r\n },\r\n },\r\n {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n flexGrow: 1,\r\n overflowY: 'hidden',\r\n }\r\n ),\r\n },\r\n});\r\n\r\nexport const EditorialAppealRequestPanel = ({\r\n i18n, onSave, onCancel, title, appealDataPromise,\r\n}) => {\r\n const [appealData, setAppealData] = useState(null);\r\n const [appealIds, setAppealIds] = useState([]);\r\n const [isBusy, setIsBusy] = useState(true);\r\n const [hasError, setHasError] = useState(false);\r\n\r\n const handleAppealData = useCallback((aggregatedRejectReasons) => {\r\n setAppealData(first(aggregatedRejectReasons.appealData));\r\n setAppealIds(aggregatedRejectReasons.appealIds);\r\n }, []);\r\n const handleAppealDataError = useCallback(() => {\r\n setHasError(true);\r\n }, []);\r\n\r\n useEffect(() => {\r\n setIsBusy(true);\r\n setAppealData(null);\r\n setAppealIds([]);\r\n setHasError(false);\r\n appealDataPromise.then(handleAppealData).catch(handleAppealDataError).finally(() => setIsBusy(false));\r\n }, [appealDataPromise, handleAppealData, handleAppealDataError]);\r\n\r\n const [editorialAppealFormData, setEditorialAppealFormData] = useState();\r\n const [isEditorialAppealFormDataValid, setIsEditorialAppealFormDataValid] = useState(false);\r\n const onEditorialAppealChange = useCallback((data, isValid) => {\r\n setEditorialAppealFormData(data);\r\n setIsEditorialAppealFormDataValid(isValid);\r\n }, []);\r\n\r\n const onSaveClick = useCallback(() => {\r\n onSave(editorialAppealFormData, appealIds);\r\n }, [onSave, editorialAppealFormData, appealIds]);\r\n\r\n const onCancelClick = useCallback(() => {\r\n onCancel();\r\n }, [onCancel]);\r\n\r\n const classes = useDefaultStyles(getStyles);\r\n\r\n const onRenderFooterContent = useCallback(() => (\r\n \r\n \r\n \r\n {i18n.getString(_TL_('Request exception'))}\r\n \r\n \r\n \r\n \r\n {i18n.getString(_TL_('Cancel'))}\r\n \r\n \r\n \r\n ), [i18n, onSaveClick, onCancelClick, hasError, isEditorialAppealFormDataValid]);\r\n\r\n\r\n return (\r\n \r\n \r\n {hasError &&\r\n \r\n \r\n {this.state.imageList.length === 0 &&\r\n {\r\n const { websiteSuggestionCarouselActivity } =\r\n getAdCreatorInstrumentation(\r\n this.props.instrumentation,\r\n this.adCreatorScenario\r\n );\r\n\r\n websiteSuggestionCarouselActivity.trace(`CarouselImageSelected: ${index};`);\r\n\r\n this.setState({ blockCarousel: true });\r\n this.state.addImageCallback(imageSource)\r\n .then((error = {}) => {\r\n if (error && error.errorMessage) {\r\n this.setState({\r\n carousel: {\r\n ...this.state.carousel,\r\n message: {\r\n type: MessageBarType.error,\r\n message: error.errorMessage,\r\n },\r\n },\r\n });\r\n }\r\n return Promise.resolve();\r\n })\r\n .finally(() => {\r\n this.setState({ blockCarousel: false });\r\n });\r\n this.setState({\r\n carousel: {\r\n ...this.state.carousel,\r\n images: _.reject(this.state.carousel.images, (val, ind) => ind === index),\r\n },\r\n });\r\n }}\r\n onSelectSeeAll={() => this.state.openAddImageCallback()}\r\n />\r\n }\r\n \r\n ,\r\n $('.suggestion-carousel')[0]\r\n );\r\n }\r\n\r\n const isAdPreviewRefreshEnabled = this.props.permissions.dynamic.AdPreviewRefresh;\r\n const PreviewCarouselComponent = this.enableAdPreviewLibrary ? UnifiedPreviewCarousel : PreviewCarousel;\r\n const adPreviewConfig = getUnifiedAdPreviewConfig({ eligibleLayout: this.state.eligibleLayout, isAdPreviewRefreshEnabled });\r\n\r\n return (\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport const ExtensionImagesControl =\r\n withDefaultStyles(ExtensionImagesControlBase, getExtensionImagesControlStyles);\r\n\r\n","// / The whole file is basically copied from typescript repo.\r\n\r\nexport function fail(message?: string) {\r\n const isProduction = true;\r\n if (isProduction) return;\r\n failInDebug(message);\r\n}\r\n\r\nexport function failInDebug(message?: string): never {\r\n // eslint-disable-next-line no-debugger\r\n debugger;\r\n const e = new Error(message ? `Debug Failure. ${message}` : \"Debug Failure.\");\r\n throw e;\r\n}\r\n\r\n\r\nexport function assert(expression: unknown, message?: string, verboseDebugInfo?: string | (() => string)): asserts expression {\r\n if (!expression) {\r\n // eslint-disable-next-line no-param-reassign\r\n message = message ? `False expression: ${message}` : \"False expression.\";\r\n if (verboseDebugInfo) {\r\n // eslint-disable-next-line no-param-reassign\r\n message += `\\r\\nVerbose Debug Information: ${typeof verboseDebugInfo === \"string\" ? verboseDebugInfo : verboseDebugInfo()}`;\r\n }\r\n fail(message);\r\n }\r\n}\r\n\r\nexport function assertEqual setCompanyAssociationRef(newRef)} />\r\n
\r\n );\r\n};\r\n\r\nUnstyledCompanyPicker.propTypes = {\r\n classes: PropTypes.shape({\r\n pickerContainer: PropTypes.string.isRequired,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n validationProps: PropTypes.shape({\r\n data: PropTypes.shape({\r\n companyNameTargets: PropTypes.arrayOf(PropTypes.shape([])),\r\n negativeCompanyNameTargets: PropTypes.arrayOf(PropTypes.shape([])),\r\n }),\r\n }).isRequired,\r\n updateValidation: PropTypes.func.isRequired,\r\n showExclusion: PropTypes.bool,\r\n};\r\n\r\nUnstyledCompanyPicker.defaultProps = {\r\n showExclusion: true,\r\n};\r\n\r\nexport const ValidatedCompanyPicker = withDefaultStyles(withCustomValidation(UnstyledCompanyPicker), getCompanyTargetStyles);\r\n","import {\r\n audienceAssociationSectionStyle,\r\n commonDoubleListBoxStyle,\r\n convertToLocalStyle,\r\n glyphIconStyle,\r\n helpbuttonStyle,\r\n paginationStyle,\r\n searchboxStyle,\r\n uiblockerStyle,\r\n audienceModalStyles,\r\n audienceExpressionStyle,\r\n audienceCombinedListStyle,\r\n tableStyle,\r\n} from '@bingads-webui-campaign-react/common-styles';\r\nimport {\r\n audienceTargetsSettingsStyles,\r\n criterionSettingCompanyStyles,\r\n} from '@bingads-webui-campaign-react/campaign-adgroup-settings-shared-styles';\r\n\r\nexport const getCompanyTargetStyles = (_, { palette }) => ({\r\n '@global': {\r\n ...uiblockerStyle({ palette }),\r\n ...audienceModalStyles({ palette }, { modalWidth: 500 }),\r\n ...audienceExpressionStyle(),\r\n ...audienceCombinedListStyle({ palette }),\r\n },\r\n pickerContainer: {\r\n ...criterionSettingCompanyStyles({ palette }, { targetGridWidth: 816 }),\r\n ...audienceAssociationSectionStyle({ palette }, { singleListBoxWidth: 450 }),\r\n ...audienceTargetsSettingsStyles({ palette }),\r\n ...commonDoubleListBoxStyle({ palette }),\r\n ...paginationStyle({ palette }),\r\n ...tableStyle({ palette }),\r\n ...searchboxStyle({ palette }),\r\n ...convertToLocalStyle(glyphIconStyle({ palette })),\r\n ...convertToLocalStyle(helpbuttonStyle({ palette })),\r\n '& .statusEnabled_icon::before': {\r\n color: '#107c10',\r\n content: '\"\\\\ECCC\"',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n },\r\n '& .statusPaused_icon::before': { // Todo: find icons for status disabled etc.\r\n color: '#323130',\r\n content: '\"\\\\F6B0\"',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n },\r\n '& .statusExcluded_icon::before': { // Todo: find icons for status disabled etc.\r\n color: '#A80000',\r\n content: '\"\\\\E733\"',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n },\r\n },\r\n});\r\n","import React, { useContext, useEffect, useMemo, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { noop, every } from 'underscore';\r\nimport { JobFunctionTargetSetting } from '@bingads-webui-campaign/audience-criterion-setting';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { withCustomValidation } from '@bingads-webui-react/validation';\r\nimport { AudienceTargetInfo } from '@bingads-webui-campaign/audience-target-info';\r\nimport { criterionHelper } from '@bingads-webui-campaign/audience-campaign-shared';\r\nimport { ActivityContext } from '@bingads-webui-react/hoc-with-signal';\r\nimport { getJobFunctionTargetStyles } from './styles/job-function-target-styles';\r\n\r\nexport const formatJobFunction = ({ jobTargets, i18n }) => {\r\n if (!jobTargets || !jobTargets.length) {\r\n return i18n.getString(_TL_('Target Jobs'));\r\n }\r\n\r\n if (jobTargets.length === 1) {\r\n return i18n.getString(_TL_('Targeted: 1 job'));\r\n }\r\n\r\n return i18n.getString(_TL_('Targeted: {{count}} jobs'), { count: (jobTargets.length) });\r\n};\r\n\r\nconst UnstyledJobFunctionPicker = (props) => {\r\n const {\r\n classes,\r\n updateValidation,\r\n validationProps,\r\n showExclusion,\r\n } = props;\r\n const { data: { jobTargets, negativeJobTargets } } = validationProps;\r\n\r\n const [jobFunctionAssociationRef, setJobFunctionAssociationRef] = useState();\r\n\r\n const activity = useContext(ActivityContext);\r\n\r\n const currentLevelTargetInfo = useMemo(() => (\r\n new AudienceTargetInfo({\r\n resourceName: 'AdGroupCriterion',\r\n isForVNext: true,\r\n initAudienceAssociationView: false,\r\n })), []);\r\n\r\n const jobFunctionAssociationView = useMemo(() => {\r\n const jobFunctionView = new JobFunctionTargetSetting({\r\n criterionType: 'JobFunction',\r\n type: 'JobFunction',\r\n showBidOnlyNote: false,\r\n showExclusion,\r\n defaultBidAdjustment: 0,\r\n isForVNext: true,\r\n currentLevelTargetInfo,\r\n });\r\n\r\n jobFunctionView.render();\r\n\r\n return jobFunctionView;\r\n }, [currentLevelTargetInfo, showExclusion]);\r\n\r\n const onChange = () => {\r\n const updatedItems = jobFunctionAssociationView.currentLevelTargetInfo.getSnapshot(false);\r\n\r\n const jobTarget = updatedItems.filter(({ CriterionType }) => (CriterionType === 'JobFunction'))\r\n .map(({ Criterion }) => {\r\n const { JobFunctionCriterion } = Criterion;\r\n\r\n return JobFunctionCriterion.Target;\r\n });\r\n\r\n const negativeJobTarget = updatedItems.filter(({ CriterionType }) => (CriterionType === 'NegativeJobFunction'))\r\n .map(({ Criterion }) => {\r\n const { JobFunctionCriterion } = Criterion;\r\n\r\n return JobFunctionCriterion.Target;\r\n });\r\n\r\n updateValidation([], { jobTargets: jobTarget, negativeJobTargets: negativeJobTarget });\r\n\r\n if (activity) {\r\n activity.signal(`onIndustryTargetChange - ${JSON.stringify({ jobFunction: jobTarget })}`);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (jobFunctionAssociationRef) {\r\n jobFunctionAssociationRef.innerHTML = '';\r\n jobFunctionAssociationRef.append(jobFunctionAssociationView.el);\r\n\r\n jobFunctionAssociationView.searchView.initializeSearchDataTask.then(() => {\r\n currentLevelTargetInfo.off('AdGroupCriterionJobFunctionChanged', onChange);\r\n\r\n const allJobTargets = jobFunctionAssociationView.searchView.searchResultView.items.map(item => item);\r\n\r\n if (jobTargets && jobTargets.length > 0) {\r\n const selectedJobTargets = allJobTargets.filter(({ id }) => jobTargets.includes(id));\r\n\r\n const currentTargets = currentLevelTargetInfo.getSnapshot(false).filter(({ CriterionType }) => (CriterionType === 'JobFunction'));\r\n\r\n // check if the current targets are the same as the selected targets\r\n const isSame = every(currentTargets, ((target) => {\r\n const { Criterion } = target;\r\n\r\n const { JobFunctionCriterion } = Criterion;\r\n\r\n return jobTargets.includes(JobFunctionCriterion.Target);\r\n }));\r\n\r\n if (currentTargets.length !== selectedJobTargets.length || !isSame) {\r\n selectedJobTargets.forEach((data) => {\r\n const criterion = criterionHelper.buildLinkedInCriterion(\r\n 'JobFunction',\r\n data,\r\n true,\r\n 0,\r\n 0\r\n );\r\n\r\n\r\n currentLevelTargetInfo.createAsync(criterion);\r\n });\r\n }\r\n }\r\n\r\n if (negativeJobTargets && negativeJobTargets.length > 0) {\r\n const selectedNegativeJobTargets = allJobTargets.filter(({ id }) => negativeJobTargets.includes(id));\r\n\r\n const currentNegativeTargets = currentLevelTargetInfo.getSnapshot(false).filter(({ CriterionType }) => (CriterionType === 'NegativeJobFunction'));\r\n\r\n // check if the current targets are the same as the selected targets\r\n const isSame = every(currentNegativeTargets, ((target) => {\r\n const { Criterion } = target;\r\n\r\n const { JobFunctionCriterion } = Criterion;\r\n\r\n return negativeJobTargets.includes(JobFunctionCriterion.Target);\r\n }));\r\n\r\n if (currentNegativeTargets.length !== selectedNegativeJobTargets.length || !isSame) {\r\n selectedNegativeJobTargets.forEach((data) => {\r\n const criterion = criterionHelper.buildLinkedInCriterion(\r\n 'JobFunction',\r\n data,\r\n false,\r\n 0,\r\n 0\r\n );\r\n\r\n currentLevelTargetInfo.createAsync(criterion);\r\n });\r\n }\r\n }\r\n }).then(() => currentLevelTargetInfo.on('AdGroupCriterionJobFunctionChanged', onChange));\r\n\r\n return () => {\r\n currentLevelTargetInfo.off('AdGroupCriterionJobFunctionChanged', onChange);\r\n };\r\n }\r\n\r\n return noop;\r\n }, [jobFunctionAssociationRef, jobTargets, negativeJobTargets]); // eslint-disable-line react-hooks/exhaustive-deps\r\n\r\n return (\r\n \r\n \r\n {text} \r\n
\r\n );\r\n};\r\n\r\nPanelButton.propTypes = {\r\n panel: PropTypes.shape({}).isRequired,\r\n currentPanel: PropTypes.string.isRequired,\r\n switchPanel: PropTypes.func.isRequired,\r\n};\r\n\r\nconst Switch = ({\r\n currentPanel, switchPanel,\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n const panels = [\r\n { name: panelNames.scene, text: i18n.getString(_TL_('Scene')) },\r\n { name: panelNames.video, text: i18n.getString(_TL_('Video')) },\r\n ];\r\n\r\n return (\r\n setJobFunctionAssociationRef(newRef)} />\r\n
\r\n );\r\n};\r\n\r\nUnstyledJobFunctionPicker.propTypes = {\r\n classes: PropTypes.shape({\r\n pickerContainer: PropTypes.string.isRequired,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n validationProps: PropTypes.shape({\r\n data: PropTypes.shape({\r\n jobTargets: PropTypes.arrayOf(PropTypes.shape([])),\r\n negativeJobTargets: PropTypes.arrayOf(PropTypes.shape([])),\r\n }),\r\n }).isRequired,\r\n updateValidation: PropTypes.func.isRequired,\r\n showExclusion: PropTypes.bool,\r\n};\r\n\r\nUnstyledJobFunctionPicker.defaultProps = {\r\n showExclusion: true,\r\n};\r\n\r\nexport const ValidatedJobFunctionPicker = withDefaultStyles(withCustomValidation(UnstyledJobFunctionPicker), getJobFunctionTargetStyles);\r\n\r\n","import {\r\n audienceAssociationSectionStyle,\r\n commonDoubleListBoxStyle,\r\n convertToLocalStyle,\r\n glyphIconStyle,\r\n helpbuttonStyle,\r\n paginationStyle,\r\n searchboxStyle,\r\n uiblockerStyle,\r\n audienceModalStyles,\r\n audienceExpressionStyle,\r\n audienceCombinedListStyle,\r\n tableStyle,\r\n} from '@bingads-webui-campaign-react/common-styles';\r\nimport {\r\n audienceTargetsSettingsStyles,\r\n criterionSettingJobFunctionStyles,\r\n} from '@bingads-webui-campaign-react/campaign-adgroup-settings-shared-styles';\r\n\r\nexport const getJobFunctionTargetStyles = (_, { palette }) => ({\r\n '@global': {\r\n ...uiblockerStyle({ palette }),\r\n ...audienceModalStyles({ palette }, { modalWidth: 500 }),\r\n ...audienceExpressionStyle(),\r\n ...audienceCombinedListStyle({ palette }),\r\n },\r\n pickerContainer: {\r\n ...criterionSettingJobFunctionStyles({ palette }, { targetGridWidth: 816 }),\r\n ...audienceAssociationSectionStyle({ palette }, { singleListBoxWidth: 450 }),\r\n ...audienceTargetsSettingsStyles({ palette }),\r\n ...commonDoubleListBoxStyle({ palette }),\r\n ...paginationStyle({ palette }),\r\n ...tableStyle({ palette }),\r\n ...searchboxStyle({ palette }),\r\n ...convertToLocalStyle(glyphIconStyle({ palette })),\r\n ...convertToLocalStyle(helpbuttonStyle({ palette })),\r\n '& .statusEnabled_icon::before': {\r\n color: '#107c10',\r\n content: '\"\\\\ECCC\"',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n },\r\n '& .statusPaused_icon::before': { // Todo: find icons for status disabled etc.\r\n color: '#323130',\r\n content: '\"\\\\F6B0\"',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n },\r\n '& .statusExcluded_icon::before': { // Todo: find icons for status disabled etc.\r\n color: '#A80000',\r\n content: '\"\\\\E733\"',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n },\r\n },\r\n});\r\n","import React, { useEffect, useMemo, useState, useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { flatten, noop, every } from 'underscore';\r\nimport { IndustryTargetSetting } from '@bingads-webui-campaign/audience-criterion-setting';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { withCustomValidation } from '@bingads-webui-react/validation';\r\nimport { AudienceTargetInfo } from '@bingads-webui-campaign/audience-target-info';\r\nimport { criterionHelper } from '@bingads-webui-campaign/audience-campaign-shared';\r\nimport { ActivityContext } from '@bingads-webui-react/hoc-with-signal';\r\nimport { getIndustryTargetStyles } from './styles/industry-target-styles';\r\n\r\nexport const formatIndustry = ({ industry, i18n }) => {\r\n if (!industry || !industry.length) {\r\n return i18n.getString(_TL_('Target Industries'));\r\n }\r\n\r\n if (industry.length === 1) {\r\n return i18n.getString(_TL_('Targeted: 1 industry'));\r\n }\r\n\r\n return i18n.getString(_TL_('Targeted: {{count}} industries'), { count: (industry.length) });\r\n};\r\n\r\n\r\nconst UnstyledIndustryPicker = (props) => {\r\n const {\r\n classes,\r\n updateValidation,\r\n validationProps,\r\n showExclusion,\r\n } = props;\r\n\r\n const { data: { industry, negativeIndustry } } = validationProps;\r\n\r\n const activity = useContext(ActivityContext);\r\n\r\n const [industryAssociationRef, setIndustryAssociationRef] = useState();\r\n\r\n const currentLevelTargetInfo = useMemo(() => (\r\n new AudienceTargetInfo({\r\n resourceName: 'AdGroupCriterion',\r\n isForVNext: true,\r\n initAudienceAssociationView: false,\r\n })), []);\r\n\r\n const industryAssociationView = useMemo(() => {\r\n const industryView = new IndustryTargetSetting({\r\n criterionType: 'Industry',\r\n type: 'Industry',\r\n showBidOnlyNote: false,\r\n showExclusion,\r\n defaultBidAdjustment: 0,\r\n isForVNext: true,\r\n currentLevelTargetInfo,\r\n });\r\n\r\n industryView.render();\r\n\r\n return industryView;\r\n }, [currentLevelTargetInfo, showExclusion]);\r\n\r\n const onChange = () => {\r\n const updatedItems = industryAssociationView.currentLevelTargetInfo.getSnapshot(false);\r\n\r\n const industryTargets = updatedItems.filter(({ CriterionType }) => (CriterionType === 'Industry'))\r\n .map(({ Criterion }) => {\r\n const { IndustryCriterion } = Criterion;\r\n\r\n return IndustryCriterion.Target;\r\n });\r\n\r\n const negativeIndustryTargets = updatedItems.filter(({ CriterionType }) => (CriterionType === 'NegativeIndustry'))\r\n .map(({ Criterion }) => {\r\n const { IndustryCriterion } = Criterion;\r\n\r\n return IndustryCriterion.Target;\r\n });\r\n\r\n updateValidation([], { industry: industryTargets, negativeIndustry: negativeIndustryTargets });\r\n\r\n if (activity) {\r\n activity.signal(`onIndustryTargetChange - ${JSON.stringify({ industry: industryTargets })}`);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (industryAssociationRef) {\r\n industryAssociationRef.innerHTML = '';\r\n industryAssociationRef.append(industryAssociationView.el);\r\n\r\n industryAssociationView.searchView.searchTreeInitializationPromise.then(() => {\r\n currentLevelTargetInfo.off('AdGroupCriterionIndustryChanged', onChange);\r\n\r\n const industryTargets = industryAssociationView.searchView.treeView.node.children.map((child) => {\r\n const { children } = child;\r\n\r\n const innerChildren = children.map(innerChild => innerChild.data);\r\n\r\n return [...innerChildren];\r\n });\r\n\r\n const flatIndustryTargets = flatten(industryTargets);\r\n\r\n if (industry && industry.length > 0) {\r\n const selectedIndustries = flatIndustryTargets.filter(({ Id }) => industry.includes(Id));\r\n\r\n const currentTargets = currentLevelTargetInfo.getSnapshot(false).filter(({ CriterionType }) => (CriterionType === 'Industry'));\r\n\r\n // check if the current targets are the same as the selected targets\r\n const isSame = every(currentTargets, ((target) => {\r\n const { Criterion } = target;\r\n\r\n const { IndustryCriterion } = Criterion;\r\n\r\n return industry.includes(IndustryCriterion.Target);\r\n }));\r\n\r\n if (currentTargets.length !== selectedIndustries.length || !isSame) {\r\n selectedIndustries.forEach((data) => {\r\n const criterion = criterionHelper.buildLinkedInCriterion(\r\n 'Industry',\r\n data,\r\n true,\r\n 0,\r\n 0\r\n );\r\n\r\n\r\n currentLevelTargetInfo.createAsync(criterion);\r\n });\r\n }\r\n }\r\n\r\n if (negativeIndustry && negativeIndustry.length > 0) {\r\n const selectedNegativeIndustries = flatIndustryTargets.filter(({ Id }) => negativeIndustry.includes(Id));\r\n\r\n const currentNegativeTargets = currentLevelTargetInfo.getSnapshot(false).filter(({ CriterionType }) => (CriterionType === 'NegativeIndustry'));\r\n\r\n // check if the current targets are the same as the selected targets\r\n const isSame = every(currentNegativeTargets, ((target) => {\r\n const { Criterion } = target;\r\n\r\n const { IndustryCriterion } = Criterion;\r\n\r\n return negativeIndustry.includes(IndustryCriterion.Target);\r\n }));\r\n\r\n if (currentNegativeTargets.length !== selectedNegativeIndustries.length || !isSame) {\r\n selectedNegativeIndustries.forEach((data) => {\r\n const criterion = criterionHelper.buildLinkedInCriterion(\r\n 'Industry',\r\n data,\r\n false,\r\n 0,\r\n 0\r\n );\r\n\r\n currentLevelTargetInfo.createAsync(criterion);\r\n });\r\n }\r\n }\r\n }).then(() => currentLevelTargetInfo.on('AdGroupCriterionIndustryChanged', onChange));\r\n\r\n return () => {\r\n currentLevelTargetInfo.off('AdGroupCriterionIndustryChanged', onChange);\r\n };\r\n }\r\n return noop;\r\n }, [industryAssociationRef, industry, negativeIndustry]); // eslint-disable-line react-hooks/exhaustive-deps\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nTitle.propTypes = {\r\n titleKey: PropTypes.string.isRequired,\r\n};\r\n\r\nconst PredictiveTargetingControlHeaderInternal = ({\r\n validationProps,\r\n updateValidation,\r\n onToggleEnabledChanged,\r\n campaignSubType,\r\n EnableMSANDisplayCampaigns,\r\n EnableMSANVideoCampaigns,\r\n}) => {\r\n const { data } = validationProps;\r\n\r\n let { UseOptimizedTargeting } = data;\r\n\r\n const activity = useContext(ActivityContext);\r\n\r\n const onChange = (e, checked) => {\r\n updateValidation([], { UseOptimizedTargeting: checked });\r\n\r\n if (activity) {\r\n activity.signal(`onPredectiveTargetingChanged - isPredTargetingEnabled: ${UseOptimizedTargeting}`);\r\n }\r\n };\r\n\r\n const isEnabled = useMemo(() => {\r\n const doesAdGroupHaveAudienceTargeted = data.audiences && data.audiences.length > 0;\r\n const doesAdGroupHaveCompanyNameTarget = (data.companyNameTargets && data.companyNameTargets.length > 0) || (data.negativeCompanyNameTargets && data.negativeCompanyNameTargets.length > 0);\r\n const doesAdGroupHaveJobFunctionTarget = (data.jobTargets && data.jobTargets.length > 0) || (data.negativeJobTargets && data.negativeJobTargets.length > 0);\r\n const doesAdGroupHaveIndustryTarget = (data.industry && data.industry.length > 0) || (data.negativeIndustry && data.negativeIndustry.length > 0);\r\n const doesAdGroupHaveAgeTarget = data.ageRanges && data.ageRanges.length < 6;\r\n const doesAdGroupHaveGenderTarget = data.genderTypes && data.genderTypes.length < 3;\r\n const doesAdGroupHaveDeviceTarget = data.deviceTypes && data.deviceTypes.length < 3;\r\n\r\n const isVideoCampaign = campaignSubType === CampaignSubTypes.BrandAwarenessVideoAds;\r\n\r\n return doesAdGroupHaveAudienceTargeted || doesAdGroupHaveCompanyNameTarget ||\r\n doesAdGroupHaveJobFunctionTarget || doesAdGroupHaveIndustryTarget ||\r\n doesAdGroupHaveAgeTarget || doesAdGroupHaveGenderTarget ||\r\n (isVideoCampaign && EnableMSANVideoCampaigns && doesAdGroupHaveDeviceTarget);\r\n }, [data, EnableMSANVideoCampaigns, campaignSubType]);\r\n\r\n // if no targets and use optimized targeting is disabled it, enable it.\r\n if (!isEnabled && !UseOptimizedTargeting) {\r\n if (EnableMSANDisplayCampaigns || EnableMSANVideoCampaigns) {\r\n UseOptimizedTargeting = true;\r\n }\r\n updateValidation([], { UseOptimizedTargeting: true });\r\n }\r\n\r\n useEffect(() => {\r\n onToggleEnabledChanged(isEnabled);\r\n }, [isEnabled, onToggleEnabledChanged]);\r\n\r\n return (\r\n \r\n \r\n );\r\n};\r\n\r\nPredictiveTargetingControlHeaderInternal.propTypes = {\r\n updateValidation: PropTypes.func.isRequired,\r\n validationProps: PropTypes.shape({\r\n data: PropTypes.shape({\r\n UseOptimizedTargeting: PropTypes.bool,\r\n audiences: PropTypes.shape([]).isRequired,\r\n companyNameTargets: PropTypes.shape([]).isRequired,\r\n negativeCompanyNameTargets: PropTypes.shape([]).isRequired,\r\n jobTargets: PropTypes.shape([]).isRequired,\r\n negativeJobTargets: PropTypes.shape([]).isRequired,\r\n industry: PropTypes.shape([]).isRequired,\r\n negativeIndustry: PropTypes.shape([]).isRequired,\r\n ageRanges: PropTypes.shape([]).isRequired,\r\n genderTypes: PropTypes.shape([]).isRequired,\r\n deviceTypes: PropTypes.shape([]).isRequired,\r\n }),\r\n }).isRequired,\r\n onToggleEnabledChanged: PropTypes.func.isRequired,\r\n campaignSubType: PropTypes.string.isRequired,\r\n EnableMSANDisplayCampaigns: PropTypes.bool.isRequired,\r\n EnableMSANVideoCampaigns: PropTypes.bool.isRequired,\r\n};\r\n\r\nexport const PredictiveTargetingControlHeader = withCustomValidation(PredictiveTargetingControlHeaderInternal);\r\n","import React, { useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { Label, Stack } from '@bingads-webui-react/fabric-control';\r\nimport { HelpPopup } from '@bingads-webui-react/help-popup';\r\nimport DataTrending from './media/data-trending.svg';\r\n\r\n\r\nconst PredictiveTargetingDescription = ({ i18n }) => (\r\n \r\n \r\n 
\r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nPredictiveTargetingHeader.propTypes = {\r\n data: PropTypes.shape({\r\n UseOptimizedTargeting: PropTypes.bool,\r\n }).isRequired,\r\n};\r\n\r\n","import React, { useEffect, useMemo, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useSinglePlacementLayouts } from '@bingads-webui-campaign-react/ad-placement-factory';\r\nimport { evaluateAdCustomizers } from '@bingads-webui-campaign/ad-customizers-next';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { getDomain } from '@bingads-webui/url-util';\r\nimport { combineDescriptions } from '@bingads-webui-campaign-react/ad-common';\r\nimport { getPreviewStyles } from './styles';\r\n\r\nconst adType = 'DynamicSearchAd';\r\n\r\nconst DSAPreviewGroupType = 'dynamicSearchAd';\r\n\r\nconst DynamicSearchAdPreviewUAPLUnstyled = ({\r\n classes,\r\n data: {\r\n Text,\r\n TextPart2,\r\n DisplayUrl,\r\n Path1,\r\n Path2,\r\n },\r\n domain,\r\n}) => {\r\n const [description, setDescription] = useState('');\r\n const [urlPath1, setUrlPath1] = useState('');\r\n const [urlPath2, setUrlPath2] = useState('');\r\n\r\n const urlDomain = useMemo(() => getDomain(DisplayUrl) || domain, [DisplayUrl, domain]);\r\n const displayUrl = useMemo(() => `${urlDomain}${urlPath1}${urlPath2}`, [urlDomain, urlPath1, urlPath2]);\r\n const finalUrl = useMemo(() => `https://${displayUrl}`, [displayUrl]);\r\n\r\n const [{ SinglePlacementLayout }] = useSinglePlacementLayouts({\r\n groupType: DSAPreviewGroupType,\r\n placementFilterPredicate: tmp => tmp.type === adType,\r\n });\r\n\r\n useEffect(() => {\r\n evaluateAdCustomizers({\r\n adType,\r\n field: 'Descriptions',\r\n text: combineDescriptions(Text, TextPart2),\r\n }).then((evaluatedText) => {\r\n setDescription(evaluatedText);\r\n });\r\n }, [Text, TextPart2]);\r\n\r\n useEffect(() => {\r\n evaluateAdCustomizers({\r\n adType,\r\n field: 'Path1',\r\n text: Path1,\r\n }).then((evaluatedText) => {\r\n setUrlPath1(evaluatedText ? `/${evaluatedText}` : '');\r\n });\r\n }, [Path1]);\r\n\r\n useEffect(() => {\r\n evaluateAdCustomizers({\r\n adType,\r\n field: 'Path2',\r\n text: Path2,\r\n }).then((evaluatedText) => {\r\n setUrlPath2(evaluatedText ? `/${evaluatedText}` : '');\r\n });\r\n }, [Path2]);\r\n\r\n const adData = useMemo(() => ({\r\n description,\r\n finalUrl,\r\n displayUrl,\r\n }), [description, displayUrl, finalUrl]);\r\n\r\n return (\r\n
\r\n );\r\n};\r\n\r\nScene.propTypes = {\r\n scene: PropTypes.shape({}).isRequired,\r\n onSceneSelected: PropTypes.func.isRequired,\r\n selectedSceneId: PropTypes.number.isRequired,\r\n sceneId: PropTypes.number.isRequired,\r\n};\r\n\r\nexport const ScenePickerView = ({\r\n scenes, onSceneSelected, selectedSceneId,\r\n}) => {\r\n const classes = useDefaultStyles(getScenePickerStyles);\r\n\r\n return (\r\n setIndustryAssociationRef(newRef)} />\r\n
\r\n );\r\n};\r\n\r\nUnstyledIndustryPicker.propTypes = {\r\n classes: PropTypes.shape({\r\n pickerContainer: PropTypes.string.isRequired,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n validationProps: PropTypes.shape({\r\n data: PropTypes.shape({\r\n industry: PropTypes.arrayOf(PropTypes.shape([])),\r\n negativeIndustry: PropTypes.arrayOf(PropTypes.shape([])),\r\n }),\r\n }).isRequired,\r\n updateValidation: PropTypes.func.isRequired,\r\n showExclusion: PropTypes.bool,\r\n};\r\n\r\nUnstyledIndustryPicker.defaultProps = {\r\n showExclusion: true,\r\n};\r\n\r\nexport const ValidatedIndustryPicker = withDefaultStyles(withCustomValidation(UnstyledIndustryPicker), getIndustryTargetStyles);\r\n","import {\r\n audienceAssociationSectionStyle,\r\n commonDoubleListBoxStyle,\r\n convertToLocalStyle,\r\n glyphIconStyle,\r\n helpbuttonStyle,\r\n paginationStyle,\r\n searchboxStyle,\r\n uiblockerStyle,\r\n audienceModalStyles,\r\n audienceExpressionStyle,\r\n audienceCombinedListStyle,\r\n tableStyle,\r\n} from '@bingads-webui-campaign-react/common-styles';\r\nimport {\r\n audienceTargetsSettingsStyles,\r\n criterionSettingIndustryStyles,\r\n} from '@bingads-webui-campaign-react/campaign-adgroup-settings-shared-styles';\r\n\r\nexport const getIndustryTargetStyles = (_, { palette }) => ({\r\n '@global': {\r\n ...uiblockerStyle({ palette }),\r\n ...audienceModalStyles({ palette }, { modalWidth: 500 }),\r\n ...audienceExpressionStyle(),\r\n ...audienceCombinedListStyle({ palette }),\r\n },\r\n pickerContainer: {\r\n ...criterionSettingIndustryStyles({ palette }, { targetGridWidth: 816 }),\r\n ...audienceAssociationSectionStyle({ palette }, { singleListBoxWidth: 450 }),\r\n ...audienceTargetsSettingsStyles({ palette }),\r\n ...commonDoubleListBoxStyle({ palette }),\r\n ...paginationStyle({ palette }),\r\n ...tableStyle({ palette }),\r\n ...searchboxStyle({ palette }),\r\n ...convertToLocalStyle(glyphIconStyle({ palette })),\r\n ...convertToLocalStyle(helpbuttonStyle({ palette })),\r\n '& .statusEnabled_icon::before': {\r\n color: '#107c10',\r\n content: '\"\\\\ECCC\"',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n },\r\n '& .statusPaused_icon::before': { // Todo: find icons for status disabled etc.\r\n color: '#323130',\r\n content: '\"\\\\F6B0\"',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n },\r\n '& .statusExcluded_icon::before': { // Todo: find icons for status disabled etc.\r\n color: '#A80000',\r\n content: '\"\\\\E733\"',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n },\r\n },\r\n});\r\n","import React, { useMemo, useContext, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Label, Stack, Toggle } from '@bingads-webui-react/fabric-control';\r\nimport { HelpPopup } from '@bingads-webui-react/help-popup';\r\nimport { withCustomValidation } from '@bingads-webui-react/validation';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { ActivityContext } from '@bingads-webui-react/hoc-with-signal';\r\nimport { CampaignSubTypes } from '@bingads-webui-campaign-react/constants';\r\n\r\nconst Title = ({ titleKey }) => {\r\n const i18n = useContext(I18nContext);\r\n const titleText = i18n.getString(titleKey);\r\n\r\n return (\r\n \r\n {i18n.getString(_TL_('Predictive targeting allows us to optimize your ad reach based on your targeting preferences. You can customize predictive targeting by setting up targeting preferences below.'))}\r\n {i18n.getString(_TL_('Learn more'))}\r\n
\r\n);\r\n\r\nPredictiveTargetingDescription.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n};\r\n\r\nexport const PredictiveTargetingHeader = ({ data }) => {\r\n const i18n = useContext(I18nContext);\r\n\r\n const { UseOptimizedTargeting } = data;\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nDynamicSearchAdPreviewUAPLUnstyled.propTypes = {\r\n classes: PropTypes.shape({\r\n adPreviewContainer: PropTypes.string,\r\n }).isRequired,\r\n data: PropTypes.shape({\r\n Text: PropTypes.string,\r\n TextPart2: PropTypes.string,\r\n DisplayUrl: PropTypes.string,\r\n Path1: PropTypes.string,\r\n Path2: PropTypes.string,\r\n }),\r\n domain: PropTypes.string,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n};\r\n\r\nDynamicSearchAdPreviewUAPLUnstyled.defaultProps = {\r\n data: {},\r\n domain: '',\r\n};\r\n\r\nexport const DynamicSearchAdPreviewUAPL =\r\n withDefaultStyles(DynamicSearchAdPreviewUAPLUnstyled, getPreviewStyles);\r\n","export const getPreviewStyles = () => ({\r\n adPreviewContainer: {\r\n },\r\n});\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Label } from '@fluentui/react-components';\r\nimport {\r\n getPanelErrorProps,\r\n TextTitle,\r\n ValidatedPanel,\r\n} from '@bingads-webui-campaign/wizard-jumbo-card';\r\nimport {\r\n MessageBar,\r\n MessageBarBody,\r\n MessageBarTitle\r\n} from '@fluentui/react-message-bar';\r\nimport { orComp, propertyIs } from '@bingads-webui-campaign-react/form-error';\r\nimport { DynamicSearchAd } from '@bingads-webui/campaign-odata-schemas';\r\nimport { HelpPopup } from '@bingads-webui-react/help-popup';\r\nimport { LearnMoreLink } from '@bingads-webui-campaign-react/help';\r\nimport { ValidatedTextFieldWithAdCustomizer } from '@bingads-webui-campaign-react/responsive-search-ad-editor';\r\nimport { ValidatedUrlPath } from '@bingads-webui-campaign-react/validated-url-input';\r\nimport { withError } from '@bingads-webui-react/validation';\r\nimport { withControlErrorHandling, withUnvalidatedControlErrors } from '@bingads-webui-campaign-react/error-handling';\r\nimport { useAdCustomizer } from './use-ad-customizer';\r\nimport AdTextImg from '../media/ad-text.svg';\r\n\r\nconst pathProps = orComp(propertyIs('Path1'), propertyIs('Path2'));\r\nconst ServerValidatedUrlPath = withControlErrorHandling(withUnvalidatedControlErrors(ValidatedUrlPath, { filter: pathProps }));\r\n\r\nconst AdTextInternal = ({\r\n i18n,\r\n expand,\r\n data,\r\n domain,\r\n permissions,\r\n scope,\r\n ...rest\r\n}) => {\r\n const {\r\n Text,\r\n TextPart2,\r\n DisplayUrl,\r\n Path1,\r\n Path2,\r\n } = data;\r\n\r\n const { campaignId, adGroupId } = scope;\r\n\r\n useAdCustomizer({\r\n campaignId,\r\n adGroupId,\r\n i18n,\r\n permissions,\r\n });\r\n\r\n return (\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nAdTextInternal.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n data: PropTypes.shape({\r\n Text: PropTypes.string,\r\n TextPart2: PropTypes.string,\r\n DisplayUrl: PropTypes.string,\r\n Path1: PropTypes.string,\r\n Path2: PropTypes.string,\r\n }),\r\n permissions: PropTypes.shape({}).isRequired,\r\n scope: PropTypes.shape({\r\n campaignId: PropTypes.string,\r\n adGroupId: PropTypes.string,\r\n }).isRequired,\r\n domain: PropTypes.string,\r\n onDataChange: PropTypes.func.isRequired,\r\n expand: PropTypes.func.isRequired,\r\n};\r\n\r\nAdTextInternal.defaultProps = {\r\n data: {\r\n Text: '',\r\n TextPart2: '',\r\n DisplayUrl: '',\r\n Path1: '',\r\n Path2: '',\r\n },\r\n domain: '',\r\n};\r\n\r\nexport const AdText = withControlErrorHandling(withUnvalidatedControlErrors(withError(AdTextInternal)));\r\n","import { useContext } from 'react';\r\nimport { InstrumentationContext } from '@bingads-webui-react/hoc-with-instrumentation';\r\nimport { initializeAdCustomizer } from '@bingads-webui-campaign/ad-customizers-next';\r\nimport config from '@bingads-webui-component-legacy/config/index';\r\nimport edmCampaign from '@bingads-webui-component-legacy/edm-campaign/index';\r\nimport jsDataCampaign from '@bingads-webui-component-legacy/js-data-campaign/index';\r\n\r\nexport const useAdCustomizer = ({\r\n campaignId,\r\n adGroupId,\r\n i18n,\r\n permissions,\r\n}) => {\r\n const instrumentation = useContext(InstrumentationContext);\r\n\r\n initializeAdCustomizer({\r\n deps: {\r\n i18n,\r\n config,\r\n instrumentation,\r\n permissions,\r\n edmCampaign,\r\n jsDataCampaign,\r\n timeZone: config.get('AccountTimeZone'),\r\n scope: {\r\n campaignId: Number(campaignId),\r\n adGroupId: Number(adGroupId),\r\n },\r\n showAdCustomizers: true,\r\n IsRSAIffPopupEnabledFromDeps: true,\r\n },\r\n adType: 'DynamicSearchAd',\r\n });\r\n};\r\n","export const getStyles = () => ({\r\n container: {\r\n position: 'relative',\r\n display: 'flex',\r\n flexDirection: 'row',\r\n gap: '16px',\r\n },\r\n editor: {\r\n width: '600px',\r\n minWidth: '600px',\r\n\r\n '& .ad-text-panel': {\r\n '& > div + div': {\r\n marginTop: '16px',\r\n },\r\n\r\n '& .field-label': {\r\n padding: '5px 0',\r\n },\r\n\r\n '& .text-input-container': {\r\n width: 'auto',\r\n },\r\n\r\n '& .url-path-container > label': {\r\n display: 'none',\r\n },\r\n },\r\n\r\n '& .error': {\r\n color: '#A80000',\r\n },\r\n },\r\n preview: {\r\n\r\n },\r\n});\r\n","import React, { useCallback, useContext, useMemo, useRef, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { extend, get } from 'underscore';\r\nimport classNames from 'classnames';\r\nimport {\r\n Collapse,\r\n collapseExpander,\r\n useCollapseState,\r\n} from '@bingads-webui-campaign/wizard-jumbo-card';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { buildLegacyI18n } from '@bingads-webui/build-legacy-i18n';\r\nimport { ValidationStringMap } from '@bingads-webui/validation-string-map';\r\nimport { DynamicSearchAd } from '@bingads-webui/campaign-odata-schemas';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport { URLOptionsSection } from '@bingads-webui-campaign-react/validated-url-input';\r\nimport { ValidationGroup } from '@bingads-webui-react/validation';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { testUurl, uurlLevels } from '@bingads-webui-component-legacy/upgraded-url/service/testUurl';\r\nimport { DynamicSearchAdPreviewUAPL } from '@bingads-webui-campaign-react/dynamic-search-ad-preview-uapl';\r\n\r\nimport { AdText } from './ad-text';\r\nimport { getStyles } from './style';\r\n\r\nexport const DynamicSearchAdEditor = ({\r\n ad,\r\n onAdChanged,\r\n domain,\r\n permissions,\r\n scope,\r\n alwaysShowError,\r\n}) => {\r\n const classes = useDefaultStyles(getStyles);\r\n const i18n = useContext(I18nContext);\r\n const legacyI18n = useMemo(() => buildLegacyI18n(i18n, [ValidationStringMap]), [i18n]);\r\n\r\n const serverContext = useContext(ServerContext);\r\n const { Token } = serverContext;\r\n\r\n const [cachedAd, setCachedAd] = useState(get(ad, 'data', {}));\r\n\r\n const {\r\n TrackingUrlTemplate, FinalUrlSuffix, UrlCustomParameters,\r\n } = cachedAd;\r\n\r\n const [\r\n allSections,\r\n expandedSections,\r\n setExpandedSections,\r\n ] = useCollapseState(\r\n ['ad-text', 'advanced-url-options'] /* all sections */,\r\n ['ad-text'] /* initially expanded sections */\r\n );\r\n\r\n const settingsExpand = useMemo(\r\n () => collapseExpander({ setActiveKeys: setExpandedSections }),\r\n [setExpandedSections]\r\n );\r\n\r\n const urlOptions = useMemo(() => ({\r\n TrackingUrlTemplate,\r\n FinalUrlSuffix,\r\n UrlCustomParameters,\r\n }), [FinalUrlSuffix, TrackingUrlTemplate, UrlCustomParameters]);\r\n\r\n const urlOptionsDetails = useRef(urlOptions);\r\n urlOptionsDetails.current = urlOptions;\r\n\r\n const triggerTestUurl = useCallback((fn, originalView) => {\r\n extend(originalView, {\r\n isInline: false,\r\n level: uurlLevels.Campaign,\r\n });\r\n const params = urlOptionsDetails.current;\r\n const options = {\r\n apiInLog: 'advancedSettingsUrlOptions/uurlTest',\r\n };\r\n testUurl(fn, originalView, params, scope, options);\r\n }, [scope]);\r\n\r\n const onValidate = useCallback((result) => {\r\n const validatedAd = { ...cachedAd, ...result.data };\r\n setCachedAd(validatedAd);\r\n onAdChanged({ ...result, data: validatedAd });\r\n }, [cachedAd, onAdChanged]);\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {i18n.getString(_TL_('Dynamically selected landing page'))}\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {i18n.getString(_TL_('Dynamically generated headline'))}\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n {i18n.getString(_TL_('Note'))} \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nDynamicSearchAdEditor.propTypes = {\r\n ad: PropTypes.shape({\r\n data: PropTypes.shape({}),\r\n isValid: PropTypes.bool,\r\n }),\r\n domain: PropTypes.string,\r\n onAdChanged: PropTypes.func.isRequired,\r\n permissions: PropTypes.shape({}).isRequired,\r\n scope: PropTypes.shape({\r\n customerId: PropTypes.string,\r\n accountId: PropTypes.string,\r\n campaignId: PropTypes.string,\r\n adGroupId: PropTypes.string,\r\n }).isRequired,\r\n alwaysShowError: PropTypes.bool,\r\n};\r\n\r\nDynamicSearchAdEditor.defaultProps = {\r\n ad: {\r\n data: {},\r\n isValid: false,\r\n },\r\n domain: '',\r\n alwaysShowError: false,\r\n};\r\n","/* eslint-disable react/no-array-index-key */\r\nimport React, { useCallback, useEffect, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { TextItem, ImageChooser } from '@bingads-webui-campaign-react/asset-library-creative-components';\r\nimport {\r\n DefaultButton,\r\n} from '@bingads-webui-react/fabric-control';\r\n\r\nexport const MetaDataEditor = ({\r\n metaData,\r\n i18n,\r\n cid,\r\n aid,\r\n oDataConfig,\r\n finalUrl,\r\n assetLibraryConfig,\r\n onTextListChange,\r\n onChangeImage,\r\n disableGenerate,\r\n handleGenerate,\r\n textErrorMessages,\r\n}) => {\r\n const [textList, setTextList] = React.useState();\r\n\r\n const onTextListUpdate = useCallback((str, index) => {\r\n const newTextList = [...textList];\r\n newTextList[index] = str;\r\n setTextList(newTextList);\r\n onTextListChange(newTextList);\r\n }, [onTextListChange, textList]);\r\n\r\n useEffect(() => {\r\n if (metaData && metaData.text && metaData.images) {\r\n setTextList(metaData.text);\r\n }\r\n }, [metaData]);\r\n\r\n const imageSrc = useMemo(() => (metaData && metaData.newImage && metaData.newImage.url) || '', [metaData]);\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {\r\n textList && textList.length > 0 && textList.map((text, index) => (\r\n
\r\n );\r\n};\r\n\r\nMetaDataEditor.propTypes = {\r\n metaData: PropTypes.shape({\r\n text: PropTypes.arrayOf(PropTypes.string),\r\n images: PropTypes.arrayOf(PropTypes.string),\r\n }).isRequired,\r\n i18n: PropTypes.shape({}).isRequired,\r\n cid: PropTypes.string.isRequired,\r\n aid: PropTypes.string.isRequired,\r\n oDataConfig: PropTypes.shape({}).isRequired,\r\n finalUrl: PropTypes.string.isRequired,\r\n assetLibraryConfig: PropTypes.shape({}).isRequired,\r\n onChangeImage: PropTypes.func.isRequired,\r\n onTextListChange: PropTypes.func.isRequired,\r\n disableGenerate: PropTypes.bool.isRequired,\r\n handleGenerate: PropTypes.func.isRequired,\r\n textErrorMessages: PropTypes.arrayOf(PropTypes.string),\r\n};\r\n\r\nMetaDataEditor.defaultProps = {\r\n textErrorMessages: undefined,\r\n};\r\n","export const getVideoSettingsEditorStyles = () => ({\r\n videoSettingsEditor: {\r\n '& .plus-button-container': {\r\n marginTop: 16,\r\n '& .item-title span': {\r\n fontWeight: 600,\r\n },\r\n '& .add-image-button': {\r\n marginTop: 8,\r\n width: 'auto',\r\n height: 'auto',\r\n '& span': {\r\n width: 106,\r\n border: '1px dashed #c8c6c4',\r\n height: 76,\r\n borderRadius: 6,\r\n },\r\n },\r\n },\r\n },\r\n});\r\n","import React, { useCallback, useEffect, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\n\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { IconButton, Text, DefaultButton } from '@bingads-webui-react/fabric-control';\r\nimport { ImageContainer, TextItem } from '@bingads-webui-campaign-react/asset-library-creative-components';\r\n\r\nimport { getVideoSettingsEditorStyles } from './style';\r\n\r\nexport const VideoSettingsEditor = ({\r\n videoSettings,\r\n setVideoSettings,\r\n i18n,\r\n onLoadingLogo,\r\n onChangeLogo,\r\n newLogoDataObject,\r\n handleGenerate,\r\n disableGenerate,\r\n businessNameErrorMessage,\r\n}) => {\r\n const businessName = useMemo(() => {\r\n if (videoSettings && videoSettings.updating && videoSettings.updating.businessName) {\r\n return videoSettings.updating.businessName.text;\r\n }\r\n\r\n return '';\r\n }, [videoSettings]);\r\n\r\n const currentLogo = useMemo(() => {\r\n if (videoSettings && videoSettings.updating && videoSettings.updating.logo) {\r\n return videoSettings.updating.logo.url;\r\n }\r\n\r\n return '';\r\n }, [videoSettings]);\r\n\r\n useEffect(() => {\r\n if (newLogoDataObject && newLogoDataObject.url) {\r\n setVideoSettings(prev => ({\r\n ...prev,\r\n updating: {\r\n ...prev.updating,\r\n logo: {\r\n url: newLogoDataObject.url,\r\n display: true,\r\n },\r\n },\r\n }));\r\n }\r\n }, [newLogoDataObject, setVideoSettings]);\r\n\r\n const onVideoSettingsChanged = useCallback((metaData) => {\r\n setVideoSettings({\r\n ...videoSettings,\r\n updating: {\r\n ...videoSettings.updating,\r\n ...metaData,\r\n },\r\n });\r\n }, [setVideoSettings, videoSettings]);\r\n\r\n const onBusinessNameChange = useCallback((str) => {\r\n onVideoSettingsChanged({\r\n businessName: {\r\n text: str,\r\n display: str !== '',\r\n },\r\n });\r\n }, [onVideoSettingsChanged]);\r\n\r\n const onEdit = useCallback(() => {\r\n // setDisplayEdit(false);\r\n onChangeLogo();\r\n }, [onChangeLogo]);\r\n\r\n const onDelete = useCallback(() => {\r\n onVideoSettingsChanged({\r\n logo: {\r\n url: '',\r\n display: false,\r\n },\r\n });\r\n }, [onVideoSettingsChanged]);\r\n\r\n const classes = useDefaultStyles(getVideoSettingsEditorStyles);\r\n\r\n return (\r\n \r\n { onTextListUpdate(str, index); }}\r\n errorMessage={(textErrorMessages && textErrorMessages[index]) || ''}\r\n title={i18n.getString(_TL_('Text {{index}}'), { index: index + 1 })}\r\n showHelpPopup\r\n helpTopic=\"pop_BA_VideoAdsCopilot_Text\"\r\n />\r\n
\r\n ))\r\n }\r\n {\r\n imageSrc &&\r\n \r\n
\r\n );\r\n};\r\n\r\nVideoSettingsEditor.propTypes = {\r\n videoSettings: PropTypes.shape({\r\n updating: PropTypes.shape({\r\n businessName: PropTypes.shape({\r\n text: PropTypes.string,\r\n }),\r\n logo: PropTypes.shape({\r\n url: PropTypes.string,\r\n }),\r\n }),\r\n }),\r\n setVideoSettings: PropTypes.func.isRequired,\r\n disableGenerate: PropTypes.bool.isRequired,\r\n handleGenerate: PropTypes.func.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n onLoadingLogo: PropTypes.func,\r\n onChangeLogo: PropTypes.func,\r\n newLogoDataObject: PropTypes.shape({\r\n url: PropTypes.string,\r\n }),\r\n};\r\n\r\nVideoSettingsEditor.defaultProps = {\r\n videoSettings: {},\r\n onLoadingLogo: () => {},\r\n onChangeLogo: () => {},\r\n newLogoDataObject: {},\r\n};\r\n","import { extensionEditorStyles } from '@bingads-webui-campaign-react/common-styles';\r\n\r\nexport const getVideoEditorStyles = (_, { palette = {} }) => ({\r\n header: {\r\n display: 'absolute', // remove the header from original rendering flow\r\n height: '60px',\r\n },\r\n videoEditor: {\r\n '& .ms-Panel-contentInner': {\r\n height: '100%',\r\n '& .ms-Panel-scrollableContent': {\r\n overflowY: 'hidden',\r\n height: '100%',\r\n '& .ms-Panel-content': {\r\n height: '100%',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n paddingLeft: '0px',\r\n paddingRight: '0px',\r\n paddingBottom: '0px',\r\n },\r\n },\r\n },\r\n '& .ms-Panel-commands': {\r\n position: 'absolute',\r\n width: '100%',\r\n background: 'transparent',\r\n '& .ms-Panel-header': {\r\n paddingLeft: '32px',\r\n },\r\n },\r\n '& $top': {\r\n '& $leftPanel': {\r\n '& $leftPanelTop': {\r\n },\r\n '& $leftPanelMiddle': {\r\n '& $tabs': {\r\n },\r\n '& $metadata': {\r\n },\r\n },\r\n '& $leftPanelBottom': {\r\n },\r\n },\r\n '& $rightPanel': {\r\n },\r\n },\r\n '& $bottom': {\r\n },\r\n },\r\n leftPanelTop: {\r\n height: '60px',\r\n flexShrink: 0,\r\n },\r\n leftPanelMiddle: {\r\n marginLeft: '28px',\r\n display: 'flex',\r\n flexGrow: 1,\r\n maxHeight: 'calc(100% - 60px)',\r\n overflowY: 'auto',\r\n },\r\n tabs: {\r\n width: '102px',\r\n paddingRight: '16px',\r\n borderRight: '1px solid #DFDFDF',\r\n boxSizing: 'content-box',\r\n paddingLeft: '4px',\r\n },\r\n videoSettings: {\r\n '& .item-title': {\r\n marginBottom: '8px',\r\n '& span': {\r\n fontWeight: 600,\r\n },\r\n },\r\n '& .video-settings-content': {\r\n width: 102,\r\n height: 60,\r\n border: '1px solid #d1d1d1',\r\n borderRadius: '4px',\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n marginBottom: '16px',\r\n '& .icon': {\r\n fontSize: 18,\r\n color: '#242424',\r\n },\r\n '&.selected': {\r\n outlineColor: '#0078d4',\r\n outlineStyle: 'solid',\r\n },\r\n },\r\n\r\n },\r\n metadata: {\r\n width: '432px',\r\n paddingLeft: '16px',\r\n display: 'none',\r\n '&.selected': {\r\n display: 'block',\r\n },\r\n },\r\n leftPanelBottom: {\r\n height: '24px',\r\n },\r\n leftPanel: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n width: '600px',\r\n },\r\n rightPanel: {\r\n width: '675px',\r\n paddingLeft: '32px',\r\n paddingRight: '32px',\r\n borderLeft: '1px solid #DFDFDF',\r\n backgroundColor: palette.neutralLighterAlt || '#FAF9F8',\r\n paddingTop: '52px',\r\n },\r\n top: {\r\n flexGrow: 1,\r\n display: 'flex',\r\n maxHeight: 'calc(100% - 64px)',\r\n },\r\n bottom: {\r\n height: '64px',\r\n display: 'flex',\r\n alignItems: 'center',\r\n borderTop: '1px solid #DFDFDF',\r\n paddingLeft: '32px',\r\n flexShrink: 0,\r\n '& .apply-button': {\r\n marginRight: '8px',\r\n },\r\n },\r\n});\r\n\r\nexport const getGlobalLogoPickerStyles = (_, { palette = {} }) => ({\r\n '@global': {\r\n ...extensionEditorStyles({ palette }),\r\n },\r\n});\r\n","\r\nexport const getScenePickerStyles = (_, { palette = {} }) => ({\r\n scenePicker: {\r\n '& .item-title': {\r\n '& span': {\r\n fontWeight: 600,\r\n },\r\n marginBottom: 8,\r\n },\r\n '& .scene': {\r\n '& .scene-decorator': {\r\n borderRadius: 6,\r\n '& .scene-box': {\r\n overflow: 'hidden',\r\n '&.selected': {\r\n outlineColor: palette.themePrimary || '#0078d4',\r\n outlineStyle: 'solid',\r\n },\r\n width: 102,\r\n padding: 1,\r\n height: 60,\r\n borderRadius: 6,\r\n },\r\n '& img': {\r\n height: '100%',\r\n width: '100%',\r\n objectFit: 'cover',\r\n borderRadius: 6,\r\n },\r\n },\r\n '& .scene-index-block': {\r\n marginTop: 4,\r\n marginBottom: 16,\r\n '& span': {\r\n verticalAlign: 'middle',\r\n lineHeight: '20px',\r\n },\r\n },\r\n },\r\n },\r\n});\r\n","import React, { useContext, useCallback } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport {\r\n Text,\r\n} from '@bingads-webui-react/fabric-control';\r\nimport { keyCode } from '@bingads-webui/keycode';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { HelpPopupInline } from '@bingads-webui-react/help-popup';\r\nimport { getScenePickerStyles } from './styles';\r\n\r\n\r\nconst Title = () => {\r\n const i18n = useContext(I18nContext);\r\n return (\r\n \r\n
\r\n }\r\n\r\n \r\n {i18n.getString(_TL_('Choose a logo'))} \r\n
\r\n \r\n {i18n.getString(_TL_('Scenes'))} \r\n
\r\n );\r\n};\r\n\r\nconst Scene = ({\r\n scene, sceneId, onSceneSelected, selectedSceneId,\r\n}) => {\r\n const clickFunc = useCallback(() => {\r\n onSceneSelected({ scene, id: sceneId });\r\n }, [onSceneSelected, scene, sceneId]);\r\n\r\n const onKeyDown = useCallback((ev) => {\r\n if (ev.keyCode === keyCode.Enter) {\r\n clickFunc();\r\n }\r\n }, [clickFunc]);\r\n\r\n const {\r\n keyFrame,\r\n } = scene;\r\n\r\n const isSelected = sceneId === selectedSceneId;\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n 
\r\n
\r\n \r\n {`${sceneId + 1}`} \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nScenePickerView.propTypes = {\r\n scenes: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\r\n onSceneSelected: PropTypes.func.isRequired,\r\n selectedSceneId: PropTypes.number.isRequired,\r\n};\r\n\r\nScenePickerView.defaultProps = {};\r\n","export const getPreviewStyles = (_, { palette = {} }) => ({\r\n preview: {\r\n height: '100%',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n '& .loading-placeholder': {\r\n flexGrow: 1,\r\n borderRadius: '6px',\r\n background: palette.neutralLight || '#EDEBE9',\r\n },\r\n '& .spinner-box': {\r\n marginTop: 16,\r\n marginBottom: 16,\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n '& .spinner-text': {\r\n marginLeft: 8,\r\n fontSize: 16,\r\n fontStyle: 'normal',\r\n fontWeight: 400,\r\n lineHeight: '22px',\r\n color: palette.neutralSecondary || '#605E5C',\r\n },\r\n },\r\n '& .panel-switch': {\r\n display: 'flex',\r\n '& .panel-button': {\r\n height: '40px',\r\n width: '44px',\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n marginRight: '16px',\r\n '&.selected': {\r\n borderBottom: `2px solid ${palette.themePrimary || '#0078d4'}`,\r\n '& span': {\r\n fontWeight: 600,\r\n },\r\n },\r\n },\r\n },\r\n '& .scene-panel': {\r\n width: '100%',\r\n display: 'flex',\r\n alignItems: 'center',\r\n height: '100%',\r\n maxHeight: 'calc(100% - 72px)',\r\n '& img': {\r\n width: '100%',\r\n borderRadius: 6,\r\n maxHeight: '100%',\r\n objectFit: 'contain',\r\n },\r\n },\r\n '& .video-panel': {\r\n width: '100%',\r\n display: 'flex',\r\n alignItems: 'center',\r\n height: '100%',\r\n '& .video-placeholder': {\r\n width: '100%',\r\n color: '#ffffff',\r\n height: '400px',\r\n borderRadius: 6,\r\n overflow: 'hidden',\r\n '& div': {\r\n boxSizing: 'border-box',\r\n },\r\n },\r\n '& .video-wrapper': {\r\n width: '100%',\r\n '&.hidden': {\r\n display: 'none',\r\n },\r\n '& .video-container': {\r\n width: '100%',\r\n '& .video-previewer-root': {\r\n '& .time': {\r\n display: 'flex',\r\n marginLeft: '16px',\r\n marginRight: '12px',\r\n fontSize: '12px',\r\n '& span.divider': {\r\n marginLeft: '4px',\r\n marginRight: '4px',\r\n color: palette.neutralSecondary || 'rgba(0, 0, 0, 0.54)',\r\n },\r\n '& span.totalTime': {\r\n color: palette.neutralSecondary || 'rgba(0, 0, 0, 0.54)',\r\n },\r\n },\r\n backgroundColor: 'transparent',\r\n marginTop: '24px',\r\n '& svg': {\r\n fill: '#424242',\r\n },\r\n '& i[data-icon-name]': {\r\n height: '24px',\r\n },\r\n '& i[data-icon-name=\"videoUnmute\"]': {\r\n height: '20px',\r\n },\r\n '& .ms-Slider-thumb, .ms-Slider-thumb:active, .ms-Slider-thumb:hover': {\r\n backgroundColor: '#238ADA',\r\n border: 'none',\r\n boxShadow: '1px 1px 1px #D2D1D1,-1px 1px 1px #D2D1D1,1px -1px 1px #D2D1D1,-1px -1px 1px #D2D1D1',\r\n },\r\n '& .ms-Slider': {\r\n marginRight: '8px',\r\n },\r\n '& .ms-Slider-active': {\r\n backgroundColor: '#238ADA',\r\n },\r\n '& .ms-Slider-inactive': {\r\n backgroundColor: '#DAD9D8',\r\n },\r\n },\r\n },\r\n },\r\n '& video': {\r\n width: '100%',\r\n borderRadius: 6,\r\n boxShadow: '0px 0.6px 1.8px 0px rgba(0, 0, 0, 0.10), 0px 3.2px 7.2px 0px rgba(0, 0, 0, 0.13)',\r\n },\r\n },\r\n '& .message-bar': {\r\n marginBottom: '16px',\r\n },\r\n },\r\n});\r\n","import { useState } from 'react';\r\n\r\nexport const panelNames = {\r\n scene: 'scene',\r\n video: 'video',\r\n};\r\n\r\nexport const usePreviewState = () => {\r\n const [currentPanel, setCurrentPanel] = useState('scene');\r\n const isScenePanel = currentPanel === panelNames.scene;\r\n\r\n return {\r\n currentPanel,\r\n setCurrentPanel,\r\n isScenePanel,\r\n };\r\n};\r\n","import _ from 'underscore';\r\nimport Promise from 'bluebird';\r\n\r\nconst keyframeTemplateList = [\r\n {\r\n TemplateId: '00000001-0000-0000-0000-000000000000',\r\n TemplateName: 'Template 8 Scene 1',\r\n Version: '1.0',\r\n Width: 1280,\r\n Height: 720,\r\n TemplateFileName: 'template8_keyframe1.html',\r\n Image: [\r\n {\r\n AspectRatio: '16:9',\r\n MinHeight: 360,\r\n },\r\n ],\r\n Text: [\r\n {\r\n MaxLengthInChar: 20,\r\n },\r\n {\r\n MaxLengthInChar: 36,\r\n },\r\n ],\r\n },\r\n {\r\n TemplateId: '00000001-0000-0000-0000-000000000001',\r\n TemplateName: 'Template 8 Scene 2',\r\n Version: '1.0',\r\n Width: 1280,\r\n Height: 720,\r\n TemplateFileName: 'template8_keyframe2.html',\r\n Image: [\r\n {\r\n AspectRatio: '16:9',\r\n MinHeight: 360,\r\n },\r\n ],\r\n Text: [\r\n {\r\n MaxLengthInChar: 20,\r\n },\r\n {\r\n MaxLengthInChar: 36,\r\n },\r\n ],\r\n },\r\n {\r\n TemplateId: '00000001-0000-0000-0000-000000000002',\r\n TemplateName: 'Template 8 Scene 3',\r\n Version: '1.0',\r\n Width: 1280,\r\n Height: 720,\r\n TemplateFileName: 'template8_keyframe3.html',\r\n Image: [\r\n {\r\n AspectRatio: '16:9',\r\n MinHeight: 360,\r\n },\r\n ],\r\n Text: [\r\n {\r\n MaxLengthInChar: 25,\r\n },\r\n {\r\n MaxLengthInChar: 40,\r\n },\r\n ],\r\n },\r\n];\r\n\r\nconst getActiveTemplate = templateId => _.findWhere(keyframeTemplateList, { TemplateId: templateId });\r\n\r\nexport const getTextSizeLimitation = (templateId) => {\r\n const activeTemplate = getActiveTemplate(templateId);\r\n if (activeTemplate && activeTemplate.Text) {\r\n return activeTemplate.Text.map(text => text.MaxLengthInChar);\r\n }\r\n return [];\r\n};\r\n\r\nexport const getImageSizeLimitation = (templateId) => {\r\n const activeTemplate = getActiveTemplate(templateId);\r\n if (activeTemplate && activeTemplate.Image) {\r\n return activeTemplate.Image.map((image) => {\r\n const minHeight = image.MinHeight;\r\n const aspectRatio = image.AspectRatio.split(':');\r\n const minWidth = minHeight * (aspectRatio[0] / aspectRatio[1]);\r\n\r\n return [minWidth, minHeight];\r\n });\r\n }\r\n return [];\r\n};\r\n\r\nexport const MaxBusinessNameLength = 25;\r\n\r\nexport const loadImagePromise = (src, mock) => {\r\n const image = new Image();\r\n image.src = src;\r\n return new Promise((resolve) => {\r\n image.onload = () => {\r\n // if the actual image is 404, it will return a placeholder image which width and height are 80\r\n // todo: investigate if there is a better way to handle this\r\n if (image.width === 80 && image.height === 80 && !mock) {\r\n resolve('failed');\r\n } else {\r\n resolve('success');\r\n }\r\n };\r\n image.onerror = () => {\r\n if (!mock) {\r\n resolve('failed');\r\n } else {\r\n resolve('success');\r\n }\r\n };\r\n });\r\n};\r\n","import React, { useContext, useCallback, useState, useMemo, Fragment, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport {\r\n Spinner,\r\n Text,\r\n MessageBar,\r\n MessageBarType,\r\n} from '@bingads-webui-react/fabric-control';\r\nimport _, { isEmpty } from 'underscore';\r\nimport { keyCode } from '@bingads-webui/keycode';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport {\r\n ItemPlaceholderBoxView,\r\n videoIcon,\r\n} from '@bingads-webui-campaign-react/asset-library-components';\r\nimport { Video } from '@bingads-webui-campaign-react/video';\r\n\r\nimport { getPreviewStyles } from './styles';\r\nimport { panelNames } from './state';\r\nimport { loadImagePromise } from '../util';\r\n\r\nconst PanelButton = ({ panel, currentPanel, switchPanel }) => {\r\n const {\r\n name,\r\n text,\r\n } = panel;\r\n\r\n const clickFunc = useCallback(() => {\r\n switchPanel(name);\r\n }, [name, switchPanel]);\r\n\r\n const onKeyDown = useCallback((ev) => {\r\n if (ev.keyCode === keyCode.Enter) {\r\n clickFunc();\r\n }\r\n }, [clickFunc]);\r\n\r\n const isSelected = name === currentPanel;\r\n\r\n return (\r\n \r\n {panels.map(panel => (
\r\n );\r\n};\r\n\r\nSwitch.propTypes = {\r\n currentPanel: PropTypes.string.isRequired,\r\n switchPanel: PropTypes.func.isRequired,\r\n};\r\n\r\nconst ScenePanel = ({ scene, setGenerateError }) => {\r\n const {\r\n keyFrame,\r\n } = scene;\r\n\r\n const i18n = useContext(I18nContext);\r\n\r\n useEffect(() => {\r\n if (keyFrame && keyFrame.url) {\r\n loadImagePromise(keyFrame.url, false).then((result) => {\r\n if (result === 'failed') {\r\n setGenerateError(i18n.getString(_TL_('The scene\\'s image failed to load. Select Generate to update the video with a new scene.')));\r\n } else {\r\n setGenerateError(undefined);\r\n }\r\n });\r\n }\r\n }, [i18n, keyFrame, setGenerateError]);\r\n return (\r\n \r\n {keyFrame && keyFrame.url && }\r\n
\r\n );\r\n};\r\n\r\nScenePanel.propTypes = {\r\n scene: PropTypes.shape({}).isRequired,\r\n setGenerateError: PropTypes.func.isRequired,\r\n};\r\n\r\nconst PlaceHolderBoxViewFooterConfig = {\r\n text: {\r\n summary: _TL_('Your video is currently loading.'),\r\n },\r\n};\r\n\r\nconst VideoPanel = ({ video }) => {\r\n const i18n = useContext(I18nContext);\r\n const [isLoading, setIsLoading] = useState(true);\r\n\r\n const footerProps = useMemo(() => {\r\n const localizedTextFields = _.mapObject(\r\n PlaceHolderBoxViewFooterConfig.text,\r\n text => i18n.getString(text)\r\n );\r\n\r\n return {\r\n ...localizedTextFields,\r\n };\r\n }, [i18n]);\r\n\r\n const notReady = isLoading;\r\n\r\n const {\r\n url,\r\n } = video;\r\n\r\n return (\r\n \r\n {notReady &&\r\n
\r\n );\r\n};\r\n\r\nconst LoadingBlocker = ({ videoGenerated }) => {\r\n const i18n = useContext(I18nContext);\r\n const loadingText = videoGenerated === 0 || videoGenerated === 10 ? _TL_('Generating a new video...') : _TL_('Generating a new scene...');\r\n return (\r\n \r\n setIsLoading(false)}\r\n i18n={i18n}\r\n ariaLabel={i18n.getString(_TL_('Generated Video'))}\r\n src={url}\r\n />\r\n
\r\n \r\n
\r\n \r\n {\r\n generateError &&\r\n setGenerateError(undefined)}\r\n dismissButtonAriaLabel=\"Close\"\r\n >\r\n {generateError}\r\n \r\n }\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nPreviewView.propTypes = {\r\n scene: PropTypes.shape({}),\r\n video: PropTypes.shape({}).isRequired,\r\n currentPanel: PropTypes.string.isRequired,\r\n switchPanel: PropTypes.func.isRequired,\r\n isScenePanel: PropTypes.bool.isRequired,\r\n videoGenerated: PropTypes.number.isRequired,\r\n sceneGenerated: PropTypes.number.isRequired,\r\n generateError: PropTypes.string,\r\n setGenerateError: PropTypes.func.isRequired,\r\n};\r\n\r\nPreviewView.defaultProps = {\r\n scene: {},\r\n generateError: undefined,\r\n};\r\n\r\n","import Promise from 'bluebird';\r\nimport { useCallback, useEffect, useMemo, useState } from 'react';\r\nimport { isEqual, omit, some, keys, compact } from 'underscore';\r\nimport { newVideoFromMTObject } from '@bingads-webui-campaign-react/image-experience-video-part';\r\nimport { getParameter, getDomain } from '@bingads-webui/url-util';\r\nimport { getImageSizeLimitation, getTextSizeLimitation, MaxBusinessNameLength, loadImagePromise } from './util';\r\nimport { usePreviewState, panelNames } from './preview/state';\r\n\r\n// for testing\r\nconst isSelenium = getParameter('isselenium');\r\nconst isLocal = getDomain(window.location.href) === 'localhost';\r\nconst mock = isSelenium === 'true' || isLocal;\r\n\r\nconst useRecommendations = ({ copilotDataService }) => {\r\n const { editVideoAdsAssetRecommendations, fetchVideoKeyFrameRecommendations } = copilotDataService;\r\n\r\n const generateVideo = ({ video, scenes, videoSettings }) => {\r\n const {\r\n template,\r\n } = video;\r\n const {\r\n templateId,\r\n audio,\r\n } = template;\r\n const { logo, businessName } = videoSettings;\r\n const newVideoMetaData = {\r\n template: {\r\n templateId,\r\n logo,\r\n businessName,\r\n audio,\r\n scenes: scenes.map(scene => ({\r\n text: scene.text,\r\n images: scene.images,\r\n })),\r\n },\r\n };\r\n const ads = newVideoMetaData;\r\n\r\n return editVideoAdsAssetRecommendations(ads, mock)\r\n .then((res) => {\r\n if (res.data && res.data.ads && res.data.ads.length > 0) {\r\n return res.data.ads[0];\r\n }\r\n return Promise.reject(res);\r\n });\r\n };\r\n\r\n const generateScene = ({ logo, businessName, scene }) => {\r\n const newSceneMetaData = {\r\n text: scene.text,\r\n images: scene.images,\r\n keyFrame: {\r\n templateId: scene.keyFrame.templateId,\r\n },\r\n };\r\n\r\n const requestData = {\r\n logo,\r\n businessName,\r\n scene: newSceneMetaData,\r\n };\r\n\r\n return fetchVideoKeyFrameRecommendations(requestData, mock)\r\n .then((res) => {\r\n if (res && res.data && res.data.scene) {\r\n return res.data.scene;\r\n }\r\n return Promise.reject(res);\r\n });\r\n };\r\n\r\n return {\r\n generateVideo,\r\n generateScene,\r\n };\r\n};\r\n\r\n// even the same scene, the keyFrame url could be different.\r\nconst isEqualScene = (scene1, scene2) => isEqual(omit(scene1, 'keyFrame'), omit(scene2, 'keyFrame'));\r\nconst isSceneChanged = scene => (scene.effective ? !isEqualScene(scene.updating, scene.effective) : !isEqualScene(scene.original, scene.updating));\r\nconst isVideoSettingsChanged = videoSettings => !isEqual(videoSettings.effective, videoSettings.updating);\r\nconst isVideoChanged = (scenes, videoSettings) => scenes.some(scene => isSceneChanged(scene)) || isVideoSettingsChanged(videoSettings);\r\n\r\n// For the scene related state, we could save them into a single scene object, and then use the id to locate the scene object.\r\n// Text, Image, KeyFrame are the main scene properties that could be changed. (KeyFrame is from the API call. Text and Image are also included in the API calls.)\r\n// Original, Updating and Effective are for checking if the scene has been changed.\r\n// For the video, we could save the video URL and it's related scenes.\r\n// To check if the video could be generated, we could check if the scenes have been changed.\r\n// If the scenes have been changed, we could generate the video.\r\n// If the scenes are not changed, we could apply the video and it's related scenes (if we want to save the metadata).\r\n\r\n// videoMetaData is the original video.\r\nexport const useEditVideoAdsViewState = ({\r\n videoMetaData,\r\n dataService,\r\n copilotDataService,\r\n onApply,\r\n setIsOpen,\r\n logger,\r\n i18n,\r\n newImageDataObject,\r\n newLogoDataObject,\r\n saveVideoWhenApply,\r\n isCTV,\r\n}) => {\r\n const {\r\n uploadVideoMetadata,\r\n } = dataService;\r\n\r\n const {\r\n generateScene,\r\n generateVideo,\r\n } = useRecommendations({\r\n copilotDataService,\r\n });\r\n\r\n const [scenes, setScenes] = useState([]);\r\n const [selectedSceneId, setSelectedSceneId] = useState(-1); // Used to locate teh scene with id\r\n const [isApplying, setIsApplying] = useState(false); // Used to show the applying status\r\n const [video, setVideo] = useState({});\r\n const [originalVideo, setOriginalVideo] = useState(videoMetaData.url);\r\n const [videoSettings, setVideoSettings] = useState({}); // Used to store the video settings [logo, businessName]\r\n const [sceneGenerated, setSceneGenerated] = useState(1);\r\n const [videoGenerated, setVideoGenerated] = useState(1);\r\n const [videoScenesCache, setVideoScenesCache] = useState([]);\r\n const [generateError, setGenerateError] = useState(undefined); // Used to show the error message\r\n const [haveEmptyImage, setHaveEmptyImage] = useState(false);\r\n const [newImageObject, setNewImageObject] = useState(newImageDataObject);\r\n\r\n const {\r\n currentPanel,\r\n isScenePanel,\r\n setCurrentPanel,\r\n } = usePreviewState();\r\n\r\n useEffect(() => {\r\n if (videoMetaData) {\r\n // initialization from the video metadata\r\n const { scenes: scenesInner = [], logo, businessName } = videoMetaData && videoMetaData.template;\r\n const scenesWithIds = scenesInner.map((scene, index) => ({\r\n original: scene,\r\n updating: scene, // Used to keep track of the scene changes (the react view will modify this part)\r\n effective: scene, // Assume, we've already generated the scene\r\n id: index,\r\n newImage: { url: scene.images[0], id: '' },\r\n }));\r\n\r\n setScenes(scenesWithIds);\r\n setSelectedSceneId(-1);\r\n setOriginalVideo(videoMetaData.url);\r\n setVideo({\r\n ...videoMetaData,\r\n scenes: scenesWithIds,\r\n });\r\n const videoSettingsInner = {\r\n logo,\r\n businessName,\r\n };\r\n setVideoSettings({\r\n original: videoSettingsInner,\r\n updating: videoSettingsInner,\r\n effective: videoSettingsInner,\r\n });\r\n if (isCTV) {\r\n logger.logTrace('CTV Copilot video editor: editor panel opened');\r\n } else {\r\n logger.logTrace('OLV Copilot video editor: editor panel opened');\r\n }\r\n }\r\n }, [logger, videoMetaData]);\r\n\r\n const generateNewVideo = useCallback((scenesInCall, isSwitchFromScene) => {\r\n if (isSwitchFromScene) {\r\n setVideoGenerated(10);\r\n } else {\r\n setVideoGenerated(0);\r\n }\r\n setGenerateError(undefined);\r\n\r\n return generateVideo({ scenes: scenesInCall.map(scene => scene.updating), video, videoSettings: videoSettings.updating }).then((newVideoMetaData) => {\r\n const { scenes: scenesInner = [], logo, businessName } = newVideoMetaData && newVideoMetaData.template;\r\n const scenesWithIds = scenesInCall.map((scene, index) => ({\r\n ...scene,\r\n effective: scenesInner[index],\r\n updating: scenesInner[index],\r\n id: index,\r\n }));\r\n\r\n setScenes(scenesWithIds);\r\n setVideo({\r\n ...newVideoMetaData,\r\n scenes: scenesWithIds,\r\n });\r\n const newVideoSettings = { logo, businessName };\r\n setVideoSettings({\r\n ...videoSettings,\r\n effective: newVideoSettings,\r\n updating: newVideoSettings,\r\n });\r\n setVideoGenerated(1);\r\n setVideoScenesCache([]);\r\n if (isCTV) {\r\n logger.logTrace('CTV Copilot video editor: video generated');\r\n } else {\r\n logger.logTrace('OLV Copilot video editor: video generated');\r\n }\r\n return {\r\n ...newVideoMetaData,\r\n scenes: scenesWithIds,\r\n msg: 'success',\r\n };\r\n }).catch((error) => {\r\n const { errors } = error;\r\n if (errors && errors[0] && errors[0].message) {\r\n setGenerateError(errors[0].message);\r\n } else {\r\n setGenerateError(i18n.getString(_TL_('Copilot has failed to generate a new video. Please try again later.')));\r\n }\r\n setVideoGenerated(-1);\r\n return {\r\n msg: 'failed',\r\n };\r\n });\r\n }, [generateVideo, video, videoSettings, logger, i18n]);\r\n\r\n const delayedVideoGeneration = useCallback(() => {\r\n if (videoScenesCache.length > 0) {\r\n const promise = generateNewVideo(videoScenesCache, true);\r\n return promise;\r\n }\r\n return Promise.resolve({ ...video, msg: 'success' });\r\n }, [generateNewVideo, video, videoScenesCache]);\r\n\r\n const selectedScene = useMemo(() => scenes && scenes.find(scene => scene.id === selectedSceneId), [scenes, selectedSceneId]) || {\r\n original: {},\r\n updating: {},\r\n effective: {},\r\n id: -1,\r\n };\r\n\r\n const onSceneSelected = useCallback((scene) => {\r\n setSelectedSceneId(scene.id);\r\n }, []);\r\n\r\n const onScenesUpdated = useCallback((updatedScenes) => {\r\n setScenes(updatedScenes);\r\n }, []);\r\n\r\n const onVideoSettingsSelected = useCallback(() => {\r\n setSelectedSceneId(-1);\r\n }, []);\r\n\r\n const handleGenerateVideo = useCallback(() => {\r\n generateNewVideo(scenes, false);\r\n }, [generateNewVideo, scenes]);\r\n\r\n const generateNewScene = useCallback(({ scene, videoLevelMetaData }) => {\r\n if (isSceneChanged(scene)) {\r\n return generateScene({\r\n scene: scene.updating,\r\n logo: videoLevelMetaData.logo,\r\n businessName: videoLevelMetaData.businessName,\r\n });\r\n }\r\n return scene.effective ? Promise.resolve(scene.effective) : Promise.resolve(scene.original);\r\n }, [generateScene]);\r\n\r\n const handleGenerateScene = useCallback(() => {\r\n setSceneGenerated(0);\r\n setGenerateError(undefined);\r\n\r\n // As user could switch between the scenes, we need to generate all the scenes.\r\n Promise.all(scenes.map(scene => generateNewScene({ scene, videoLevelMetaData: videoSettings.updating }))).then((newScenes) => {\r\n const copyScenes = Array.from(scenes);\r\n const newScenesWithIds = newScenes.map((newScene, index) => {\r\n const co = copyScenes[index];\r\n copyScenes[index] = {\r\n ...co,\r\n effective: {\r\n ...newScene,\r\n },\r\n updating: { ...newScene },\r\n };\r\n return copyScenes[index];\r\n });\r\n setScenes(newScenesWithIds);\r\n setVideoScenesCache(newScenesWithIds);\r\n setVideoSettings({\r\n ...videoSettings,\r\n effective: videoSettings.updating,\r\n });\r\n setSceneGenerated(1);\r\n logger.logTrace('Copilot video editor: scene generated');\r\n }).catch((error) => {\r\n const { errors } = error;\r\n if (errors && errors[0] && errors[0].message) {\r\n setGenerateError(errors[0].message);\r\n } else {\r\n setGenerateError(i18n.getString(_TL_('Copilot has failed to generate a new scene. Please try again later.')));\r\n }\r\n setSceneGenerated(-1);\r\n });\r\n }, [scenes, generateNewScene, videoSettings, logger, i18n]);\r\n\r\n const handleGenerate = useCallback(() => {\r\n logger.logTrace('Copilot video editor: generate button clicked');\r\n if (isScenePanel && !isVideoSettingsChanged(videoSettings)) {\r\n // Preserve the data for video because user might switch from scene to video panel and edit the scene at the same time.\r\n handleGenerateScene();\r\n } else {\r\n if (sceneGenerated !== 0) {\r\n handleGenerateScene();\r\n }\r\n handleGenerateVideo();\r\n }\r\n }, [logger, isScenePanel, videoSettings, handleGenerateScene, sceneGenerated, handleGenerateVideo]);\r\n\r\n const handleApply = useCallback(() => {\r\n setIsApplying(true);\r\n delayedVideoGeneration().then((data) => {\r\n const {\r\n msg,\r\n url: newVideoUrl,\r\n scenes: newScenes,\r\n } = data;\r\n if (msg === 'failed') {\r\n // will stay on the panel and show the error message\r\n setIsApplying(false);\r\n return;\r\n }\r\n if (originalVideo !== newVideoUrl) {\r\n // should apply and close the panel\r\n const savedImages = newScenes.map((scene) => {\r\n // image already saved to asset library\r\n if (scene.newImage && scene.newImage.id) {\r\n return scene.newImage;\r\n }\r\n return null;\r\n });\r\n if (saveVideoWhenApply) {\r\n uploadVideoMetadata({\r\n videoMetadata: omit(data, 'msg'), savedImages: compact(savedImages), savedLogo: newLogoDataObject, newVideoFromMTObject,\r\n })\r\n .then((appliedVideoWithId) => {\r\n onApply(appliedVideoWithId);\r\n setIsOpen(false);\r\n setIsApplying(false);\r\n logger.logTrace('Copilot video editor: video applied');\r\n })\r\n .catch(() => {\r\n setIsApplying(false);\r\n setGenerateError(i18n.getString(_TL_('We\\'re unable to save the video. Please try again later.')));\r\n });\r\n } else {\r\n const newVideo = {\r\n ...omit(data, 'msg'),\r\n savedMaterial: {\r\n savedImages: compact(savedImages),\r\n savedLogo: newLogoDataObject,\r\n },\r\n };\r\n onApply(newVideo);\r\n setIsOpen(false);\r\n setIsApplying(false);\r\n logger.logTrace('Copilot video editor: video applied');\r\n }\r\n } else {\r\n setIsOpen(false);\r\n setIsApplying(false);\r\n }\r\n }).catch(() => {\r\n setIsApplying(false);\r\n });\r\n }, [delayedVideoGeneration, i18n, logger, newLogoDataObject, onApply, originalVideo, saveVideoWhenApply, setIsOpen, uploadVideoMetadata]);\r\n\r\n const switchPanel = useCallback((panel) => {\r\n setCurrentPanel(panel);\r\n if (panelNames.video === panel && videoGenerated !== 0 && videoGenerated !== 10 && videoScenesCache.length > 0) {\r\n generateNewVideo(videoScenesCache, true);\r\n }\r\n }, [generateNewVideo, setCurrentPanel, videoGenerated, videoScenesCache]);\r\n\r\n const textErrorMessages = useMemo(() => {\r\n const errorMessages = {};\r\n scenes.forEach((scene) => {\r\n errorMessages[scene.id] = [];\r\n const updatingText = scene.updating.text;\r\n const maxLengthOfText = getTextSizeLimitation(scene.updating.keyFrame.templateId);\r\n updatingText.forEach((text, index) => {\r\n if (text.length > maxLengthOfText[index]) {\r\n errorMessages[scene.id].push(i18n.getString(_TL_('Value cannot be longer than {{maxLength}} characters'), { maxLength: maxLengthOfText[index] }));\r\n } else if (text.length === 0) {\r\n errorMessages[scene.id].push(i18n.getString(_TL_('Required field')));\r\n } else {\r\n errorMessages[scene.id].push('');\r\n }\r\n });\r\n });\r\n\r\n return errorMessages;\r\n }, [i18n, scenes]);\r\n\r\n const haveTextError = useMemo(() => {\r\n const haveErrorInScenes = [];\r\n if (textErrorMessages) {\r\n keys(textErrorMessages).forEach((key) => {\r\n haveErrorInScenes.push(some(textErrorMessages[key]));\r\n });\r\n }\r\n return some(haveErrorInScenes);\r\n }, [textErrorMessages]);\r\n\r\n const textErrorForSelectedScene = useMemo(() => textErrorMessages[selectedSceneId], [selectedSceneId, textErrorMessages]);\r\n\r\n const businessNameErrorMessage = useMemo(() => {\r\n const businessName = videoSettings && videoSettings.updating && videoSettings.updating.businessName;\r\n if (businessName && businessName.text && businessName.text.length > MaxBusinessNameLength) {\r\n return i18n.getString(_TL_('Value cannot be longer than {{maxLength}} characters'), { maxLength: MaxBusinessNameLength });\r\n }\r\n return '';\r\n }, [i18n, videoSettings]);\r\n\r\n useEffect(() => {\r\n if (newImageDataObject && newImageDataObject.url) {\r\n setNewImageObject(newImageDataObject);\r\n }\r\n }, [newImageDataObject]);\r\n\r\n useEffect(() => {\r\n setNewImageObject(undefined);\r\n }, [selectedSceneId]);\r\n\r\n useEffect(() => {\r\n if (newImageObject && newImageObject.url) {\r\n setScenes(prevScenes => prevScenes.map((scene) => {\r\n if (scene.id === selectedSceneId) {\r\n return {\r\n ...scene,\r\n updating: {\r\n ...scene.updating,\r\n images: [newImageDataObject.url],\r\n },\r\n newImage: newImageDataObject,\r\n };\r\n }\r\n return scene;\r\n }));\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [newImageObject, newImageDataObject]);\r\n\r\n useEffect(() => {\r\n const allImages = [];\r\n if (scenes.length > 0) {\r\n scenes.forEach((scene) => {\r\n allImages.push(...scene.updating.images);\r\n });\r\n }\r\n if (videoSettings && videoSettings.updating && videoSettings.updating.logo && videoSettings.updating.logo.display) {\r\n allImages.push(videoSettings.updating.logo.url);\r\n }\r\n const loadImagePromises = allImages.map(img => loadImagePromise(img, mock));\r\n\r\n Promise.all(loadImagePromises).then((results) => {\r\n if (results.includes('failed')) {\r\n setHaveEmptyImage(true);\r\n } else {\r\n setHaveEmptyImage(false);\r\n }\r\n });\r\n }, [scenes, videoSettings]);\r\n\r\n const disableGenerate = useMemo(() =>\r\n sceneGenerated === 0\r\n || videoGenerated === 0 || videoGenerated === 10\r\n || !(isVideoChanged(scenes, videoSettings))\r\n || haveTextError\r\n || businessNameErrorMessage !== ''\r\n || haveEmptyImage, [businessNameErrorMessage, haveEmptyImage, haveTextError, sceneGenerated, scenes, videoGenerated, videoSettings]);\r\n\r\n // If user modified the scenes and did not click the generate button, we could not apply the button.\r\n const disableApply = useMemo(() => sceneGenerated === 0 || videoGenerated === 0 || videoGenerated === 10\r\n || isVideoChanged(scenes, videoSettings), [sceneGenerated, scenes, videoGenerated, videoSettings]);\r\n\r\n const minSizeOfImage = useMemo(() => {\r\n if (selectedScene && selectedScene.updating && selectedScene.updating.keyFrame) {\r\n return getImageSizeLimitation(selectedScene.updating.keyFrame.templateId);\r\n }\r\n return [];\r\n }, [selectedScene]);\r\n\r\n return {\r\n video,\r\n setVideo,\r\n selectedSceneId,\r\n setSelectedSceneId,\r\n scenes,\r\n onSceneSelected,\r\n setScenes,\r\n selectedScene,\r\n onScenesUpdated,\r\n sceneGenerated,\r\n videoGenerated,\r\n disableApply,\r\n disableGenerate,\r\n isApplying,\r\n handleGenerate,\r\n handleApply,\r\n currentPanel,\r\n isScenePanel,\r\n switchPanel,\r\n generateError,\r\n setGenerateError,\r\n setNewImageObject,\r\n textErrorForSelectedScene,\r\n minSizeOfImage,\r\n onVideoSettingsSelected,\r\n videoSettings,\r\n setVideoSettings,\r\n businessNameErrorMessage,\r\n };\r\n};\r\n","import React, { useContext, useCallback } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport {\r\n DefaultButton, PrimaryButton, Panel, PanelType,\r\n Overlay, Text, Icon,\r\n} from '@bingads-webui-react/fabric-control';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { AssetLibrarySpinner } from '@bingads-webui-campaign-react/asset-library-spinner';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { findParentElementWithClass } from '@bingads-webui-campaign-react/asset-library-model';\r\nimport { MetaDataEditor } from './meta-data-editor';\r\nimport { VideoSettingsEditor } from './video-settings-editor';\r\nimport { getVideoEditorStyles } from './styles';\r\nimport { ScenePickerView } from './scene-picker/view';\r\nimport { PreviewView } from './preview/view';\r\nimport { useEditVideoAdsViewState } from './state';\r\n\r\n\r\nexport const EditVideoAdsView = ({\r\n onApply,\r\n isOpen,\r\n setIsOpen,\r\n videoMetaData,\r\n cid,\r\n aid,\r\n oDataConfig,\r\n finalUrl,\r\n assetLibraryConfig,\r\n dataService,\r\n copilotDataService,\r\n onChangeImage,\r\n newImageDataObject,\r\n onChangeLogo,\r\n newLogoDataObject,\r\n logger,\r\n saveVideoWhenApply,\r\n isCTV,\r\n}) => {\r\n const classes = useDefaultStyles(getVideoEditorStyles);\r\n const i18n = useContext(I18nContext);\r\n const {\r\n disableApply,\r\n disableGenerate,\r\n handleGenerate,\r\n selectedSceneId,\r\n onSceneSelected,\r\n scenes,\r\n selectedScene,\r\n onScenesUpdated,\r\n video,\r\n currentPanel,\r\n switchPanel,\r\n isScenePanel,\r\n sceneGenerated,\r\n videoGenerated,\r\n isApplying,\r\n handleApply,\r\n generateError,\r\n setGenerateError,\r\n textErrorForSelectedScene,\r\n minSizeOfImage,\r\n onVideoSettingsSelected,\r\n videoSettings,\r\n setVideoSettings,\r\n businessNameErrorMessage,\r\n } = useEditVideoAdsViewState({\r\n videoMetaData,\r\n dataService,\r\n copilotDataService,\r\n onApply,\r\n setIsOpen,\r\n logger,\r\n i18n,\r\n newImageDataObject,\r\n newLogoDataObject,\r\n saveVideoWhenApply,\r\n isCTV,\r\n });\r\n\r\n const handleTextListChange = useCallback((textList) => {\r\n const updatedScenes = scenes.map((scene) => {\r\n if (scene.id === selectedSceneId) {\r\n return {\r\n ...scene,\r\n updating: {\r\n ...scene.updating,\r\n text: textList,\r\n },\r\n };\r\n }\r\n return scene;\r\n });\r\n onScenesUpdated(updatedScenes);\r\n }, [scenes, selectedSceneId, onScenesUpdated]);\r\n\r\n const onDismiss = useCallback((evt) => {\r\n const target = evt && evt.currentTarget;\r\n const panelElem = findParentElementWithClass(target, classes.videoEditor);\r\n if (panelElem || evt.key === 'Escape') {\r\n setIsOpen(false);\r\n logger.logTrace('Copilot video editor: Panel dismissed');\r\n }\r\n }, [classes.videoEditor, logger, setIsOpen]);\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {\r\n scenes.length > 0 && scenes.map((scene) => {\r\n const isSelected = scene.id === selectedSceneId;\r\n return (\r\n \r\n
\r\n {\r\n scenes &&\r\n \r\n {i18n.getString(_TL_('Video settings'))} \r\n
\r\n {}} tabIndex={0} role=\"button\">\r\n
\r\n \r\n {\r\n scene && scene.updating &&\r\n onChangeImage(minSizeOfImage[0])}\r\n onTextListChange={handleTextListChange}\r\n handleGenerate={handleGenerate}\r\n disableGenerate={disableGenerate}\r\n textErrorMessages={textErrorForSelectedScene}\r\n />\r\n }\r\n
\r\n );\r\n })\r\n }\r\n \r\n {\r\n selectedSceneId === -1 &&\r\n {}}\r\n onChangeLogo={onChangeLogo}\r\n newLogoDataObject={newLogoDataObject}\r\n disableGenerate={disableGenerate}\r\n handleGenerate={handleGenerate}\r\n businessNameErrorMessage={businessNameErrorMessage}\r\n />\r\n }\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nEditVideoAdsView.propTypes = {\r\n onApply: PropTypes.func.isRequired,\r\n isOpen: PropTypes.bool.isRequired,\r\n setIsOpen: PropTypes.func.isRequired,\r\n videoMetaData: PropTypes.shape({\r\n images: PropTypes.arrayOf(PropTypes.string),\r\n text: PropTypes.arrayOf(PropTypes.string),\r\n }).isRequired,\r\n cid: PropTypes.string.isRequired,\r\n aid: PropTypes.string.isRequired,\r\n oDataConfig: PropTypes.shape({}).isRequired,\r\n finalUrl: PropTypes.string.isRequired,\r\n assetLibraryConfig: PropTypes.shape({}).isRequired,\r\n dataService: PropTypes.shape({}).isRequired,\r\n copilotDataService: PropTypes.shape({}).isRequired,\r\n onChangeImage: PropTypes.func.isRequired,\r\n newImageDataObject: PropTypes.shape({\r\n url: PropTypes.string,\r\n }),\r\n logger: PropTypes.shape({\r\n logTrace: PropTypes.func,\r\n }).isRequired,\r\n onChangeLogo: PropTypes.func.isRequired,\r\n newLogoDataObject: PropTypes.shape({\r\n url: PropTypes.string,\r\n }),\r\n saveVideoWhenApply: PropTypes.bool,\r\n isCTV: PropTypes.bool,\r\n};\r\n\r\nEditVideoAdsView.defaultProps = {\r\n newImageDataObject: {},\r\n newLogoDataObject: {},\r\n saveVideoWhenApply: false,\r\n isCTV: false,\r\n};\r\n","/* eslint-disable no-param-reassign */\r\nimport React, { useMemo, useContext, useCallback, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { omit, find } from 'underscore';\r\n\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { AddImageWrapper } from '@bingads-webui-campaign-react/asset-library-creative-components';\r\nimport { getAssetSourceOptions, CSMLAssetSource } from '@bingads-webui-campaign-react/asset-library-model';\r\nimport { AddImageContainer as AddLogoContainer } from '@bingads-webui-campaign-react/image-experience';\r\nimport { constants } from '@bingads-webui-campaign-react/image-experience-model';\r\nimport { MediaRepository } from '@bingads-webui-campaign/media-repository';\r\nimport { getImageValidationErrorMessage } from '@bingads-webui-campaign/image-experience-utils';\r\n\r\nimport { getAddImageConfig, VIEWS } from '@bingads-webui-campaign-react/add-media-panel-crud-ad';\r\nimport { useWebsiteSuggestion } from '@bingads-webui-campaign-react/add-image-hooks';\r\nimport { InstrumentationContext } from '@bingads-webui-react/hoc-with-instrumentation';\r\nimport { instrumentationScenarios } from '@bingads-webui-campaign/ad-creator-tools-instrumentation';\r\n\r\nimport { EditVideoAdsView } from './view';\r\nimport { getGlobalLogoPickerStyles } from './styles';\r\n\r\nexport const VideoEditorWithAddImageWrapperImp = ({\r\n assetLibraryConfig,\r\n dataService,\r\n copilotDataService,\r\n i18n,\r\n initialView,\r\n isAssetLibraryAIGCMVPEnabled,\r\n isLiteLandingPageEnabled,\r\n logger,\r\n assetLibraryUserPreferences,\r\n assetLibraryAccountPreferences,\r\n ianaTimeZone,\r\n onApply,\r\n isOpen,\r\n setIsOpen,\r\n videoMetaData,\r\n cid,\r\n aid,\r\n oDataConfig,\r\n finalUrl,\r\n permissions,\r\n isCTV,\r\n ...rest\r\n}) => {\r\n const [showAddImagePanel, setShowAddImagePanel] = useState(false);\r\n const [newImageDataObject, setNewImageDataObject] = useState({});\r\n const [minSizeOfImage, setMinSizeOfImage] = useState([0, 0]);\r\n const [aspectRatioOption, setAspectRatioOption] = useState(constants.defaultAspectRatioOption);\r\n const [showAddLogoPanel, setShowAddLogoPanel] = useState(false);\r\n const [newLogoDataObject, setNewLogoDataObject] = useState({});\r\n\r\n assetLibraryConfig.assetLibraryUserPreferences = assetLibraryUserPreferences;\r\n assetLibraryConfig.assetLibraryAccountPreferences = assetLibraryAccountPreferences;\r\n assetLibraryConfig.logger = logger;\r\n assetLibraryConfig.ianaTimeZone = ianaTimeZone;\r\n assetLibraryConfig.onImageAddError = (e) => {\r\n const errorCode = e && e.errors && e.errors[0] && e.errors[0].Code;\r\n const errorMessage = getImageValidationErrorMessage({ message: errorCode }, i18n);\r\n return errorMessage;\r\n };\r\n\r\n const addMediaConfig = useMemo(() => {\r\n let config = getAddImageConfig({ isAssetLibraryAIGCMVPEnabled, isLiteLandingPageEnabled, hideStockImage: true });\r\n if (!permissions.IsSocialMediaImagesEnabled) {\r\n config = omit(config, VIEWS.SocialMedia);\r\n }\r\n return config;\r\n }, [isAssetLibraryAIGCMVPEnabled, isLiteLandingPageEnabled, permissions.IsSocialMediaImagesEnabled]);\r\n\r\n const mediaRepository = useMemo(() => new MediaRepository({\r\n cid, aid, oDataConfig,\r\n }), [aid, cid, oDataConfig]);\r\n\r\n const onSelectLogo = useCallback((images) => {\r\n const selectedImage = find(images, image => image.isIncluded);\r\n setNewLogoDataObject({ url: selectedImage.src, id: selectedImage.id });\r\n setShowAddLogoPanel(false);\r\n }, []);\r\n\r\n const instrumentation = useContext(InstrumentationContext);\r\n\r\n const createScenario = instrumentation.copilotVideoEditorScenario.create();\r\n const activity = createScenario.imageSuggestion.create();\r\n\r\n const adCreatorScenario = instrumentationScenarios.CopilotVideoAd;\r\n\r\n const {\r\n suggestionState,\r\n suggestionPoller,\r\n } = useWebsiteSuggestion({\r\n oDataConfig,\r\n adContext: { // Use the ad context to compose the API request url\r\n advertiserCustomerId: cid,\r\n accountId: aid,\r\n },\r\n instrumentation,\r\n logActivity: activity.trace,\r\n permissions,\r\n fullUrl: finalUrl,\r\n adCreatorScenario,\r\n });\r\n\r\n const { suggestion = {} } = suggestionState;\r\n\r\n const preDefinedAssetSources = useMemo(() => {\r\n const assetOptions = getAssetSourceOptions(i18n);\r\n const assetOptionsWithoutShutterstock = assetOptions.filter(option => option.key !== CSMLAssetSource.Shutterstock);\r\n const assetOptionsKeys = assetOptionsWithoutShutterstock.map(option => option.key);\r\n return assetOptionsKeys;\r\n }, [i18n]);\r\n\r\n const preDefinedFilter = useMemo(() => `AssetSourceType in (${preDefinedAssetSources.map(s => `'${s}'`).join(',')})`, [preDefinedAssetSources]);\r\n\r\n return (\r\n \r\n {\r\n setIsOpen(false);\r\n logger.logTrace('Copilot video editor: Cancel button clicked');\r\n }}\r\n />\r\n
\r\n \r\n {\r\n setShowAddImagePanel(true);\r\n setMinSizeOfImage(minSize);\r\n }}\r\n newImageDataObject={newImageDataObject}\r\n assetLibraryConfig={assetLibraryConfig}\r\n onChangeLogo={() => setShowAddLogoPanel(true)}\r\n newLogoDataObject={newLogoDataObject}\r\n isCTV={isCTV}\r\n />\r\n {},\r\n onUpdateFinalUrlPrefix: () => {},\r\n isMultimediaAd: false,\r\n isDisplayAds: true,\r\n }}\r\n cid={cid}\r\n aid={aid}\r\n minSize={minSizeOfImage}\r\n disabledAssetSources={[CSMLAssetSource.Shutterstock]}\r\n {...rest}\r\n />\r\n setShowAddLogoPanel(false)}\r\n imageType={null}\r\n i18n={i18n}\r\n perfMarker={rest.perfMarker}\r\n isForVNext\r\n isMultimediaAd\r\n isAudienceAd={false}\r\n cid={cid}\r\n aid={aid}\r\n isStockPhotoEnabled\r\n oDataConfig={oDataConfig}\r\n isLazyLoadEnabled\r\n permissions={permissions}\r\n isMultimediaAdinMSANEnabled={false}\r\n staticImagePath=\"\"\r\n imageList={[]}\r\n maxUploadNum={1}\r\n imageOption={constants.imageOptionKeys.Logo}\r\n imageOptions={[constants.imageOptionKeys.Logo]}\r\n setImageOption={() => {}}\r\n aspectRatioOption={aspectRatioOption}\r\n setAspectRatioOption={setAspectRatioOption}\r\n suggestion={suggestion}\r\n suggestionPoller={suggestionPoller}\r\n isAdCreatorEnabled\r\n isFinalUrlImageRetrievalEnabled\r\n isLogoEnabled\r\n mediaRepository={mediaRepository}\r\n onUpdateFinalUrlPrefix={() => {}}\r\n onUpdateFinalUrl={() => {}}\r\n finalUrl={finalUrl}\r\n finalUrlProtocol=\"https://\"\r\n defaultSelectedPill={0}\r\n adCreatorScenario={adCreatorScenario}\r\n isThumbsUpDownEnabled={false}\r\n isTestEnv={false}\r\n activityLogger={activity}\r\n recommendationStockImages={[]}\r\n hideStockPillControl\r\n preDefinedFilter={preDefinedFilter}\r\n />\r\n
\r\n );\r\n};\r\n\r\nVideoEditorWithAddImageWrapperImp.propTypes = {\r\n assetLibraryConfig: PropTypes.shape({\r\n activityLogger: PropTypes.shape({}),\r\n }).isRequired,\r\n dataService: PropTypes.shape({}).isRequired,\r\n copilotDataService: PropTypes.shape({}).isRequired,\r\n i18n: PropTypes.shape({}).isRequired,\r\n initialView: PropTypes.string.isRequired,\r\n isAssetLibraryAIGCMVPEnabled: PropTypes.bool.isRequired,\r\n isLiteLandingPageEnabled: PropTypes.bool.isRequired,\r\n logger: PropTypes.shape({}).isRequired,\r\n assetLibraryUserPreferences: PropTypes.shape({}).isRequired,\r\n assetLibraryAccountPreferences: PropTypes.shape({}).isRequired,\r\n ianaTimeZone: PropTypes.string.isRequired,\r\n onApply: PropTypes.func.isRequired,\r\n isOpen: PropTypes.bool.isRequired,\r\n setIsOpen: PropTypes.func.isRequired,\r\n videoMetaData: PropTypes.shape({\r\n images: PropTypes.arrayOf(PropTypes.string),\r\n text: PropTypes.arrayOf(PropTypes.string),\r\n }).isRequired,\r\n cid: PropTypes.string.isRequired,\r\n aid: PropTypes.string.isRequired,\r\n oDataConfig: PropTypes.shape({}).isRequired,\r\n finalUrl: PropTypes.string.isRequired,\r\n permissions: PropTypes.shape({}).isRequired,\r\n isCTV: PropTypes.bool,\r\n};\r\n\r\nVideoEditorWithAddImageWrapperImp.defaultProps = {\r\n isCTV: false,\r\n};\r\n\r\nexport const VideoEditorWithAddImageWrapper = withDefaultStyles(VideoEditorWithAddImageWrapperImp, getGlobalLogoPickerStyles);\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport {\r\n withAssetLibraryServicesLoaded,\r\n withCopilotDataServiceLoaded,\r\n} from '@bingads-webui-campaign-react/asset-library-services';\r\nimport { FolderAssetType } from '@bingads-webui-campaign-react/asset-library-model';\r\n\r\nimport { VideoEditorWithAddImageWrapper } from './video-editor-with-add-image-wrapper';\r\n\r\nconst VideoEditorWithDataServices = withCopilotDataServiceLoaded(withAssetLibraryServicesLoaded(VideoEditorWithAddImageWrapper, { loggerTag: 'Asset Library Tab' }));\r\n\r\nexport const CopilotVideoEditor = (props) => {\r\n const {\r\n assetLibraryConfig,\r\n permissions,\r\n isAADUser,\r\n isLiteLandingPageEnabled,\r\n isOpen,\r\n setIsOpen,\r\n videoMetaData,\r\n onApply,\r\n cid,\r\n aid,\r\n finalUrl,\r\n perfMarker,\r\n i18n,\r\n isCTV,\r\n } = props;\r\n\r\n // todo: don't pilot AAD user for now, remove this check after the feature is GAed\r\n const isAssetLibraryAIGCMVPEnabled = !isAADUser;\r\n\r\n const {\r\n timeZone,\r\n preferencesService,\r\n activityLogger,\r\n oDataConfig,\r\n dateFormat,\r\n } = assetLibraryConfig;\r\n\r\n return (\r\n isOpen ?\r\n \r\n \r\n \r\n \r\n {\r\n this.state.errors.map(errMsg => (\r\n \r\n {errMsg}\r\n
\r\n ))\r\n }\r\n \r\n
\r\n );\r\n};\r\n","/* istanbul ignore file */\r\nimport React, { useCallback, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {\r\n Body1,\r\n Caption1Strong,\r\n Input,\r\n makeStyles,\r\n mergeClasses,\r\n shorthands,\r\n tokens,\r\n typographyStyles,\r\n} from '@fluentui/react-components';\r\nimport { ColorPalette } from '@bingads-webui-campaign-react/ads-color-picker';\r\n\r\nconst useColorPickerStyles = makeStyles({\r\n root: {\r\n marginTop: tokens.spacingVerticalS,\r\n },\r\n container: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n columnGap: tokens.spacingHorizontalSNudge,\r\n },\r\n label: {\r\n display: 'inline-block',\r\n marginBottom: tokens.spacingVerticalM,\r\n },\r\n colorPreview: {\r\n width: '36px',\r\n height: '36px',\r\n ...shorthands.padding(\r\n tokens.spacingVerticalXXS,\r\n tokens.spacingHorizontalXXS\r\n ),\r\n ...shorthands.borderStyle('solid'),\r\n ...shorthands.borderWidth(tokens.strokeWidthThin),\r\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\r\n ...shorthands.borderRadius(tokens.borderRadiusLarge),\r\n },\r\n colorInput: {\r\n ...shorthands.flex(1),\r\n ...typographyStyles.body1,\r\n },\r\n});\r\n\r\nexport const ColorPicker = ({\r\n i18n,\r\n label,\r\n color,\r\n className,\r\n onChangeColor,\r\n}) => {\r\n const classes = useColorPickerStyles();\r\n const labelId = label || 'color-picker-name';\r\n const [colorState, setColorState] = React.useState(color);\r\n\r\n useEffect(() => {\r\n setColorState(color);\r\n }, [color]);\r\n\r\n const onUpdateColor = useCallback((_name, value) => {\r\n const colorValue = value ? value.hex : `#${_name}`;\r\n onChangeColor(colorValue);\r\n }, [onChangeColor]);\r\n\r\n const onChange = useCallback((_e, data) => {\r\n setColorState(`#${data.value}`);\r\n // update color if it's valid hex code\r\n if (/^[0-9A-Fa-f]{6}$/.test(data.value)) {\r\n onChangeColor(`#${data.value}`);\r\n }\r\n }, [onChangeColor]);\r\n\r\n return (\r\n \r\n #}\r\n onChange={onChange}\r\n className={mergeClasses('color-input', classes.colorInput)}\r\n />\r\n
\r\n \r\n \r\n {selectedOptions.map(option => (\r\n \r\n {i18n.getString(option)}\r\n \r\n ))}\r\n \r\n {isCustomTextOptionSelected && (\r\n
\r\n );\r\n};\r\n\r\nCallToAction.propTypes = {\r\n i18n: PropTypes.shape({ getString: PropTypes.func }).isRequired,\r\n label: PropTypes.string,\r\n cta: PropTypes.string,\r\n ctaValidations: PropTypes.shape({\r\n minLength: PropTypes.number,\r\n maxLength: PropTypes.number,\r\n }),\r\n inlinePopup: PropTypes.bool,\r\n labelAction: PropTypes.node,\r\n placeholder: PropTypes.string,\r\n onChangeCta: PropTypes.func,\r\n withCustomText: PropTypes.bool,\r\n helpTopic: PropTypes.string,\r\n helpLabel: PropTypes.string,\r\n};\r\n\r\nCallToAction.defaultProps = {\r\n label: null,\r\n cta: null,\r\n ctaValidations: {\r\n minLength: 0,\r\n maxLength: 20,\r\n },\r\n inlinePopup: false,\r\n placeholder: null,\r\n labelAction: null,\r\n withCustomText: true,\r\n onChangeCta: () => {},\r\n helpTopic: null,\r\n helpLabel: null,\r\n};\r\n","import React from 'react';\r\nimport PropTypes, { func } from 'prop-types';\r\nimport { Button } from '@fluentui/react-components';\r\nimport { TextEditStyle16Regular } from '@fluentui/react-icons';\r\n\r\nexport const TextFormattingButton = ({ i18n, onClick }) => (\r\n \r\n {label &&\r\n }\r\n {labelAction}\r\n
\r\n \r\n (\r\n )}\r\n onBlur={() => customInputText && onChangeCta(customInputText)}\r\n i18n={i18n}\r\n />\r\n
\r\n )}\r\n \r\n \r\n
\r\n \r\n
\r\n {!hideColorFormatting && (\r\n <>\r\n \r\n \r\n {placeholder\r\n ? i18n.getString(placeholder)\r\n : i18n.getString(_TL_('Multiple options, editing will override for all texts'))}\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nTextAssetPlaceholder.propTypes = {\r\n i18n: PropTypes.shape({ getString: func, getLocale: func }).isRequired,\r\n placeholder: PropTypes.string,\r\n onEdit: PropTypes.func,\r\n};\r\n\r\nTextAssetPlaceholder.defaultProps = {\r\n placeholder: '',\r\n onEdit: () => {},\r\n};\r\n","import React, { useRef, useEffect } from 'react';\r\nimport { noop } from 'underscore';\r\nimport PropTypes, { func } from 'prop-types';\r\nimport { mergeClasses } from '@fluentui/react-components';\r\nimport { TextAssetCollectionWithRecommendations } from '@bingads-webui-campaign-react/pmax-text-input';\r\n\r\nimport { getLongHeadlineAssetCollectionConfig } from '../../configs';\r\nimport { TextFormattingButton } from '../../../text-formatting-button';\r\nimport { TextAssetPlaceholder } from '../text-assets-placeholder';\r\n\r\nexport const LongHeadlineAssetCollection = React.memo((props) => {\r\n const {\r\n i18n,\r\n className,\r\n isOptional,\r\n placeholder,\r\n isMultipleOptions,\r\n onFocusTextAsset,\r\n onDeleteTextAsset,\r\n onResetTextAssets,\r\n onApplyRecommendation,\r\n onToggleTextFormatting,\r\n setAddNewLongHeadlinesCallback,\r\n enableCopilotRecommendations,\r\n } = props;\r\n const addNewLongHeadlinesCallback = useRef(noop);\r\n const longHeadlineAssetCollectionConfig = getLongHeadlineAssetCollectionConfig(i18n);\r\n\r\n useEffect(() => {\r\n if (setAddNewLongHeadlinesCallback) {\r\n setAddNewLongHeadlinesCallback(() => (recommendations, replaceExistingAssets) => {\r\n addNewLongHeadlinesCallback.current(\r\n recommendations,\r\n replaceExistingAssets\r\n );\r\n });\r\n }\r\n }, [setAddNewLongHeadlinesCallback]);\r\n\r\n return (\r\n \r\n {\r\n addNewLongHeadlinesCallback.current = callback;\r\n }}\r\n labelAction={\r\n onResetTextAssets('longHeadline')}\r\n />\r\n ) : null\r\n }\r\n />\r\n
\r\n );\r\n});\r\n\r\nLongHeadlineAssetCollection.propTypes = {\r\n isOptional: PropTypes.bool,\r\n className: PropTypes.string,\r\n placeholder: PropTypes.string,\r\n isMultipleOptions: PropTypes.bool,\r\n onResetTextAssets: PropTypes.func,\r\n i18n: PropTypes.shape({ getString: func, getLocale: func }).isRequired,\r\n enableCopilotRecommendations: PropTypes.bool,\r\n onFocusTextAsset: PropTypes.func,\r\n onDeleteTextAsset: PropTypes.func,\r\n onApplyRecommendation: PropTypes.func,\r\n onToggleTextFormatting: PropTypes.func,\r\n setAddNewLongHeadlinesCallback: PropTypes.func,\r\n};\r\n\r\nLongHeadlineAssetCollection.defaultProps = {\r\n className: '',\r\n placeholder: '',\r\n isOptional: false,\r\n isMultipleOptions: false,\r\n setAddNewLongHeadlinesCallback: null,\r\n enableCopilotRecommendations: true,\r\n onFocusTextAsset: noop,\r\n onDeleteTextAsset: noop,\r\n onApplyRecommendation: noop,\r\n onToggleTextFormatting: noop,\r\n onResetTextAssets: noop,\r\n};\r\n","import React, { useRef, useEffect } from 'react';\r\nimport { noop } from 'underscore';\r\nimport PropTypes, { func } from 'prop-types';\r\nimport { mergeClasses } from '@fluentui/react-components';\r\nimport { TextAssetCollectionWithRecommendations } from '@bingads-webui-campaign-react/pmax-text-input';\r\n\r\nimport { getShortHeadlineAssetCollectionConfig } from '../../configs';\r\nimport { TextFormattingButton } from '../../../text-formatting-button';\r\nimport { TextAssetPlaceholder } from '../text-assets-placeholder';\r\n\r\nexport const ShortHeadlineAssetCollection = React.memo((props) => {\r\n const {\r\n i18n,\r\n className,\r\n isOptional,\r\n placeholder,\r\n isMultipleOptions,\r\n onFocusTextAsset,\r\n onDeleteTextAsset,\r\n onResetTextAssets,\r\n onApplyRecommendation,\r\n onToggleTextFormatting,\r\n enableCopilotRecommendations,\r\n setAddNewShortHeadlinesCallback,\r\n } = props;\r\n const addNewShortHeadlineCallback = useRef(noop);\r\n const shortHeadlineAssetCollectionConfig = getShortHeadlineAssetCollectionConfig(i18n);\r\n\r\n useEffect(() => {\r\n if (setAddNewShortHeadlinesCallback) {\r\n setAddNewShortHeadlinesCallback(() => (recommendations, replaceExistingAssets) => {\r\n addNewShortHeadlineCallback.current(\r\n recommendations,\r\n replaceExistingAssets\r\n );\r\n });\r\n }\r\n }, [setAddNewShortHeadlinesCallback]);\r\n\r\n return (\r\n \r\n {\r\n addNewShortHeadlineCallback.current = callback;\r\n }}\r\n labelAction={\r\n onResetTextAssets('shortHeadline')}\r\n />\r\n ) : null\r\n }\r\n />\r\n
\r\n );\r\n});\r\n\r\nShortHeadlineAssetCollection.propTypes = {\r\n isOptional: PropTypes.bool,\r\n className: PropTypes.string,\r\n placeholder: PropTypes.string,\r\n enableCustomizer: PropTypes.bool,\r\n isMultipleOptions: PropTypes.bool,\r\n onResetTextAssets: PropTypes.func,\r\n i18n: PropTypes.shape({ getString: func, getLocale: func }).isRequired,\r\n enableCopilotRecommendations: PropTypes.bool,\r\n onFocusTextAsset: PropTypes.func,\r\n onDeleteTextAsset: PropTypes.func,\r\n onApplyRecommendation: PropTypes.func,\r\n onToggleTextFormatting: PropTypes.func,\r\n setAddNewShortHeadlinesCallback: PropTypes.func,\r\n};\r\n\r\nShortHeadlineAssetCollection.defaultProps = {\r\n className: '',\r\n placeholder: '',\r\n isOptional: false,\r\n enableCustomizer: false,\r\n isMultipleOptions: false,\r\n enableCopilotRecommendations: true,\r\n setAddNewShortHeadlinesCallback: null,\r\n onFocusTextAsset: noop,\r\n onDeleteTextAsset: noop,\r\n onApplyRecommendation: noop,\r\n onToggleTextFormatting: noop,\r\n onResetTextAssets: noop,\r\n};\r\n","import React, { useRef, useEffect } from 'react';\r\nimport { noop } from 'underscore';\r\nimport PropTypes, { func } from 'prop-types';\r\nimport { mergeClasses } from '@fluentui/react-components';\r\nimport { TextAssetCollectionWithRecommendations } from '@bingads-webui-campaign-react/pmax-text-input';\r\n\r\nimport { getDescriptionAssetCollectionConfig } from '../../configs';\r\nimport { TextFormattingButton } from '../../../text-formatting-button';\r\nimport { TextAssetPlaceholder } from '../text-assets-placeholder';\r\n\r\nexport const DescriptionAssetCollection = React.memo((props) => {\r\n const {\r\n i18n,\r\n className,\r\n isOptional,\r\n placeholder,\r\n isMultipleOptions,\r\n onFocusTextAsset,\r\n onDeleteTextAsset,\r\n onResetTextAssets,\r\n onApplyRecommendation,\r\n onToggleTextFormatting,\r\n enableCopilotRecommendations,\r\n setAddNewDescriptionCallback,\r\n } = props;\r\n const addNewHeadlinesCallback = useRef(noop);\r\n const descriptionAssetCollectionConfig = getDescriptionAssetCollectionConfig(i18n);\r\n\r\n useEffect(() => {\r\n if (setAddNewDescriptionCallback) {\r\n setAddNewDescriptionCallback(() => (recommendations) => {\r\n addNewHeadlinesCallback.current(recommendations);\r\n });\r\n }\r\n }, [setAddNewDescriptionCallback]);\r\n\r\n return (\r\n \r\n {\r\n addNewHeadlinesCallback.current = callback;\r\n }}\r\n labelAction={\r\n onResetTextAssets('description')}\r\n />\r\n ) : null\r\n }\r\n />\r\n
\r\n );\r\n});\r\n\r\nDescriptionAssetCollection.propTypes = {\r\n isOptional: PropTypes.bool,\r\n className: PropTypes.string,\r\n placeholder: PropTypes.string,\r\n isMultipleOptions: PropTypes.bool,\r\n onResetTextAssets: PropTypes.func,\r\n i18n: PropTypes.shape({ getString: func, getLocale: func }).isRequired,\r\n enableCopilotRecommendations: PropTypes.bool,\r\n onFocusTextAsset: PropTypes.func,\r\n onDeleteTextAsset: PropTypes.func,\r\n onApplyRecommendation: PropTypes.func,\r\n onToggleTextFormatting: PropTypes.func,\r\n setAddNewDescriptionCallback: PropTypes.func,\r\n disableCopilot: PropTypes.bool.isRequired,\r\n};\r\n\r\nDescriptionAssetCollection.defaultProps = {\r\n className: '',\r\n placeholder: '',\r\n isOptional: false,\r\n isMultipleOptions: false,\r\n setAddNewDescriptionCallback: null,\r\n enableCopilotRecommendations: true,\r\n onFocusTextAsset: noop,\r\n onDeleteTextAsset: noop,\r\n onApplyRecommendation: noop,\r\n onToggleTextFormatting: noop,\r\n onResetTextAssets: noop,\r\n};\r\n","export const assetName = {\r\n longHeadline: 'LongHeadline',\r\n description: 'Description',\r\n shortHeadline: 'ShortHeadline',\r\n callToAction: 'CTA',\r\n background: 'Background',\r\n} as const;\r\n\r\nexport const defaultTextFormattingOptions = {\r\n font: '',\r\n weight: '',\r\n color: '',\r\n} as const;\r\n","import React, { useMemo } from 'react';\r\nimport PropTypes, { func } from 'prop-types';\r\nimport {\r\n Divider,\r\n makeStyles,\r\n mergeClasses,\r\n shorthands,\r\n tokens,\r\n} from '@fluentui/react-components';\r\n\r\nimport {\r\n ShortHeadlineAssetCollection,\r\n DescriptionAssetCollection,\r\n LongHeadlineAssetCollection,\r\n} from './index';\r\nimport { assetName } from '../../../constants';\r\n\r\nconst useTextAssetCollectionStyles = makeStyles({\r\n root: {\r\n maxWidth: '432px',\r\n },\r\n textAssetStyle: {\r\n '& .text-assets-collection-container': {\r\n width: '100%',\r\n },\r\n },\r\n textDivider: {\r\n ...shorthands.margin(tokens.spacingVerticalL, 0),\r\n },\r\n hide: {\r\n display: 'none',\r\n },\r\n});\r\n\r\nconst TextAssetCollectionWithCoPilotInternal = (props) => {\r\n const {\r\n i18n,\r\n disableCopilot,\r\n onResetTextAssets,\r\n shortHeadlineValidations,\r\n longHeadlineValidations,\r\n descriptionValidations,\r\n fetchRecommendationAssets,\r\n setAddNewDescriptionCallback,\r\n setAddNewLongHeadlinesCallback,\r\n setAddNewShortHeadlinesCallback,\r\n onChangeTextAssetFormattingSection,\r\n cancelFetchRecommendationAssetsJob,\r\n } = props;\r\n\r\n const classes = useTextAssetCollectionStyles();\r\n\r\n const longHeadlineAssetCollection = useMemo(\r\n () => (\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nTextAssetCollectionWithRecommendations.propTypes = {\r\n isAudienceAd: PropTypes.bool,\r\n url: PropTypes.string.isRequired,\r\n campaignId: PropTypes.string.isRequired,\r\n shortHeadline: PropTypes.string,\r\n longHeadline: PropTypes.string,\r\n description: PropTypes.string,\r\n shortHeadlineValidations: PropTypes.shape({\r\n display: PropTypes.bool,\r\n placeholder: PropTypes.string,\r\n minLength: PropTypes.number,\r\n maxLength: PropTypes.number,\r\n isMultipleOptions: PropTypes.bool,\r\n }),\r\n longHeadlineValidations: PropTypes.shape({\r\n display: PropTypes.bool,\r\n placeholder: PropTypes.string,\r\n minLength: PropTypes.number,\r\n maxLength: PropTypes.number,\r\n isMultipleOptions: PropTypes.bool,\r\n }),\r\n descriptionValidations: PropTypes.shape({\r\n display: PropTypes.bool,\r\n placeholder: PropTypes.string,\r\n minLength: PropTypes.number,\r\n maxLength: PropTypes.number,\r\n isMultipleOptions: PropTypes.bool,\r\n }),\r\n serverContext: PropTypes.shape({\r\n CurrentLocale: PropTypes.string.isRequired,\r\n }).isRequired,\r\n disableCopilot: PropTypes.bool.isRequired,\r\n i18n: PropTypes.shape({ getString: func, getLocale: func }).isRequired,\r\n fetchRecommendationAssets: PropTypes.func.isRequired,\r\n cancelFetchRecommendationAssetsJob: PropTypes.func.isRequired,\r\n onChangeTexts: PropTypes.func.isRequired,\r\n onChangeTextAssetFormattingSection: PropTypes.func.isRequired,\r\n};\r\n\r\nTextAssetCollectionWithRecommendations.defaultProps = {\r\n isAudienceAd: false,\r\n shortHeadline: '',\r\n longHeadline: '',\r\n description: '',\r\n shortHeadlineValidations: {\r\n placeholder: '',\r\n minLength: 0,\r\n maxLength: 30,\r\n display: true,\r\n isMultipleOptions: false,\r\n },\r\n longHeadlineValidations: {\r\n placeholder: '',\r\n minLength: 0,\r\n maxLength: 90,\r\n display: true,\r\n isMultipleOptions: false,\r\n },\r\n descriptionValidations: {\r\n placeholder: '',\r\n minLength: 0,\r\n maxLength: 90,\r\n display: true,\r\n isMultipleOptions: false,\r\n },\r\n};\r\n","import { makeStyles, shorthands, tokens } from '@fluentui/react-components';\r\n\r\nexport const getskeletonStyles = makeStyles({\r\n row: {\r\n display: 'flex',\r\n ...shorthands.gap('8px'),\r\n flexWrap: 'wrap',\r\n },\r\n item: {\r\n height: '55px',\r\n width: '55px',\r\n backgroundColor: tokens.colorNeutralStencil1,\r\n },\r\n});\r\n\r\n\r\nexport const useStyles = makeStyles({\r\n displayColorPicker: {\r\n '& .helpbutton': {\r\n display: 'inline',\r\n },\r\n },\r\n colorPalette: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n ...shorthands.margin(tokens.spacingVerticalM, 0, 0, 0),\r\n },\r\n item: {\r\n height: '55px',\r\n width: '55px',\r\n backgroundColor: tokens.colorNeutralStencil1,\r\n },\r\n helpButton: {\r\n marginLeft: tokens.spacingHorizontalSNudge,\r\n },\r\n titleContainer: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n },\r\n});\r\n","/* istanbul ignore file */ // not fully implemented yet\r\nimport React, { useMemo } from 'react';\r\nimport { HelpButton } from '@bingads-webui-react/help-popup';\r\nimport { ColorPalette, ColorAddButton, useCheckDuplicateColor } from '@bingads-webui-campaign-react/ads-color-picker';\r\nimport { Body1Strong, mergeClasses, Skeleton, SkeletonItem } from '@fluentui/react-components';\r\nimport { useStyles, getskeletonStyles } from './style';\r\nimport {\r\n AdsStudioDisplayColorPickerProps\r\n} from './type';\r\n\r\n\r\nconst ListSkeleton = () => {\r\n const classes = getskeletonStyles();\r\n return (\r\n \r\n { helpTopic && (\r\n
\r\n ), [classes.helpButton, helpLabel, helpTopic]);\r\n const { isDuplicate, onUpdateColor } = useCheckDuplicateColor({ paletteData, allowDuplicates: false, onUpdate });\r\n\r\n return (\r\n \r\n {title} \r\n {renderHelpBubble}\r\n
\r\n {isLoading ?\r\n \r\n {paletteData.map(colorData => (\r\n colorData &&
\r\n }\r\n \r\n );\r\n});\r\n","/* istanbul ignore file */\r\nimport React, { useCallback, useContext, useMemo, useRef, useState } from 'react';\r\nimport { get } from 'underscore';\r\nimport {\r\n ActivityContext,\r\n ScenarioContext,\r\n} from '@bingads-webui-react/hoc-with-signal';\r\nimport { constants } from '@bingads-webui-campaign-react/image-experience-model';\r\nimport { AddImageCrudAdComponent } from '@bingads-webui-campaign-react/add-media-panel-crud-ad';\r\nimport {\r\n getUrlPrefixAndDestination,\r\n getUpdatedFullUrlOnPrefixUpdate,\r\n getUpdatedFullUrlOnTextUpdate,\r\n validateAdUrl,\r\n} from '@bingads-webui-campaign-react/url-input-fluent';\r\nimport { withInstrumentation } from '@bingads-webui-react/hoc-with-instrumentation';\r\nimport {\r\n useAssetLibraryImagePicker,\r\n useWebsiteSuggestion,\r\n} from '@bingads-webui-campaign-react/add-image-hooks';\r\nimport { UploadImageWrapperProps } from './type';\r\n\r\nexport const UploadImageWrapper = ({\r\n preferenceService,\r\n i18n,\r\n serverContext,\r\n aid,\r\n cid,\r\n maxLimit,\r\n elementType,\r\n isBrandKit,\r\n onSelectImages,\r\n oDataConfig,\r\n minSizeConfig,\r\n panelSubtitle,\r\n panelTitle,\r\n permissions,\r\n instrumentation,\r\n perfMarker,\r\n displayImagePicker,\r\n setDisplayImagePicker,\r\n selectedMediaPanelSource,\r\n setSelectedMediaPanelSource,\r\n disabledAssetSources,\r\n}: UploadImageWrapperProps) => {\r\n const ref = useRef\r\n {(actionPanelDisplayData.displayLogo && showRecommendationsBanner) &&\r\n
\r\n );\r\n};\r\n\r\nexport const ActionPaneComp = withInstrumentation(ActionPane);\r\n","import {\r\n makeStyles,\r\n tokens,\r\n} from '@fluentui/react-components';\r\n\r\nexport const useStyles = makeStyles({\r\n finalUrlContainer: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n '& > div': {\r\n columnGap: tokens.spacingHorizontalSNudge,\r\n },\r\n },\r\n copilotBanner: {\r\n paddingTop: tokens.spacingVerticalS,\r\n paddingBottom: tokens.spacingVerticalL,\r\n },\r\n finalUrlInput: {\r\n '> span.fui-Input': {\r\n minWidth: '100px',\r\n },\r\n },\r\n});\r\n","/* istanbul ignore file */ // not fully implemented yet\r\nimport React, { useCallback, useContext } from 'react';\r\nimport _ from 'underscore';\r\nimport { UrlInputFluent } from '@bingads-webui-campaign-react/url-input-fluent-v2';\r\nimport { ActivityContext } from '@bingads-webui-react/hoc-with-signal';\r\nimport { IFinalUrl } from './types';\r\nimport { useStyles } from './style';\r\n\r\nexport const FinalUrl = ({\r\n i18n,\r\n finalUrl,\r\n setFinalUrl,\r\n}: IFinalUrl) => {\r\n const classes = useStyles();\r\n const [localFinalUrl, setLocalFinalUrl] = React.useState(finalUrl);\r\n const [inputErrors, setInputErrors] = React.useState([]);\r\n\r\n const activity = useContext(ActivityContext) as any;\r\n const handleSetFinalUrl = useCallback((errors, value) => {\r\n setInputErrors(errors);\r\n setLocalFinalUrl(value);\r\n }, []);\r\n\r\n const notifyFinalURLchange = useCallback(() => {\r\n if (_.isEmpty(inputErrors)) {\r\n setFinalUrl(localFinalUrl);\r\n activity.signal(`[DisplayAdsEditor] ${localFinalUrl}`);\r\n }\r\n }, [inputErrors, localFinalUrl, setFinalUrl, activity]);\r\n\r\n const handleKeyUp = useCallback((e) => {\r\n const { key } = e;\r\n if (key === 'Enter') {\r\n notifyFinalURLchange();\r\n }\r\n }, [notifyFinalURLchange]);\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n sizes\r\n
\r\n );\r\n};\r\n","import React, { useState } from 'react';\r\nimport { Button, Divider, makeStyles, mergeClasses, shorthands, tokens } from '@fluentui/react-components';\r\n\r\ninterface FilterBarProps {\r\n i18n: any;\r\n selectionCallback: (selectedItem: string) => void;\r\n}\r\n\r\nconst useStyles = makeStyles({\r\n row: {\r\n display: 'flex',\r\n justifyContent: 'flex-start',\r\n flexWrap: 'wrap',\r\n ...shorthands.gap(tokens.spacingHorizontalS),\r\n ...shorthands.padding(tokens.spacingVerticalXXL, tokens.spacingHorizontalXXXL),\r\n },\r\n filterButton: {\r\n height: '32px',\r\n minWidth: '75px',\r\n whiteSpace: 'nowrap',\r\n },\r\n divider: {\r\n flexGrow: 'unset',\r\n },\r\n});\r\n\r\nexport const FilterBar = ({ i18n, selectionCallback }: FilterBarProps) => {\r\n const [selectedFilter, setSelectedFilter] = useState('All sizes');\r\n const filterOptions = [\r\n { value: 'All sizes', text: _TL_('All sizes') },\r\n { value: 'Horizontal', text: _TL_('Horizontal') },\r\n { value: 'Square', text: _TL_('Square') },\r\n { value: 'Vertical', text: _TL_('Vertical') },\r\n ];\r\n const classes = useStyles();\r\n return (\r\n \r\n {filterOptions.map((filter, index) => (\r\n \r\n {\r\n selectionCallback(filter.value);\r\n setSelectedFilter(filter.value);\r\n }}\r\n appearance={selectedFilter === filter.value ? 'outline' : undefined}\r\n className={mergeClasses(`${filter.value.replace(/\\s+/g, '-')}-filter`, classes.filterButton)}\r\n >\r\n {i18n.getString(filter.text)}\r\n \r\n {index === 0 && \r\n ))}\r\n
\r\n );\r\n};\r\n","import { shorthands, tokens, makeStyles } from '@fluentui/react-components';\r\n\r\nexport const previewStyles = makeStyles({\r\n previewContainer: {\r\n backgroundColor: 'inherit',\r\n ...shorthands.flex(1, 1, '1px'),\r\n minWidth: '1px',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n },\r\n backButton: {\r\n justifySelf: 'start',\r\n ...shorthands.margin(tokens.spacingVerticalXXL, tokens.spacingHorizontalXXXL),\r\n },\r\n adPreviews: {\r\n ...shorthands.overflow('auto', 'auto'),\r\n paddingLeft: tokens.spacingHorizontalXXXL,\r\n paddingRight: tokens.spacingHorizontalXXXL,\r\n ...shorthands.flex(1, 1, '1px'),\r\n },\r\n container: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n rowGap: tokens.spacingVerticalS,\r\n },\r\n row: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n justifyContent: 'flex-start',\r\n columnGap: tokens.spacingHorizontalL,\r\n rowGap: tokens.spacingVerticalS,\r\n },\r\n centered: {\r\n display: 'flex',\r\n justifyContent: 'safe center',\r\n alignItems: 'safe center',\r\n },\r\n editButton: {\r\n position: 'absolute',\r\n top: '50%',\r\n left: '50%',\r\n transform: 'translate(-50%, -50%)',\r\n opacity: 0,\r\n },\r\n imageContainer: {\r\n position: 'relative',\r\n boxShadow: tokens.shadow2,\r\n '&:hover img, &:focus img': {\r\n filter: 'brightness(0.7)',\r\n },\r\n '&:hover button, &:focus button': {\r\n opacity: 1,\r\n },\r\n ...shorthands.transition('filter', '0.3s', 'ease-in-out'),\r\n ...shorthands.margin('1px'),\r\n },\r\n sizeText: {\r\n ...shorthands.padding(tokens.spacingVerticalNone, tokens.spacingHorizontalNone, tokens.spacingVerticalXS),\r\n },\r\n});\r\n","import React from 'react';\r\nimport {\r\n Dropdown,\r\n Option,\r\n shorthands,\r\n tokens,\r\n makeStyles,\r\n mergeClasses,\r\n DropdownProps,\r\n} from '@fluentui/react-components';\r\n\r\nconst useStyles = makeStyles({\r\n zoomDropDown: {\r\n minWidth: '80px',\r\n ...shorthands.margin(tokens.spacingVerticalXXL, tokens.spacingHorizontalNone),\r\n },\r\n});\r\n\r\nexport interface ZoomControlProps {\r\n zoomValue: string;\r\n onZoomSelect: DropdownProps['onOptionSelect'];\r\n i18n: {\r\n getString: (key: string) => string;\r\n };\r\n}\r\n\r\nconst zoomOptions = [\r\n _TL_('75%'),\r\n _TL_('80%'),\r\n _TL_('90%'),\r\n _TL_('100%'),\r\n _TL_('110%'),\r\n _TL_('120%'),\r\n _TL_('125%'),\r\n _TL_('150%'),\r\n _TL_('200%'),\r\n];\r\n\r\nexport const ZoomControl = ({ zoomValue, onZoomSelect, i18n }: ZoomControlProps) => {\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n {i18n.getString(_TL_('{{width}} x {{height}} pixels'), { width: image.width, height: image.height })}\r\n \r\n
\r\n );\r\n }\r\n\r\n return (\r\n \r\n {editEnabled ? (\r\n editIndividualAdCallback(adSize)}\r\n onKeyDown={onSelectWithKeyboard}\r\n >\r\n editIndividualAdCallback(adSize)}\r\n icon={
\r\n ):(\r\n \r\n
\r\n );\r\n } else if (Object.keys(adImages).length === 1) { // only one preview available\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n {\r\n showPreviewControls &&\r\n
\r\n );\r\n }\r\n // multiple previews\r\n return (\r\n \r\n
\r\n }\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n","/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport _ from 'underscore';\r\nimport React, { useCallback, useEffect, useMemo, useState, useContext } from 'react';\r\nimport { createPortal } from 'react-dom';\r\nimport PropTypes from 'prop-types';\r\nimport {\r\n Button,\r\n makeStyles,\r\n mergeClasses,\r\n shorthands,\r\n tokens,\r\n} from '@fluentui/react-components';\r\nimport { ActivityContext } from '@bingads-webui-react/hoc-with-signal';\r\n\r\nimport { generateNameSuggestionSuffix } from '@bingads-webui-campaign/audience-campaign-shared';\r\nimport { ZoomControl } from './ad-previews/zoom-control';\r\nimport { DisplayAdsContext } from './context';\r\nimport { getAdConfig } from './utils';\r\n\r\nexport const useStyles = makeStyles({\r\n container: {\r\n height: '44px',\r\n display: 'flex',\r\n alignItems: 'center',\r\n ...shorthands.padding(0, tokens.spacingHorizontalL),\r\n },\r\n saveButton: {\r\n marginLeft: tokens.spacingHorizontalL,\r\n whiteSpace: 'nowrap',\r\n },\r\n});\r\n\r\nexport const DisplayTemplateSummaryBarControl = ({\r\n i18n,\r\n isSaveDisabled,\r\n zoomValue,\r\n onZoomSelect,\r\n dataService,\r\n saveInNewFolder,\r\n onSaveSuccess,\r\n setIsSaving,\r\n finalUrl,\r\n sourceType,\r\n folderId,\r\n}) => {\r\n const classes = useStyles();\r\n const [summaryBar, setSummaryBar] = useState\r\n {/* Horizontal images each get their own row in decreasing width order */}\r\n {targetSizes\r\n .filter(size => getAdSizeCategory(size) === 'Horizontal')\r\n .sort((a, b) => adImages[b].width - adImages[a].width)\r\n .map(size => (\r\n
\r\n \r\n {targetSizes\r\n .filter(size => getAdSizeCategory(size) !== 'Horizontal')\r\n .sort((a, b) => (adImages[a].width / adImages[a].height) - (adImages[b].width / adImages[b].height))\r\n .map(size => (\r\n
\r\n \r\n \r\n {isSingleAd? i18n.getString(_TL_('Save')): i18n.getString(_TL_('Save all sizes')) }\r\n \r\n
\r\n ), [\r\n classes.container,\r\n i18n,\r\n isSaveDisabled,\r\n save,\r\n onZoomSelect,\r\n zoomValue,\r\n classes.saveButton,\r\n isSingleAd,\r\n ]);\r\n\r\n useEffect(() => {\r\n const timer = setInterval(() => {\r\n try {\r\n const summaryBarCustomizeEle = document.getElementById('ad-studio-summary-bar-customize-container');\r\n if (summaryBarCustomizeEle) {\r\n setSummaryBar(summaryBarCustomizeEle);\r\n clearInterval(timer);\r\n }\r\n } catch (error) {\r\n clearInterval(timer);\r\n }\r\n }, 500);\r\n return () => clearInterval(timer);\r\n }, []);\r\n\r\n return (\r\n summaryBar ? createPortal(\r\n customizedContent,\r\n summaryBar\r\n ) : null\r\n );\r\n};\r\n\r\nDisplayTemplateSummaryBarControl.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n isSaveDisabled: PropTypes.bool,\r\n zoomValue: PropTypes.string.isRequired,\r\n onZoomSelect: PropTypes.func.isRequired,\r\n dataService: PropTypes.shape({\r\n addImageWithBaseIdToFolder: PropTypes.func,\r\n createFolder: PropTypes.func,\r\n uploadImageByUrl: PropTypes.func,\r\n getImageById: PropTypes.func,\r\n }).isRequired,\r\n saveInNewFolder: PropTypes.bool,\r\n onSaveSuccess: PropTypes.func,\r\n setIsSaving: PropTypes.func.isRequired,\r\n finalUrl: PropTypes.string,\r\n sourceType: PropTypes.string,\r\n folderId: PropTypes.string,\r\n};\r\n\r\nDisplayTemplateSummaryBarControl.defaultProps = {\r\n isSaveDisabled: false,\r\n saveInNewFolder: false,\r\n onSaveSuccess: undefined,\r\n finalUrl: undefined,\r\n sourceType: undefined,\r\n folderId: undefined,\r\n};\r\n","\r\n/* istanbul ignore file */ // not fully implemented yet\r\nimport React, { useMemo, useContext, useCallback, useEffect } from 'react';\r\nimport _ from 'underscore';\r\nimport {\r\n bundleIcon,\r\n Wand24Regular,\r\n Wand24Filled,\r\n Glance24Regular,\r\n Glance24Filled,\r\n} from '@fluentui/react-icons';\r\n\r\nimport { makeStyles, mergeClasses, tokens, DropdownProps, shorthands } from '@fluentui/react-components';\r\n\r\nimport { UiBlocker } from '@bingads-webui-fluent-component/ui-blocker';\r\nimport { withRecommendationContext } from '@bingads-webui-campaign-react/perf-max-recommendation';\r\nimport { withLoggingContext } from '@bingads-webui-campaign-react/copilot-loggers';\r\nimport { Scenario, Activity } from '@bingads-webui-react/hoc-with-signal';\r\nimport { Navigation } from './side-navigatioin';\r\nimport { AdjustView } from './adjust-view';\r\nimport { SizesView } from './sizes-view';\r\nimport { AdPreViews } from './ad-previews';\r\nimport { DisplayAdsContext, DisplayAdsProvider } from './context';\r\nimport { ActionTypes } from './reducer';\r\nimport { DisplayAdsEditorProps, AdSize } from './types';\r\nimport { DisplayTemplateSummaryBarControl } from './display-template-summary-bar-control';\r\nimport { getAdConfig, getAdConfigs } from './utils';\r\n\r\nconst NavigationIds = {\r\n Adjust: 'Adjust',\r\n Sizes: 'Sizes',\r\n};\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n display: 'flex',\r\n backgroundColor: tokens.colorNeutralBackground2Hover,\r\n },\r\n editPanel: {\r\n flexShrink: 0,\r\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\r\n ...shorthands.overflow('hidden'),\r\n },\r\n});\r\n\r\nconst Wand = bundleIcon(Wand24Filled, Wand24Regular);\r\nconst Glance = bundleIcon(Glance24Filled, Glance24Regular);\r\n\r\nconst groupedTabs = ({ onClick, i18n, selectedItem }) => [\r\n [\r\n {\r\n id: NavigationIds.Adjust,\r\n key: NavigationIds.Adjust,\r\n text: i18n.getString(_TL_('Adjust')),\r\n icon: Wand,\r\n isSelected: selectedItem === NavigationIds.Adjust,\r\n onClick: () => {\r\n onClick(NavigationIds.Adjust);\r\n },\r\n },\r\n {\r\n id: NavigationIds.Sizes,\r\n key: NavigationIds.Sizes,\r\n text: i18n.getString(_TL_('Sizes')),\r\n icon: Glance,\r\n isSelected: selectedItem === NavigationIds.Sizes,\r\n onClick: () => {\r\n onClick(NavigationIds.Sizes);\r\n },\r\n },\r\n ],\r\n];\r\n\r\nconst cache = {};\r\n\r\nconst DisplayAdsEditorComponent: React.FC\r\n {selectedItem === NavigationIds.Adjust && (\r\n
\r\n \r\n \r\n { templateDetails && (\r\n
\r\n \r\n \r\n {\r\n isMultiplePreview ?\r\n
\r\n \r\n );\r\n});\r\n","import React, { memo, useCallback, useEffect, useRef, useMemo, useState } from 'react';\r\nimport { UiBlocker } from '@bingads-webui-react/ui-blocker';\r\nimport { Body1Strong, mergeClasses } from '@fluentui/react-components';\r\nimport { HelpButton } from '@bingads-webui-react/help-popup';\r\nimport { ImageSuggestionCarousel } from '@bingads-webui-campaign-react/image-suggestion-carousel';\r\nimport { ImageRecommendationsPanel } from '@bingads-webui-campaign-react/pmax-image-experience';\r\nimport { RecommendationsSectionIcon } from './asset-images';\r\nimport { getCarouselStyles, getFullyShownImagesCount, initialImageContainerLeftMargin, useStyles } from './style';\r\nimport { DisplayRecommendedImageProps } from './type';\r\nimport { ImagePreview } from './ImagePreview';\r\n\r\nconst DisplayRecommendedImage = memo(({\r\n i18n,\r\n isLoading,\r\n type,\r\n showViewAllInHeader,\r\n seeAllLinkText,\r\n themes,\r\n onSelectRecommendedImage,\r\n recommendationTitle,\r\n title,\r\n seeAllPanelTitle,\r\n recommendedLoadingText,\r\n recommendedImages,\r\n maxUploadNum,\r\n uiBlocking,\r\n previewImage,\r\n helpTopic,\r\n helpLabel,\r\n isRecommendationEmpty = false,\r\n onEditPreviewImage,\r\n onReplacePreviewImage,\r\n hideEditPreviewBtn,\r\n hideReplacePreviewBtn,\r\n isMultiplePreview,\r\n}: DisplayRecommendedImageProps) => {\r\n const [isSuggestionsPanelOpen, setIsSuggestionsPanelOpen] = useState(false);\r\n const [imagesToSuggest, setImagesToSuggest] = useState([]);\r\n const ref = useRef<{ fullUrl: any; index: any; suggestionId: any } | null>(null);\r\n const onSelectSeeAllRecommendedImages = useCallback(() => {\r\n setIsSuggestionsPanelOpen(true);\r\n }, []);\r\n const onDismiss = () => {\r\n setIsSuggestionsPanelOpen(false);\r\n };\r\n const onSelect = (fullUrl, index, suggestionId) => {\r\n onSelectRecommendedImage({ fullUrl, index, suggestionId }, type);\r\n };\r\n const onAdd = (images) => {\r\n onSelectRecommendedImage({ fullUrl: images[0]?.fullUrl, index: ref.current?.index, suggestionId: images[0]?.suggestionId }, type);\r\n };\r\n const onSelectImage = (fullUrl, index, suggestionId) => {\r\n ref.current = { fullUrl, index, suggestionId };\r\n onSelectRecommendedImage({ fullUrl, index, suggestionId }, type);\r\n };\r\n useEffect(() => {\r\n if (recommendedImages) {\r\n const truncatedImages = Array.isArray(recommendedImages) && recommendedImages.slice(0, 10);\r\n setImagesToSuggest(truncatedImages || [] as any);\r\n }\r\n }, [recommendedImages]);\r\n\r\n const classes = useStyles();\r\n\r\n const renderHelpBubble = useMemo(() => (\r\n \r\n {!hideEditBtn && (\r\n
\r\n )}\r\n \r\n { helpTopic && (\r\n
\r\n ), [classes.helpButton, helpLabel, helpTopic]);\r\n\r\n return (\r\n \r\n \r\n 0 ? imagesToSuggest : []}\r\n i18n={i18n}\r\n icon={RecommendationsSectionIcon}\r\n isEmpty={isRecommendationEmpty}\r\n onSelectImage={onSelect}\r\n onSelectSeeAll={onSelectSeeAllRecommendedImages}\r\n showViewAllInHeader={showViewAllInHeader}\r\n stylingOverrides={{\r\n getCarouselStyles,\r\n getFullyShownImagesCount,\r\n initialImageContainerLeftMargin,\r\n seeAllLinkText,\r\n }}\r\n />\r\n \r\n {isSuggestionsPanelOpen &&\r\n
\r\n );\r\n});\r\n\r\nexport default DisplayRecommendedImage;\r\n","import { ITreeItem, ITreeIndexes } from './types';\r\n\r\nexport function buildMap(flatTreeItems: Array\r\n {title} \r\n {renderHelpBubble}\r\n
\r\n {_.isFunction(onRenderContent) ? onRenderContent(flatTreeItem) : content}
\r\n }\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nDropdownTreeSelect.defaultProps = {\r\n placeholder: '',\r\n items: [],\r\n checkedItems: [],\r\n onChange: _.noop,\r\n openItems: [],\r\n onOpenChange: _.noop,\r\n onRenderContent: null,\r\n onRenderTooltip: null,\r\n customFilter: undefined,\r\n isMultiSelect: true,\r\n};\r\n"],"names":["getDateSettingDetails","i18n","startDate","endDate","start","getString","_TL_","dateFormatter","skeleton","end","startFromDate","endToDate","getDayPickerStrings","months","_","map","num","getMonth","style","shortMonths","days","day","getDayOfWeek","shortDays","goToToday","prevMonthAriaLabel","nextMonthAriaLabel","prevYearAriaLabel","nextYearAriaLabel","closeButtonAriaLabel","isRequiredErrorMessage","invalidInputErrorMessage","DatePickerBasic","props","label","maxDate","minDate","dateValue","placeholder","ariaLabel","onDateChange","disabled","onFormatDate","className","_jsx","classNames","children","DatePicker","value","Date","calendarProps","calendarDayProps","calendarMonthProps","formatDate","onSelectDate","d","handleDateSelection","strings","defaultProps","undefined","getStyles","__","core","_objectSpread","datePickerStyle","dateSettingContainer","creationCommonStyle","advancedSettingsSectionStyle","toggleButtonStyle","paddingLeft","position","opacity","top","right","width","height","margin","padding","marginRight","verticalAlign","fontWeight","display","alignItems","backgroundColor","color","DateSetting","data","adGroupStatus","onChange","activityLogger","classes","useDefaultStyles","currentDate","useMemo","localDate","toLocaleString","timeZone","toIANATimeZone","TimeZone","getFullYear","getDate","_useState","useState","_useState2","_slicedToArray","savedStartDate","setSavedStartDate","rawStartDate","StartDate","rawEndDate","nextYearDateWithTimeZone","EndDate","hasFixedStartDate","_useState3","_useState4","hasEndDate","setHasEndDate","useCallback","date","onStartDateChange","signal","onEndDateChange","options","key","text","onRenderField","fieldProps","render","_jsxs","onEndDateChoiceChange","ev","option","newChoiceValue","concat","useEffect","classnames","Label","ChoiceGroup","selectedKey","DateSettingWithCustomValidation","_ref","validationProps","updateValidation","validateOnLoad","restProps","_objectWithoutProperties","_excluded","dataSettings","useContext","I18nContext","activity","ActivityContext","isInvalidState","setIsInvalidState","updatedDateSettings","setUpdatedDateSettings","validateDate","_ref2","_ref2$hasFixedStartDa","validationErrors","push","newData","shouldDirty","arguments","length","validationError","JSON","stringify","level","status","ValidatedDateSettingInternal","withError","withCustomValidation","ValidatedDateSetting","container","bid","currency","marginTop","messageBar","DefaultBid","currencyCode","id","getRangeWaring","rest","TextField","PriceModelToRange","EnhancedCpc","ManualCpc","ManualCpv","ManualCpm","DefaultBidWithValidation","withControlErrorHandling","withControlErrors","DefaultBidWithWaring","onValidate","field","Type","serverContext","ServerContext","result","_getBidRange","type","bidCeil","bidFloor","getBidRange","_Fragment","htmlFor","CurrentAccount","CurrencyCode","_defineProperty","schema","properties","minimum","maximum","required","ValidatedDefaultBid","onBidChange","onCountValidate","_result$messages","messages","fieldValue","CustomValidatedDefaultBid","isAutoBidding","bidStrategyType","autoBidding","bidStratetyTypeValue","maximizeConversions","maximizeClicks","maxConversionValue","targetRoas","targetCpa","targetImpressionShare","costPerSale","useStyles","makeStyles","statusList","flexDirection","shorthands","gap","flexWrap","alignContent","progressBar","StatusSection","details","denominator","numerator","filter","item","Status","Active","Math","max","items","StatusPopoverItem","name","ProgressBar","thickness","actionCardsList","card","minWidth","border","borderRadius","iconArea","divider","cardsMessage","cardTitle","overflow","textOverflow","textWrap","cardMessage","cardButton","nameText","footer","justifyContent","ActionCard","cardMsg","onCardButtonClicked","cardButtonText","learnMoreLink","StatusIcon","Body2","Tooltip","content","relationship","Body1","block","Button","onClick","Link","href","target","rel","ActionCards","isSmallScreen","contents","Divider","inset","Caption1","count","SimpleCarousel","Carousel","contentWidth","campaignTitle","campaignMsg","DiagnosticCard","campaignStatusTitle","campaignStatusMsg","responsiveSize","detailsToFix","Title2","STEP_PATHS","FLOWS","AD_TYPES_TO_FLOWS","AdTypes","Display","Video","Native","AudienceVideo","Netflix","WIZARD_TYPES","WIZARD_TYPE_TO_FLOW","FLOWS_TO_FIRST_STEP","isAudienceCampaign","flow","isAudienceCampaignEdit","isCTVCampaignEdit","isDealCampaignEdit","isAudienceAdGroupEdit","isDealAdGroupEdit","isCTVAdGroupEdit","isAudienceAdGroupCreation","isAudienceAdGroupMultiAdCreation","isAudience","isAdGroupCreation","isEdit","isDisplayAdsCampaign","isVideoAdsCampaign","isCTVCampaign","isCTVAdGroupCreation","isDealCampaign","isDealAdGroupCreation","isCTVOrDeal","shouldEnableBidAdjustment","_serverContext$Dynami","DynamicPermissions","EnableMSANDisplayCampaigns","EnableMSANVideoCampaigns","isMSANDisplay","isMSANVideo","Permissions","IsAmplifyEnabled","addSummaryStep","steps","permissions","dynamic","DisplayPlusSummaryPage","getAdGroupPanels","XandrDeviceTarget","DisplayPlusAmplify","Enable1PPlacementTargeting","DeviceTargetingForDisplay","EnableKeywordCustomSegments","MultiAdFormat","InMarketAudienceRedesign","ContentTargeting","PremiumStreaming","GenreTargets","basicOptions","advancedOptions","is1PPlacementEnabled","IsDomesticSimplifiedChineseEnabled","StepHeader","title","description","React","headerStyles","mergeStyles","adPreviewStyles","VideoAds","ads","onDataChange","error","hideFooter","loadClipchampPlayer","_ref2$errors","errors","legacyI18n","buildLegacyI18n","ValidationStringMap","_scope$values","ScopeContext","scope","values","cid","aid","PermissionsContext","perfMarker","PerformanceMarkerContext","currentVideoIndex","setCurrentVideoIndex","saveFailed","useFormService","state","context","useWizardService","_state$context$wizard","wizardData","_state$context$wizard2","campaign","editingAdId","deal","campaignId","Id","currentStates","toStrings","onAdsValidation","results","newAdsData","restResults","newAds","ad","removeEmptyAds","dataPatch","_toConsumableArray","isValid","matchStepState","STEP_STATES","LOADING","SAVING","getBasicSettingsSection","Stack","horizontal","token","childrenGap","UnmappedFormErrors","VideoAdsContainer","biddingScheme","allowCopilotVideoGeneration","dealLoaded","AdPreview","onUpdateCurrentVideoIndex","ActuationGroup","actuationProps","isActive","AttentionBeaconGroup","FormErrorGroup","formErrorProps","showAllValidationErrors","BiddingSchemes","BidTypes","BiddingSchemeToBidType","BudgetTypes","AgeRanges","EighteenToTwentyFive","TwentyFiveToThirtyFive","ThirtyFiveToFifty","FiftyToSixtyFive","SixtyFiveAndAbove","Unknown","GenderTypes","Female","Male","DeviceTypes","Computers","DeviceKeys","Tablets","Smartphones","AdGroupCriterions","Criterion","BidAdjustment","DayTimeCriterion","Day","FromHour","FromMinute","ToHour","ToMinute","CriterionType","BundleLocationCriterions","SelectionStatus","Campaign","OriginalBidAdjustment","LocationCriterion","LocationId","Name","NameTypeCombo","Latitude","Longitude","CountryCode","LocationType","EnclosingLocationIds","LesLocationType","BundleCountries","Country","AdPreviewOverideStylesByKey","imagePreviewHeight","imagePreviewWidth","CampaignGoal","CampaignObjectiveType","whitelistedSchemaPropertyKeys","getConversionGoalsDetails","edmCampaign","Customers","$withKey","Accounts","$makeCall","toPromise","readConversionGoalDetails","then","model","pick","getBiddingScheme","displayPlusCampaignObjective","appConfig","get","localStorage","supportsStorage","set","getDisplayPlusCampaignObjective","ObjectiveIDs","Conversions","goalDetails","IsActiveConversionGoalPresent","getBiddingSchemeForConversions","Consideration","Promise","resolve","Awareness","AdsError","_createClass","message","property","code","_classCallCheck","this","useSkipAdCreationState","_useWizardService","wizardState","wizardSend","send","isSkipAdCreation","WIZARD_EVENTS","UPDATE_WIZARD_DATA","useAdsRepository","saveAsParam","saveAds","defaultCampaign","defaultAdGroup","_useSkipAdCreationSta","_useSkipAdCreationSta2","setSkipAdCreation","_useContext","RecommendationContext","recommendationContext","scenarioContext","ScenarioContext","activityContext","oDataConfig","getODataConfig","imageOdata","ImageOData","logSuggestionsApplied","useCopilotLoggers","isImageFittingEnabled","_len","args","Array","_key","apply","load","isAudienceFlow","DisplayPlusMultipleAds","ids","isDirty","currentPageIndex","getVideoDeal","createSaveCampaignPromise","BiddingScheme","IsBoostPassCampaignGoalEnabled","getGlobalSelectedCampaignObjective","objectiveType","goal","getActualGoalFromCampaignGoal","CampaignObjectiveSetting","CampaignObjectiveSettingType","saveCampaign","scenario","createActivity","createSaveAdGroupPromise","saveCampaignPromise","campaignData","adGroup","campaignMtModel","isDefaultCampaignStepModel","adGroupModelWithConstraintsPromise","modelConstraints","constraintAdGroupModel","saveAdGroup","isDisplayPlus","createAds","saveAdGroupPromise","adsData","_ref3","_ref4","adGroupData","adGroupMtModel","isDefaultAdGroupStepModel","oldAdsModel","adData","isDisplayAdsCampaignFlow","isMultiAdFormatEnabled","createdAd","savedAds","updatedAds","serverErrors","systemErrors","adSubType","AdFormat","DisplayPlusCopilotRecommendations","logCopilotRecommendations","assetGroup","DisplayPlusCopilotAssetGeneration","totalCopilotAds","adD","creativeData","suggestionIds","creativeMeta","recommendationId","catch","save","_ref5","getDaysInTheFuture","numDaysInTheFuture","futureDate","setDate","getTomorrow","DNVBidRecommendations","CampaignTypes","Audience","CampaignSubTypes","AudienceStatic","CPC","USD","ALL","DZD","XCD","ARS","AUD","EUR","BDT","BWP","BRL","BZD","BND","BGN","BYN","XAF","CAD","LKR","CLP","TWD","COP","CRC","HRK","CZK","XOF","DKK","DOP","ETB","GHS","GTQ","HUF","ISK","INR","IDR","JMD","JPY","KZT","KES","KRW","KGS","CHF","MWK","MYR","MVR","MUR","MXN","MNT","MAD","NZD","NGN","NOK","PKR","PEN","PHP","PLN","RUB","RWF","SGD","VND","ZAR","SEK","THB","TOP","TTD","TRY","UGX","MKD","EGP","GBP","TZS","UYU","UZS","ZMW","FJD","HKD","MOP","AZN","BHD","AMD","GEL","ILS","JOD","KWD","LBP","OMR","QAR","SAR","TND","CPM","DisplayAds","BrandAwarenessVideoAds","getBidRecommendationsRange","campaignBidTypeInfo","campaignType","campaignSubType","biddingSchemeType","campaignTypeRecommendations","campaignSubTypeKey","CampaignSubTypeTextMapping","campaignSubTypeRecommendations","biddingSchemeKey","find","toUpperCase","includes","biddingSchemeRecommendations","bidRecommendationsData","bidRecommendation","getBidRecommendations","_cpmBidRange","cpmRange","cpmRecommendation","CpmBid","FloorValue","cpcRange","cpcRecommendation","SearchBid","getInitDeviceTypes","isCTVFlow","Object","keys","Devices","getDealMiniumBid","exchangeRateMapping","getAccountExchangeRateFromLocalStorage","getConvertedCurrencyDealMinimumBid","MinimumBid","Currency","val","getDefaultCampaign","generateNameSuggestionSuffix","Budget","Amount","MinXandrDailyBudgetRangePerCurrency","Languages","Target","CampaignSubType","CampaignType","conversionGoals","originalConversionGoals","goalSelection","goalScopeSelection","Scopes","ACCOUNT","ceil","getDefaultAdGroup","bidRecommendations","VideoViewsCPMBidRange","locationTargets","bidMode","currentLevelSettings","initLocations","peopleInLocation","peopleSearchingForLocation","targetOption","parentLevelSettings","useParentLevel","adSchedules","dayTimeRanges","deviceTypes","initialDeviceTypes","device","criterion","bidAdjustment","ageRanges","initialAgeRanges","genderTypes","initialGenderTypes","audiences","initialAudiences","interests","initialInterests","FrequencyCapSettings","genreTargets","initialGenreTargets","reachEstimation","useVideoAdsRepository","instrumentation","InstrumentationContext","createScenario","versionForLog","getLogVersion","logger","getLoggerWithoutPageInfo","CurrentCustomer","videoRepository","createVideoRepository","folderRepository","createFolderRepository","imageRepository","createImageRepository","_useAdsRepository","videoPromises","forEach","video","uploadVideoMetadata","videoMetadata","newVideoFromMTObject","uploadVideoIfNeeded","compact","appliedVideoAssetIds","idString","adCreatorStyles","currentImageIndex","setCurrentImageIndex","_useImagePicker","useImagePicker","displayImagePicker","setDisplayImagePicker","selectedMediaPanelSource","setSelectedMediaPanelSource","onNewImageSelected","imagePlacements","imagePlacement","imagePlacementsToImage","crops","defaults","FinalUrls","tokens","PopulateImages","DisplayAdsContainer","onUpdateCurrentImageIndex","_getBidRecommendation","useDisplayAdsRepository","isCopilotEnabled","setIsCopilotEnabled","isCopilotRegionRestricted","feature","isRegionRestricted","Activity","DisplayAdsWithCopilot","DisplayAdsWithoutCopilot","footerContainer","columnGap","NativeAdFooter","DefaultButton","SAVE_AND_GOTO","flowFactors","stepId","NAVIGATE_TO","getDefaultBidForCPCBiddingScheme","RecommendCPCBid","formatDecimal","maximumFractionDigits","minimumFractionDigits","_ref$DynamicPermissio","lifetimeBudgetProperties","CampaignLifetimeBudget","UseCampaignLevelDates","getBudgetRange","Daily","Default","TargetSetting","initialIndustryTargets","initialNegativeIndustryTargets","initialJobTargets","initialNegativeJobTargets","initialCompanyNameTargets","initialNegativeCompanyNameTargets","companyNameTargets","negativeCompanyNameTargets","UseOptimizedTargeting","AdRotation","ROTATION_OPTIONS","OPTIMIZED_FOR_CLICKS","_extraPlacementInfo","EPT","Responsive","MSAN","WideImage","previewTitle","previewHeaderTitle","customClassName","disclaimerMessage","editingPlacementType","MSEdgeSingleCarousel","MSNInArticle","MSNSmallHeadline","SquareImage","Outlook","Mobile","Web","Boost","WindowsSpotlight","hideHeaderButtons","DiscoverCard","StartMenu","hasLogo","ActionCenter","Banner","Prong1Prong2Feed","Coachmark","getIndicatorsWidth","placements","_ref$palette","palette","extensionEditorStyles","nativeAdStepShell","nativeAdImagePreviewCarousel","bottom","left","transform","transformations","indicatorsWidth","join","whiteSpace","fontSize","boxSizing","maxWidth","wordWrap","flex","rightStyles","leftStyles","headerStackStyles","imageExperienceStyle","textAssetStyle","businessNameStyle","imageListLoadingContainer","minHeight","paddingTop","imageListErrorContainer","lineHeight","flexGrow","marginLeft","adPreviewPlacementHeader","adPreviewPlacementContainer","borderColor","paddingBottom","textAlign","boxShadow","NativeAdInternal","supportImageFitting","_ref$loadClipchampPla","finalHideFooter","setBiddingScheme","biddingSchemeContext","biddingSchemeRes","useBiddingScheme","stylingProps","component","getClasses","useResponsiveStyles","ValidationGroup","AssetGroup","DisplayPlusNativeAds","isSaving","isCanceling","CANCELING","ScaleUnit","NativeAd","withScope","SingleNativeAdStepShell","stepData","nativeAd","useNativeAdRepository","isVideoAsAnAssetEnabled","VideoAsAnAsset","saveAdsWithMetadata","adThumbailRoot","background","cardPreview","adLabel","WebkitLineClamp","WebkitBoxOrient","header","hoverButtons","rowGap","zIndex","hoverButton","AdThumbnail","onDeleteAdClicked","idx","adTitle","Headlines","Headline0","adId","adDescription","Descriptions","Description0","businessName","BusinessName","adImageUrl","Images","ImageList","src","onEditAdClick","onDeleteAd","deletingAdId","Dialog","Card","tabIndex","CardPreview","alt","CardHeader","Text","weight","CardFooter","shape","icon","EditRegular","DialogTrigger","disableButtonEnhancement","DeleteRegular","DialogSurface","DialogBody","DialogTitle","DialogContent","DialogActions","appearance","useFluentV2Styles","button","addIcon","addNewAdButtonRoot","NativeAdsContainer","fluentV2Styles","updateData","adsToUpdate","deleteAd","adsWithoutDeletedAd","updatedFlow","adIds","wrap","AddRegular","MultiAdsStepShell","useMultipleNativeAdsRepository","odata","DependencyResolver","odataCallerFormatter","targets","host","path","request","customHeader","getEstimation","url","payload","post","getValueWithUnit","unit","isNumber","has","unitValueMap","None","Thousand","Million","Billion","EstimationMeter","low","high","estimationLow","setEstimationLow","estimationHigh","setEstimationHigh","valLow","valHigh","HorizontalBarChart","chartData","horizontalBarChartdata","x","y","barHeight","hideTooltip","hideLabels","styles","chart","chartTitle","root","getReachEstimateStyles","reachEstimateControl","marginBottom","estimateHelpContent","estimateNote","panel","white","panelBody","reachEstimateTitle","impressionsCountMessage","convertToLocalStyle","helpbuttonStyle","impressionsCount","meterContainer","specificMeter","broadMeter","audienceSpecificLabel","audienceBroadLabel","arrow","impreAndClicksOptions","noDecimalOptions","formatBigDecimal","formatBigNumber","KEY","formatEstimation","estimationAudienceUnit","chartContainer","spacingVerticalMNudge","ReachEstimationBreakdown","ageOnlyEstimation","genderOnlyEstimation","locationOnlyEstimation","audienceOnlyEstimation","interestOnlyEstimation","_React$useState","_React$useState2","openItems","setOpenItems","estimations","ageEstimation","genderEstimation","locationEstimation","audienceEstimation","interestEstimation","yAxisCalloutData","sort","a","b","estimation","legend","Accordion","onToggle","_event","multiple","collapsible","AccordionItem","AccordionHeader","AccordionPanel","variant","barChartCustomData","dataPoint","displayName","titleReach","titleImpression","getEstValsAndText","est","estImpressionsHighVal","High","Value","estImpressionsHighUnit","Unit","estImpressionsHigh","estImpressionsLowVal","Low","estImpressionsLowUnit","estImpressionsLow","ReachEstimate","estimationData","isLoading","pricingModel","isImpressionTooSpecific","privacyResult","isCampaignCreationPlannerIntegrationEnabled","showImpressions","hasAudienceRemarketingList","showBreakdown","audienceSize","showPanel","estimatedReach","setEstimatedReach","_useState5","_useState6","estimatedReachLow","setEstimatedReachLow","_useState7","_useState8","estimatedReachText","setEstimatedReachText","_useState9","_useState10","estimatedImpression","setEstimatedImpression","_useState11","_useState12","estimatedImpressionLow","setEstimatedImpressionLow","_useState13","_useState14","estimatedImpressionText","setEstimatedImpressionText","_useState15","_useState16","errorMessage","setErrorMessage","updateEstimatesOnMeter","_getEstValsAndText","EstImpression","_getEstValsAndText2","estImpressionText","estImpressionLow","estImpressionHigh","estimationText","_getEstValsAndText3","EstAudienceSize","_getEstValsAndText4","estReachText","estReachLow","estReachHigh","errMessage","Spinner","size","SpinnerSize","large","ariaLive","labelPosition","HelpPopup","topic","topicKey","MessageBar","messageBarType","MessageBarType","warning","isMultiline","validatedReachEstimate","getLocationIds","bundleCountries","_locationTargets$curr","currentLocations","c","reduce","locationIds","cl","getRadiusCriterions","radiusTargets","CenterLatitude","RadiusCriterion","CenterLongitude","Radius","getExcludedLocationIds","_locationTargets$curr2","getAudienceCriterionIds","_ref7","isArray","audienceIds","audience","AudienceId","getInterestIds","_ref8","getExcludedInterestIds","_ref9","getOtherAudienceIds","_ref10","getExcludedOtherAudienceIds","_ref11","getAudienceIds","_ref12","getExcludedAudienceIds","_ref13","getAgeRanges","_ref14","ar","AgeRangesCampaignToAdInsight","getDevices","_ref15","campaignBiddingScheme","dealDetails","BidStrategyToDevices","getAdSchedule","_ref16","adSchedulesBulkUpsert","_a$Criterion$DayTimeC","StartHour","EndHour","formatReachEstimateData","_ref17","campaignSubtype","Age","Includes","Gender","Device","Location","Excludes","RadiusTargets","timeZoneMapper","getAccountIANATimeZone","isXandrDisplayAdsCampaign","CampaignSubTypeMapping","areCriterionTargetsSet","negativeTargets","isTargetSet","targetSetting","isEditFlow","getTargetSettingsFromCriterions","targetSettings","isTargetSetCompanyName","isTargetSetJobFunction","jobTargets","negativeJobTargets","isTargetSetIndustry","industry","negativeIndustry","isTargetSetAudience","getTargetsFromAdgroupModel","age","gender","location","Company","company","Industry","JobFunction","TargetingEstimation","types","audienceUsePrivacyCheck","_ref2$adGroup","_ref2$campaign","audienceCriterion","AudienceType","otherParams","AutoTargeting","CampaignBiddingStrategy","BidStrategy","getOtherParams","_useMemo","targetsForAudienceSize","bidKeyToSend","bidValue","Bid","Number","DailyBudget","_useMemo2","targetsForAudienceSizeEstimation","targetsForAudienceKPIEstimation","interestOnlyTargets","otherAudienceOnlyTargets","subTypes","_useTargetingEstimati","campaignSubTypes","urlBase","audienceEstimationUrl","audienceSizeEstimationUrl","privacyCheckUrl","setIsLoading","setData","setIsImpressionTooSpecific","setPrivacyResult","setAudienceSize","setAgeOnlyEstimation","setGenderOnlyEstimation","setLocationOnlyEstimation","_useState17","_useState18","setAudienceOnlyEstimation","_useState19","_useState20","setInterestOnlyEstimation","defaultPrivacyCheckResult","CheckResult","getAudienceReachEstimation","getAgeOnlyEstimation","getGenderOnlyEstimation","getLocationOnlyEstimation","getAudienceOnlyEstimation","getInterestOnlyEstimation","audienceSizeEstimation","audiencePrivacyCheck","ageOnly","genderOnly","locationOnly","audienceOnly","interestOnly","IsImpressionTooSpecific","err","finally","useTargetingEstimationCaller","_useTargetingEstimati2","isRecommendationDataLoading","estClick","EstClick","estCTR","EstCTR","estSpend","EstSpend","estAvgCPC","EstAvgCPC","dashColor","PredictiveTargetingDescription","query","PredictiveTargetingHeader","DataTrending","SectionShimmer","index","Shimmer","getCollapsiblePanelStyles","components","theme","borderBottom","themePrimary","themeDarker","textDecoration","getAdGroupStyles","collapsiblePanel","toggle","alignSelf","adgroupShell","adgroupOptions","estimationPart","estimationPartEditFlow","hide","Title","titleKey","titleText","PredictiveTargetingControlHeaderInternal","onToggleEnabledChanged","alwaysDisabled","isEnabled","doesAdGroupHaveAudienceTargeted","doesAdGroupHaveInterestTargeted","doesAdGroupHaveCompanyNameTarget","doesAdGroupHaveJobFunctionTarget","doesAdGroupHaveIndustryTarget","doesAdGroupHaveAgeTarget","doesAdGroupHaveGenderTarget","doesAdGroupHaveDeviceTarget","isVideoCampaign","Toggle","inlineLabel","e","checked","PredictiveTargetingControlHeader","formatPlacements","BoostAdunitIds","Productivity","adUnitIds","PlacementDataMapping","productivityIcon","HomePages","homePagesIcon","Games","thematicBundleIcon","placementsIdMap","placementsOptionStyle","renderPlacements","iconSectionStyle","iconSectionDisabled","iconSectionChecked","iconSection","placementCard","titleStyle","subheaderStyle","ValidatedPlacementsFunctionPicker","initialSelectedPlacements","placement","initialSelectedAdUnitIds","i","setSelectedKey","selectedPlacements","setSelectedPlacements","selectedAdUnitIds","setSelectedAdUnitIds","placementsDisabledStates","setPlacementsDisabledStates","savedSelectedPlacements","savedSelectedAdUnitIds","newPlacementsDisabledStates","onChangeAllSpecific","handlePlacementOnChange","isChecked","currentId","currentAdUnitIds","newSelectedPlacements","newSelectedAdUnitIds","placementsAllSpecificChoiceGroup","CampaignOData","call","currentAccount","PlacementExclusionLists","oolist","severeWarning","itemStyle","Url","placementsCheckboxes","currentItemStyle","itemStyleDisabled","itemStyleChecked","checkedState","disabledState","Checkbox","boxSide","onRenderLabel","AdSchedule","isCreate","hideUseCampaignSetting","showBidAdjustmentColumn","setAdScheduleViewCallback","isDateSettingsDisplayed","_ref3$adSchedules","campaignAdSchedules","ValidatedLegacyDateSetting","ValidatedLegacyAdSchedule","isCreation","hideMinuteOptions","entity","setAdScheduleView","campaignDayTimeRanges","TARGET_OPTIONS","freeze","BID_ONLY","TARGET_AND_BID","TARGET_OPTIONS_TO_TEXT","TARGET_OPTIONS_TO_DESCRIPTION","TargetItems","TargetOrBidSelector","styleClass","isInitialized","setIsInitialized","areTargetsLoaded","areTargetsSet","Field","RadioGroup","Radio","ValidatedTargetOrBidSelector","ValidatedAudiencePickerWithAudienceInfo","shouldHide","onAudienceTargetInfoChange","isAudienceCreationWorkflow","campaignGoal","boostConversionBasedSegmentEnabled","hideCustomSegmentsOption","currentLevelTargetInfo","AudienceTargetInfo","resourceName","isForVNext","initAudienceAssociationView","getAudienceTargetErrors","audienceList","customerMatchList","chain","excludeCustomerMatchList","includeCustomerMatchList","updatedItems","getSnapshot","off","currentTargets","isSame","every","on","destroyTargetTypeAsync","sortBy","_audience$Criterion3","newCriterion","createAsync","isEmpty","hydratedAudiences","_audience$Criterion2","_getPreExistingBids","_audience$Criterion","BidMultiplier","existingAudience","getPreExistingBids","stopPropagation","ValidatedAudiencePicker","noop","ValidatedAudiencePickerWithBidAdjustment","withBidAdjustment","typeToValidationKey","allAvailableSelection","initialSelection","selection","selectionWithBidAdjustment","DeviceCampaign","ValidatedBidAdjustment","bidAdjustmentRef","setBidAdjustmentRef","hasBidValueChanged","setHasBidValueChanged","getBidAdjustmentStyles","_props$data","criterionType","_props$readOnly","readOnly","_props$criterionLevel","criterionLevel","_props$isAudienceEdit","isAudienceEdit","view","bidAdjustmentGridview","criterionTypes","supportCashbackSettings","showExclusion","readonly","validationKey","childElementCount","innerHTML","append","el","negativeSelection","difference","currentNegativeTargets","targetKey","isTargetSame","TypeCriterion","isNegativeTargetSame","updatedCriterion","initialSelectionBidAdjustment","accumulator","currentValue","updatedValue","currentBidAdjustment","criterionList","finalizedBid","criterionBid","RemovedDeviceBidAdjustment","AddedDeviceBidAdjustment","getTargetCriterion","propKey","adGroupViewModel","campaignViewModel","negativeCriterionList","negSelection","overrideType","destroyAllAsync","createMultipleAsync","pickerContainer","ref","newRef","CustomAdapter","AdapterFactory","defaultValue","valueToInject","functionToInject","convertEventToValue","event","ValidatedLevelSwitch","withValidation","Switch","ValidatedAudienceInterestsWithAudienceInfo","interest","ValidatedAudienceInterests","ValidatedAudienceInterestsWithBidAdjustment","getPanelErrorProps","needsAttention","TargetingPreferencesInternal","adScheduleView","optimizedTargetingEnabled","setOptimizedTargetingEnabled","isDeviceCampaignToggleVisible","setIsDeviceCampaignToggleVisible","initialAdGroup","_ref3$campaign","isAdGroupEditFlow","XandrNegativeTarget","BoostConversionBasedSegment","ContentTargetingMSNSubcategories","_serverContext$Permis","IsAIMCampaignEnabled","customSegments","deviceTargetingCampaignLevel","campaignLevelDeviceTargets","_useCollapseState","useCollapseState","_useCollapseState2","allAdGroupTargetingSections","adgroupTargetingExpandedSections","setAdGroupTargetingExpandedSections","urlOptions","TrackingUrlTemplate","FinalUrlSuffix","UrlCustomParameters","urlOptionsDetails","getUrlOptionsDetails","webExclusionsError","setExclusionsCallback","exclusionsData","patchedData","exclusions","adgroupExclusions","currentLocationTargets","getCampaignSubType","isAdScheduleCampaignToggleVisible","shouldSelectAllDevices","CampaignSettings","adScheduleDetails","adScheduleDetailsMessage","getAdScheduleDetails","current","supportExclusion","ValidatedBootstrapPanel","defaultExpanded","BootstrapPanel","Heading","Collapse","Body","allPanelItems","checkItems","skipItemsTypeCheck","activeKeys","setActiveKeys","ValidatedPanel","TextTitle","panelKey","formatInterests","showBidAdjustments","isAIMCampaignEnabled","autoTargeting","campaignBiddingStrategy","formatAudience","isIMARedesignEnabled","formatDevices","devices","isCTVSupported","deviceRestrictions","validationPropsField","defaultSelectAll","formatCompany","ValidatedCompanyPicker","formatIndustry","ValidatedIndustryPicker","formatJobFunction","ValidatedJobFunctionPicker","formatCustomSegment","headingRole","headingLevel","noOverflowHidden","ValidatedCustomSegmentsPicker","getContentTargetingPlacementsSummaryText","ContentTargetingPlacements","msnSubcategoriesEnabled","attentionBeaconProps","getExtraProps","ValidatedUrlOptionsParameter","ROTATION_OPTION_TO_TEXT","ValidatedAdRotation","ServerValidatedWebExclusions","showSiteExclusion","ScopeLevel","AdGroup","exclusionData","webExclusionPropertyVal","ValidatedFixedPanel","intent","layout","MessageBarBody","TargetingPreferences","ERROR_ENTITY","Ad","CampaignLocation","CampaignRadius","CampaignNegativeLocation","CampaignLocationIntent","CampaignDayTimeCriterion","CampaignNegativeWebpage","AdGroupLocation","AdGroupRadius","AdGroupNegativeLocation","AdGroupLocationIntent","AdGroupDayTimeCriterion","AdGroupNegativeWebpage","AdGroupLocationTargetError","BidRecommendationInfo","bidRecommendationRange","validationResult","isValidated","messageData","formatCurrency","Alert","Component","DefaultBidWithRecommendation","_useBidRecommendation","checkIsBidInRecommendedRange","useBidRecommendation","_useBidRecommendation2","setValidationResult","nextValue","nextValidationResult","AudienceBidValue","ceilingValue","floorValue","_ref$stopPropagation","_ref$isEdit","isFCapEnabled","useCampaignBidTypeInfo","placeholderText","adGroupBidProp","_getBidRange2","CampaignBidStrategyName","bidStrategy","getBidTitleDetails","ValidatedFrequencyCapping","XandrBidValue","isPremiumStreaming","shouldUsePredefinedFrequencyLimit","bidType","bidRange","VideoViewsCPVBidRange","dealMinimumBid","KeywordCPMBidRange","bidValidationProps","CeilingValue","getNetflixFrequencyCapping","adGroupLocationCriterions","anyComp","entityIs","ServerValidatedLocationTargetSetting","withUnvalidatedControlErrors","ValidatedLocationTargetSetting","ContextualTargetWithStyle","withDefaultStyles","ValidatedContextualTarget","targetsContainer","treeViewContainer","selectionContainer","paddingRight","contextualTargetTitle","AdGroupStepShell","_data$campaign","_data$campaign2","_data$adGroup","_data$campaign3","_data$adGroup2","onDataChangeProp","isMounted","useIsMounted","bundleLocationCriterions","BoostPublisherIds","BoostAccountIds","BoostTriggerIds","contextualTargets","locationRestricted","allAdGroupSettingsSections","adGroupSettingsExpandedSections","setAdGroupSettingsExpandedSections","AgeGenderDisclaimer","PTPerfEstimationUIUpdate","CampaignCreationPlannerIntegration","CampaignCreationPlannerIntegrationMultiAd","AudienceUsePrivacyCheckV2","_serverContext$Netfli","NetflixEnabledCountryCodes","useCampaignLevelDates","allBasicExpand","collapseExpander","shouldServeOnMSAN","campaignShouldServeOnMSAN","isXandrServing","isXandrCampaign","isAudienceAdGroupCreate","isAudienceAdGroupEditFlow","isDealFlow","isDealTypeRestricted","shouldShowDealLocationTarget","hideLocationTarget","hideGenreTarget","Genre","genreOptions","getDealGenreOptions","getGenreOptions","dealCountryCode","TwoLetterCountryCode","dealSupportedLocationType","SupportedLocationType","showAllValidationErrorsMemo","BidValue","updatedData","isValidTargets","NetflixEnabledCountryCodesArr","split","BundleCountriesCodesArr","expiredAdGroupError","bidAmountsLessThanFloorPriceAdGroupError","shouldShowNetflixTC","some","bundleCountry","indexOf","RemainingCharsValidatedTextField","adGroupNameProp","bidValueIcon","startDateEndDateIcon","allowStartDateSelection","allowNoEndDateSelection","allowEndDateSelection","placementTargetIcon","placementTargetingDetails","ValidatedBoostPlacementTarget","hideHeader","boostSetting","publisherIds","accountIds","triggerIds","contextualTargetIcon","contextualTargetDetails","expand","expandKey","getLocationTargetTitleDetails","locationTargetIcon","isRadiusExcludeEnabled","allowNegativeLocationTargeting","showSearchTypeOptions","defaultSelectedSearchType","SEARCH_TYPE","Boundary","isBrandAwarenessCampaignScenario","hideIntent","isAdGroupLevel","showUserParentLevelToggle","allowBidAdjustment","dealInfo","isForDeal","NetflixTCAgreement","formatGenders","genderTarget","genders","formatAgeRanges","ageTarget","AgeRange","formatGenreTargets","ValidatedGenreTargets","adScheduleIcon","dismissible","accountId","customerId","DealImpressionPanel","readCampaignCriterions","Campaigns","CampaignCriterions","$cast","where","readDayTimeCriterions","viewModelToBulkModelForAdSchedules","CampaignName","readLocationCriterions","readDeviceCriterion","adGroupId","defaultNativeAdGroup","defaultProperties","setCustomProperties","defaultTargetingProperties","setCustomTargetingProperties","defaultDealAdGroup","defaultCTVAdGroup","useDefaultAdGroup","useDefaultAdGroupForFlow","_ref$getDefaultAdGrou","_ref$setCustomPropert","_ref$setCustomTargeti","defaultAdGroupData","defaultTargeting","useAdGroupRepository","ServicesEndpoints","odataUrl","CampaignAPI","isOnebox","toString","_useAudienceData","useAudienceData","postponeFetch","pathOverride","audienceType","getAudienceData","inMarketAudienceRedesignEnabled","isAdGroupPublishing","loadAudienceData","allSettledPromiseWrapper","promises","wrappedPromises","p","reason","savedCampaign","savedAdGroup","loadPromises","bundleCountriesAndLocationCriterions","loadBundleCountries","loadCampaign","campaignLocationCriterions","campaignReadLocationCriterions","campaignDeviceCriterions","campaignReadDeviceCriterions","campaignDayTimeCriterions","campaignReadDayTimeCriterions","extend","getDealDetails","loadAdGroup","placementCriterions","readPlacementCriterions","locationCriterions","dayTimeCriterions","targetCriterions","readTargetingCriterions","audienceCriterions","readAudienceCriterions","exclusionRepository","resultMap","acc","_ref3$adGroup","_ref3$locationCriteri","_ref3$dayTimeCriterio","_ref3$targetCriterion","_ref3$audienceCriteri","_ref3$exclusions","_ref3$exclusions2","_ref3$exclusions3","campaignExclusions","_ref3$placementCriter","_ref3$dealDetails","modelToViewModelForAdGroup","adGroupModel","campaignModel","locationCriterionsModel","campaignLocationCriterionsModel","dayTimeCriterionsModel","targetCriterionsModel","audienceCriterionsModel","placementCriterionsModel","isAudienceAds","isDisplayAds","isVideoAds","isEnableMSANDisplayCampaignsEnabled","isEnableMSANVideoCampaignsEnabled","separateIMA","constraintModel","modelToViewModelForCampaign","each","cr","getErrorsPlaceholders","savePromises","saveExclusionsData","CampaignId","AdGroupId","AdvancedSettings","ExcludedSites","saveExclusionsPromise","saveExtensions","reject","_result$reason$server","NegativeSitesResult","EntityErrors","disclaimerSettingsStyles","_ref$iconFontFamily","iconFontFamily","float","entitySelectorStyle","paginationStyle","disclaimerPanelStyles","_ref2$iconFontFamily","alertStyle","neutralSecondary","cursor","resize","gridTemplateColumns","getCampaignStyles","borderTop","budgetContainer","campaignShell","disclaimerContainerWrapper","XandrBudgetAndBidStrategy","minBudget","topicForBidStrategy","ServerValidatedLegacyBudget","budget","validationDailyMinBudget","hideBudgetMinRecommendation","dateManagementSelector","stackStyles","flexShrink","stackItem","InfoLabel","infoTopic","HelpButton","AudienceBudgetBidStrategyInternal","setBudgetView","hideBidStrategy","showBudgetTypeSelection","allowBudgetTypeSelection","allowSharedBudgetLibrarySelection","bidStrategyName","sharedBudgetRef","setSharedBudgetRef","sharedBudget","sharedBudgetView","SharedBudgetSwitchView","newFactory","factory","accountCurrencyCode","withRealTimeUpdates","onBudgetChange","getValues","validate","BudgetId","update","budgetView","grid","gridView","viewModel","sharedBudgetSwitch","subscribe","isCPSSelected","sharedBudgetIsNotAllowedWarning","budgetHeader","ValidatedLegacyBidStrategy","initialValue","i18nNewDesign","validateWithBudget","budgetAmount","protoTypes","PropTypes","isRequired","BidStrategyId","BidStrategyName","AudienceBudgetBidStrategy","uiblockerStyle","containerBudgetStyle","sharedBudgetGridWrapper","glyphIconStyle","BudgetBidStrategyDetails","budgetTitleDetails","currencySymbol","getCurrencySymbol","individualBudget","bidStrategyDetails","CampaignGoali18nMap","CampaignGoalTypeBoostV2","campaignGoalText","getBidAdjustmentStylesTargetStyles","audienceModalStyles","modalWidth","audienceExpressionStyle","audienceCombinedListStyle","criterionSettingIndustryStyles","targetGridWidth","audienceAssociationSectionStyle","singleListBoxWidth","audienceTargetsSettingsStyles","audienceBudgetBidsStyles","commonDoubleListBoxStyle","tableStyle","searchboxStyle","fontFamily","editTargetButtonContainer","noTargetSelected","criterionTypeToString","CompanyName","criterionsToFetch","changedKey","validationKeys","criterionsByType","adjustedLocations","modelForParsing","CriterionBid","Multiplier","modelToViewModelForLocationTargets","overrideOriginalBidAdjustment","all","fetchCriterions","initializeWithhAdGroupAudience","allKeys","getAllNoneEmptyTypeKeys","document","createElement","cssText","CallToActionOptOut","isCallToActionOptOut","IsCallToActionOptOut","getAssociatedDisclaimer","repository","association","findAll","disclaimerdata","ValidatedDisclaimerExtension","displayPlusDisclaimerRef","useRef","DisclaimerAdsEnabled","associatedDisclaimer","validateAndWarn","AdExtensionAssociations","disclaimerAdsEnabled","setDisClaimerAdsEnabled","AdsCampaignDisclaimers","selectedDisclaimer","onDisclaimerCheckboxChange","isForNew","dateSettingsManageAtAdGroupLevelText","dateManagementSelectorContainer","DATE_MANAGEMENT_OPTIONS","CampaignLevel","AdGroupLevel","DateManagementSelector","selectionValue","DateManagementInfo","AudienceDateSetting","displayDateManagementSelector","allowDateManagementSelection","BudgetType","getCurrentDate","validateLifetimeBudgetDateSettings","budgetRangeError","numberOfDaysBetweenDates","replace","validateLifetimeBudgetDateRange","logActivity","action","dateSettingWithDefaultStartDate","amendedData","LegacyDateSetting","ValidatedAudienceDateSetting","WebsiteLists","_ref$selectedExclusio","selectedExclusions","_ref$onExclusionsChan","onExclusionsChange","WebsiteListSelector","listType","selected","CampaignStepShell","_ref3$DynamicPermissi","IsConversionAssociationWarningEnabled","ConversionAssociationWarning","IsCampaignLifetimeBudgetEnabled","initialCampaign","_wizardData$lifetimeB","lifetimeBudgetFlowData","_lifetimeBudgetFlowDa","isBudgetTypeEditable","_lifetimeBudgetFlowDa2","isDateManagementEditable","_getCampaignPanels","_serverContext$Dynami2","AudienceMMACTAOptOut","EnableDoubleVerify","IsMSANDisclaimerEnabled","IsMSANISPOTEnabled","getCampaignPanels","isAudienceCampaignEditFlow","isAudienceCampaignCreate","isCTVOrDealFlow","isLifetimeBudgetFeatureEnabled","allowStartDateEdit","onExclusionsListSelected","exclusionsList","websiteExclusionLists","list","advertiserCustomerId","AdvertiserCustomerID","optionsShown","setOptionsShown","dateSettings","dateSettingsDetails","getAudienceDateSettingsDetails","isLifetimeBudget","disclaimerRepositoryRef","Repository","DisclaimerAdExtension","skipExtensionCache","DisclaimerStringMap","devicesDetails","getDeviceDetails","filterOutBidPanel","CpvBid","getLaterDate","pricingModelUpdate","PricingModel","getMessageType","customConfirmMessages","onAdGroupValidate","allCampaignSettingsSections","campaignSettingsExpandedSections","setCampaignSettingsExpandedSections","_useCollapseState3","_useCollapseState4","allAdvancedCampaignSettingsSections","advancedCampaignSettingsExpandedSections","setAdvancedCampaignSettingsExpandedSections","advancedSettingsExpand","WebsiteExclusionLists","BudgetAndBidStrategy","setting","verifiedTrackingSettingsValidationProps","campaignFromData","VerifiedTrackingSettings","initialCampaignLevelDeviceTargets","setAssociatedDisclaimer","disclaimer","campaignNameProp","budgetBidStrategyIcon","conversionGoalsIcon","ValidatedConversionGoals","showTrackingStatusIcon","bidAdjustmentIcon","AllowDisclaimerEnabled","usePanel","isNativeAd","CallToActionImg","_data$websiteExclusio","UrlOptionsImg","phoneDesktopIcon","iconStyles","ValidatedBidAdjustmentGrid","webExclusionsIcon","showIPExclusion","showAccordion","siteInputProps","ipInputProps","headingClassName","Ruler","formatVendorSettings","ThirdPartyMeasurementV3WithValidation","AdGroupNegativeReferenceId","_ref$overrideType","AdGroupName","viewModelToBulkModelForBidAdjustmentUI","ageTargets","negativeAgeRanges","negativeGenderTypes","industryTargets","negativeIndustryTargets","ageTargetCriterions","negativeAgeTargetCriterions","genderTargetCriterions","negativeGenderTargetCriterions","jobTargetCriterions","negativeJobTargetCriterions","industryTargetCriterions","negativeIndustryTargetCriterions","companyNameTargetCriterions","negativeCompanyNameTargetCriterions","useCampaignRepository","isPublishing","viewModelToBulkModelForDisclaimerAssociation","viewModelToBulkModelForVerifiedTrackingSettings","saveAdGroupsPromise","customTargetingBulkModel","useCampaignEditRepository","_ref2$DynamicPermissi","isAudienceMMACTAOptOutEnabled","isAudienceMMACTADefaultOptOutEnabled","AudienceMMACTADefaultOptOut","isWebsiteExclusionListsEnabled","isCTVCampaignFlow","isDealCampaignFlow","getListsByCampaignId","saveWebsiteExclusionListsPromise","AdvanceSettings","Exclusions","ExcludedIPs","associateListsToCampaign","BudgetBidCampaignImportNotificationActivity","createScenarioAndActivity","scenarioName","activityName","stepContexts","CAMPAIGN_EDIT","initialData","showBudgetBidCampaignNotifications","campaignItemList","oldBudget","newBudget","oldBidStrategy","newBidStrategy","NegativeIPsResult","useSummarySchemaData","isAudienceCampaignFlow","timeDisplayType","setTimeDisplayType","numberOfAds","isMultiAdsAudienceCampaign","preferencesService","_preferencesService","initialize","isTwelveHourDisplay","findByName","Data","locations","loc","hideGenreTargetForDeal","isUseCampaignLevelDates","adsPanel","isRendered","adCreation","numAds","adGroupName","locationTargeting","genderTargeting","ageRangeTargeting","genreTargeting","predictiveTargeting","isPredictiveTargetingEnabled","advancedTargetingSeparator","companyTargets","negativeCompanyTargets","jobFunction","adScheduleAdGroup","useSearcherTimeZone","AdScheduleUseSearcherTimeZone","campaignName","startEndDatesCampaign","isDateLevelDisplayed","buildSchemaData","SummaryStepShell","schemaData","onAdsHeaderActionClick","onTargetingHeaderActionClick","onCampaignSettingsHeaderActionClick","separatorStyles","actionButton","iconName","dynamicProps","targeting","buildDefaultDataProperty","hd1","campaignSettings","buildSchema","GeneratedUI","customComponentTypes","summaryPageComponentTypes","useSummaryRepository","dayTimeCriterionsCampaign","readDayTimeCriterionsCampaign","saveJustAdGroup","useSelectedAdFormatState","updateSelectedAdFormat","selectedAdFormat","MultiAdFormatStepShell","_ref$adsType","adsType","_useSelectedAdFormatS","_useSelectedAdFormatS2","setSelectedAdFormat","isLoaded","setIsLoaded","isDisabled","setIsDisabled","onFormatChange","ACTIVE","AdFormatOption","SingleMultiAdFormatStepShell","isMultipleNative","useMultiAdFormatRepository","isMultipleFlow","nativeAdSave","multipleNativeAdSave","displayAdSave","videoAdSave","dataToSave","adResource","ResourceIdentifier","deleteAds","adsViewModel","adViewModel","fields","viewModelToModelForAdToDelete","bulkUpdate","bind","DisplayAdPreview","resizeImageHeightForThumbnail","image","cropHeight","cropWidth","aspectRatio","min","CroppedImageView","originalWidth","resizeImageHeight","SourceWidth","SourceX","cropX","SourceY","cropY","NativeAdPreview","imageContainer","nativeAdImage","nativeAdImageForeground","textOverlay","Caption2","VideoAdPreview","controls","kind","srcLang","default","getConfigByType","ContentViewRegular","ImageMultipleRegular","VideoRegular","getDescriptionByType","imageCount","headLinesCount","longHeadLinesCount","LongHeadlines","descriptionCount","headlineCount","descCount","_ad$data$image","targetWidth","targetHeight","duration","videoDuration","minutes","floor","seconds","padStart","getAdThumbnailStyles","objectFit","backgroundImage","previewDescription","getAdsContainerStyles","menuButton","menuContainer","toolbar","radioGroup","radioOption","emptyViewContainer","FilterFormat","native","MultiAdFormatAdsContainer","filterFormat","setFilterFormat","onClickCreateNewAd","Menu","MenuTrigger","MenuButton","MenuPopover","MenuList","MenuItem","ImageRegular","change","horizontalAlign","DesertSvg","adType","editWizardTypeList","StepConfig","StepConfigMultiAdFormat","DisplayPlusWizardInternal","wizardType","flowType","routeToNavigateToWhenDone","initialWizardData","isEnableMultiAdFormat","isConversionAssociationWarningEnabled","wizardPerfMarker","createChild","initialStep","step","machineOptions","guards","needsConfirming","getNeedConfirming","getStepConfigMultiAdFormat","getStepConfig","config","initialFlowFactors","getFlow","actions","onDone","onExited","attachStepActivities","setClarityTag","DisplayPlusCampaigns","PerformanceMarkerProvider","immediateDone","Scenario","MmpFetchProvider","Wizard","WizardPerfMarker","wizardName","wizardMarker","LayoutContainer","template","DefaultTemplate","Layout","StepContainer","BusyBlocker","loadingText","CancelWizardDialog","ConfirmWizardDialog","useConfirmDialogConfigWithLogger","DisplayPlusWizard","withPermissions","withLoggingContext","withRecommendationContext","spacingVerticalL","spacingVerticalNone","SaveAndPublish","isBlocking","FETCHING","onNextClicked","SAVE_AND_EXIT","buttonText","getCurrentStepId","PrimaryButton","SaveAsDraft","_useWizardService2","SaveAndExitButton","_useWizardService3","SkipAdCreationButton","_useWizardService4","SAVE_EMPTY_AND_NEXT","NextButton","_useWizardService5","currentStepId","SAVE_AND_NEXT","BackButton","_useWizardService6","onBackClicked","BACK","DisplayPlusStepFooter","nextButtonText","nextDisabled","backButtonText","cancelButtonText","hideBackButton","showAWFWarning","AWFWebExclusionsWarning","isFirstStep","getIsFirstStep","isLastStep","getIsLastStep","currentStep","isInternalUser","useIsInternalUser","wasAdAlreadyCreated","MessageBarTitle","CancelButton","EditFooter","saveAndExitButtonText","AdGroupCreationFooter","StepList","currentFlow","getCurrentFlow","displayMode","useResponsiveSize","Constants","ResponsiveSizeBreakpoints","stepListConfig","getStepListConfig","getDefaultOnItemClickFn","toStep","firstSubStep","s","isBehind","ResponsiveStepList","getOnItemClickFn","DisplayPlusCampaignWizard","withSiteMap","siteMap","getRoutePathById","displayPlusCampaignType","getDisplayPlusCampaignType","videoDeal","ErrorBar","DisplayPlusEditWizard","useDisplayPlusEditWizardStyles","wizardWrapper","DisplayPlusEditCampaignWizard","currentCampaign","isAudienceNativeAdsCampaign","isAudienceCTVCampaign","isAudienceDealCampaign","getWizardType","mergeClasses","DisplayPlusEditAdGroupWizard","currentAdGroup","DisplayPlusCreateAdGroupWizard","UnstyledCompanyPicker","_validationProps$data","companyAssociationRef","setCompanyAssociationRef","companyAssociationView","companyView","CompanyNameTargetSetting","showBidOnlyNote","defaultBidAdjustment","companyNameTarget","CompanyNameCriterion","negativeCompanyNameTarget","companies","_ref6","isCompanyTargetSame","pluck","isNegativeCompanyTargetSame","_ref8$BidAdjustment","companyTarget","criterionData","companyNameCriterion","criterionHelper","buildLinkedInCriterion","criterionSettingCompanyStyles","contentTargetingGroups","placementId","CheckOOInventoryBlocklists","useContentTargetingStyles","contentTargetingSpecificOptionsContainerStyle","contentTargetingSpecificOptionContainerStyle","spacingHorizontalXS","spacingHorizontalNone","spacingVerticalXS","spacingVerticalS","strokeWidthThin","colorNeutralStroke1","controlWrapperStyle","labelDescriptionStyle","colorNeutralForeground3","entireSpecificSelectionStyle","ENTIRE_MICROSOFT_NETWORK","SPECIFIC_PLACEMENTS","EXCLUDED_PLACEMENT_IDS","isTheEntireMicrosoftNetworkSelected","EntireNetworkOrSpecificSelection","entireSpecificSelection","onChangeEntireSpecific","allPlacementsLabel","allPlacementsSubLabel","specificPlacementsLabel","specificPlacementsSubLabel","Body1Stronger","ContentTargetingSpecificPlacements","groups","onToggleContentTargetingPlacement","isOnlyOnePlacementSelected","group","placementsSectionLabel","placementOptionsLabel","filteredContentTargetingGroups","setEntireSpecificSelection","v","PlacementId","radioSelection","_e","UnstyledIndustryPicker","industryAssociationRef","setIndustryAssociationRef","industryAssociationView","industryView","IndustryTargetSetting","industryTargetsBidAdjustment","IndustryCriterion","targetWithBidAdjustment","searchView","searchTreeInitializationPromise","treeView","node","child","innerChildren","innerChild","flatIndustryTargets","flatten","selectedIndustries","industryCriterion","selectedNegativeIndustries","trigger","UnstyledIndustryPickerWithBidAdjustment","UnstyledJobFunctionPicker","jobFunctionAssociationRef","setJobFunctionAssociationRef","jobFunctionAssociationView","jobFunctionView","JobFunctionTargetSetting","jobTargetBidAdjustments","jobTarget","JobFunctionCriterion","negativeJobTarget","initializeSearchDataTask","allJobTargets","searchResultView","selectedJobTargets","jobFunctionCriterion","selectedNegativeJobTargets","UnstyledJobFunctionPickerWithBidAdjustment","criterionSettingJobFunctionStyles","TargetEditButton","isBidAdjustmentsVisible","isTargetSelected","inline","targetsFieldNameList","HOC","setIsBidAdjustmentsVisible","targetInfo","setTargetInfo","bidAdjustmentclasses","_props$validationProp","any","targetsFieldName","updateTargetInfo","info","bidAdjustmentView","BidAdjustmentView","updateBidAdjustmentVisibility","isVisible","targetEditButtonProps","getNativeAdsStyles","extraPlacementInfo","MSANV2","MSEdgeCarousel","MSANBanner","MSANRiver","MSNCarousel","MSNPartnerStripe","MSNRestoday","MSANRectangle","MSEdgeMobile","responsiveMsanMMAConfig","placementSetName","placementTypes","msanMMAV2Config","msanMMAConfig","responsiveMsanMMABoostConfig","responsiveMsanMMABoostConfigV2","msanMMABoostConfig","msanMMABoostConfigV2","mma_191x100","edge_178x100","msan_191x100","msan_150x100","getImageExperienceStyles","isMMAV2Enabled","getNativeAdPanels","isVideo","isDisplay","multiAdFormatAdPanels","advancedPanels","AdvancedURLOptionsForVideo","AdvancedURLOptionsForDisplay","isImpressionTrackingForDisplayAndVideoEnabled","panels","basicPanels","IsMSANLogoAndCTAForMMAEnabled","ValidatedCallToAction","languageValue","ctaText","ctaAriaText","ValidatedLegacyCallToAction","isBoostScenario","isBoostCustomCTAEnabled","formatImpressionTrackingSetting","impressionTrackingUrls","_extractImpressionTra","extractImpressionTrackingSetting","_extractImpressionTra2","firstUrl","secondUrl","getImpressionTrackingComponent","validatedImpressionTrackingSetting","impressionTrackingSettingRef","setImpressionTrackingSettingRef","ImpressionTrackingUrls","window","globalLegacyI18n","i18nMerged","mergeI18n","impressionTrackingViewReact","impressionTrackingView","ImpressionTrackingView","initialImpressionTrackingUrls","isIASSectionVisible","isVerticalUrlInput","assign","adEditorOverrideStyle","disclaimerInfo","ValidatedAnchorAd","BoostAnchorsData","BoostAnchors","defaultSelectedKey","onUpdate","nativeAdMobileFinalUrlsProp","propertyIs","ServerValidatedMobileFinalUrl","ValidatedMobileUrl","impressionTrackingSettingsProp","ValidatedImpressionTrackingSetting","ImpressionTrackingSetting","mobileFinalUrls","trackingUrlTemplate","finalUrlSuffix","urlCustomParameters","verifiedTrackingSettings","CallToAction","CallToActionText","CallToActionAriaText","setNewCTACallback","shouldShowDisclaimerPanel","allAdvancedSettingsSections","advancedSettingsExpandedSections","setAdvancedSettingsExpandedSections","isThirdPartyMeasurementEnabled","allAdvancedSettingsExpand","advancedSettingsSectionExpanded","setAdvancedSettingsSectionExpanded","onAdvancedSettingsSectionToggle","expanded","mobileFinalUrlValidationProps","MobileFinalUrls","mobileFinalUrlDetails","isEmptyUrl","first","serverValidatedMobileFinalUrl","validateOnRender","validateOnDomain","validatedUrlOptionsParameter","thirdPartyMeasurementWithValidation","ThirdPartyMeasurementComponentWithValidation","ThirdPartyMeasurementV2WithValidation","ThirdPartyMeasurementWithValidation","callToAction","language","cta","anchorAd","MobileFinalUrlImg","relativePosition","ImpressionsTracking","formatThirdPartyMeasurementSetting","ConnectedImage","Disclaimer","HeadlinesWithRecommendationPrefillInternal","currentData","withInlineRecommendations","isAudienceAd","textAssetCollectionConfig","getTextAssetCollectionConfigByFeature","featureName","headlineConfig","getTextAssetCollectionConfig","headlinesRecommendationText","headlines","rec","prevHeadlineRecommendation","setPrevHeadlineRecommendation","TextAssetCollectionWithRecommendations","isOptional","showDeleteButton","enableCopilotRecommendations","HeadlinesWithRecommendationPrefill","LongHeadlinesWithRecommendationPrefill","longHeadlineConfig","longHeadlinesRecommendationText","longHeadlines","prevLongHeadlineRecommendation","setPrevLongHeadlineRecommendation","LongHeadline0","DescriptionsWithRecommendationPrefill","descriptionsConfig","descriptionsRecommendationText","descriptions","prevDescriptionRecommendation","setPrevDescriptionRecommendation","TextAssetCollectionWithRecommendationPrefillInternal","fetchRecommendationAssets","cancelFetchRecommendationAssetsJob","currentHeadlines","currentLongHeadlines","currentDescriptions","textAssetConfig","TextAssetCollectionWithRecommendationPrefill","TextAssetCollectionWithCoPilotInternal","setAddNewShortHeadlinesCallback","setAddNewLongHeadlinesCallback","setAddNewDescriptionCallback","headlineAssetCollection","HeadlineAssetCollection","longHeadlineAssetCollection","LongHeadlineAssetCollection","descriptionAssetCollection","DescriptionAssetCollection","TextAssetCollectionWithCoPilot","nativeAdHotspotsProp","andComp","ValidatedHotspot","hotspots","HotspotPanel","onUpdateHotspots","newHostpots","missField","glyph","actionText","uri","hotspotStrings","hotspot","desc","uniq","validateHotSpot","enableHotSpotPlacement","hideTitle","showHotspotCount","getMultiAdVideoPreviewStyles","adPreviewTitle","previewContainer","adPreviewHeader","adPreviewRoot","previewTag","MultiAdVideoPreview","videos","_props$selectedVideoI","selectedVideoIdx","selectedVideo","setSelectedVideo","videoRef","source","videoTemplateUIEnabled","VideoTemplateUI","ClipchampPlayer","videoUrl","TAB_IMAGE_ADS","TAB_VIDEO_ADS","videoTypesWithOrder","advancedSettingsStyles","nativeAdBusinessNameProp","nativeAdFinalUrlsProp","ValidatedFinalUrlWithStoreURL","withFinalUrlRecommendationUpdate","ValidatedFinalUrlWithRecommendations","ServerValidatedFinalUrl","getPlacementCount","IsMMAV2Enabled","DisplayPlusNativeAdsInternal","setAds","useClipchamp","UAPLNativeAdIntegration","CopilotCTALogoGeneration","_DynamicPermissions$I","ImageFittingMVP","_DynamicPermissions$I2","ImageFittingExlcudeMAE","ImageFittingUnifiedImageROI","AdPreviewRefresh","finalUrls","FinalUrlForRecommendation","images","LegacyResponsiveAd","nativeAdPanels","allAdSettingsSections","adSettingsExpandedSections","setAdSettingsExpandedSections","finalUrlSection","finalUrlExpandedSection","setFinalUrlExpandedSection","maxUploadNum","addNewDescriptionCallback","addNewShortHeadlinesCallback","addNewLongHeadlinesCallback","finalUrlForCopilotRecommendations","setFinalUrlForCopilotRecommendations","setSelectedVideoIdx","selectedValue","setSelectedValue","imageExperiencePortalContainerState","setImageExperiencePortalContainerState","previewImageId","cropImageObj","previewImagesSharedState","setPreviewImagesSharedState","imageExperienceAddNewImageCallback","setImageExperienceAddNewImageCallback","newCTACallback","_useState21","_useState22","assetAIEnhancementEnabled","setAssetAIEnhancementEnabled","_useState23","_useState24","assetAIEnhancementSettingsCalled","setAssetAIEnhancementSettingsCalled","_useState25","_useState26","useBrandKit","setUseBrandKit","imagesContainerRef","logosContainerRef","portraitContainerRef","shouldLogosBeEnabled","shouldPortraitBeEnabled","collectionsSummary","collection","displayText","displayTextSingular","textCardSummaryDetails","getTextCardSummaryDetails","hotspotSummaryDetails","allAssetsExpand","finalUrlValidationProps","debounce","textAssetsValidationProps","ctaValidationProps","onTabSelect","tab","onReset","ImageAssets","Headline1","Headline2","Description1","_useState27","_useState28","setShouldShowDisclaimerPanel","_useCopilot","useCopilot","currentCTA","skipBusinessNameRecommendation","copilotBanner","suggestionPoller","updateFinalUrlForCopilotRecommendations","urlWithoutScheme","onFinalUrlFocusOut","onFinalUrlKeyUp","finalUrlAdditionalProps","onBlur","onKeyUp","updateFinalUrlCallback","newFinalUrls","getAssetEnhancementSettings","settings","AssetAIEnhancementOptout","serverValidatedFinalUrl","additionalProperties","customUrlProtocol","imageListPortalContainer","ImageListPortalContainerWithControlErrorHandling","containerRef","containerState","isLogos","PerfMaxImageSuggestionCarousel","addImageCallback","isCopilotRecommendations","storeBackedBusinessName","ValidatedStoreBackedBusinessName","advancedSettings","placementCustomizationPredicate","adPreviewConfig","placementConfig","adPlacementsGroupType","AdPlacementsGroupType","msanImageAd","msanBoostImageAd","msanV2ImageAd","adPreview","PerfMaxAdPreviewComponent","PerfMaxAdPreviewUAPL","PerfMaxAdPreview","PerfMaxAdPreviewElement","imageList","updateImageList","shortHeadline","longHeadline","displayUrl","isMSANAd","enableAutoPlay","customPlacementHeaderClassName","customPlacementContainerClassName","TabList","Tab","validatedImageExperienceWrapper","mappedPreviewImageSharedState","ValidatedImageExperienceWrapper","imagesContaineRef","logosContaineRef","isLogoEnabled","isBoostPortraitEnabled","updatePortalContainerState","isCombinedMsanAndMmaAspectRatios","customMaxImageCount","isMSANBoostEnabled","UAPLPMaxIntegration","showCopilotOptionForImage","IsBackgroundSceneEnabled","customAssetLibraryEventHandler","onUploadImage","anActivity","imgId","onImageListUpdate","newImageList","curImageList","newImageIdList","img","curImageIdList","newImages","supportImageUpscale","AudienceImageUpscale","textAssetCollectionWithCopilot","logosContainer","portraitImageContainer","videosContainer","videoAd","CampaignFetchProvider","ValidatedVideoExperienceWithRecommendationFetch","multiVideoMode","allowedVideoSizes","disableRemoveAll","hideRatioLabel","videoExperienceCircleUploadType","disableUploadTextField","videoPickerContainerHeight","copilotEnabled","CopilotRepositoryProvider","finalUrl","locale","getLocale","recommendationType","enableLogoAndCTA","getFinalUrlCardSummaryDetails","FinalUrlImg","ImageAssetsImg","iconAltText","ImageListSummaryCardDetails","limit","VideoAssetsImg","isVideos","LogoAssetsImg","isPortrait","TextAssetsImg","hotspotImg","BusinessNameImg","ValidatedLegacyCallToActionWithLanguage","isDisplayPlusMMA","withActivityContext","withBannerService","modelToViewModelForBulkErrors","bulkUpsertEntityErrorMap","errorProcessor","identity","getBulkApiErrors","errorType","mappedErrorType","mapBulkUpsertErrors","formatIntoTextArrayString","texts","res","textValue","entitySchema","viewModelToModelForAd","_ref$isImageFittingEn","isDeletedEntities","subType","Videos","HotSpots","ActionText","Description","Uri","Glyph","Placement","CallToActionLanguage","getVerifiedTrackingSettingWrite","originalData","UiUnsupportedRatios","isBoostCampaign","flattenedIncludedImageAssetList","getFlattenedImageAssetList","updateAssetsIdsAsync","updates","imageToGenerateThumbnail","originalThumbnailAsset","overrideInfo","copyThumbnailLookToNewImage","bingSrc","portraitImage","setMTImageModel","imageArray","imageObj","isIncluded","isMultimediaAdinMSANEnabled","isMultimediaAd","isBoostPortraitImageEnabled","isBoost200x100ImageEnabled","IsBoost200x100ImageEnabled","isBoostNewAspectRatioSupportEnabled","IsBoostNewAspectRatioSupportEnabled","mtModel","getProcessedDataAsync","processTextAttribute","jsonTextAttribute","object","parse","textAttribute","bulkModelToViewModelForAd","adsModel","originalAdsModel","savedAd","VerifiedTrackingData","thirdPartyMeasurementStringToViewModel","bulkUpsertAdSettingsEntityErrorMap","ResponsiveAd","getBulkUploadEntityType","_ref2$activity","_ref2$imageOdata","_ref4$isImageFittingE","_ref5$isImageFittingE","adsToCreate","adsToDelete","updateAds","createdAds","deletedAds","adsNeededToCreate","adsNeededToUpdate","splitUpdateAndCreateAds","bulkCreate","bulkOrSystemError","bulkResult","console","warn","stack","titleContainer","adFormatContainer","labelContainer","OptionConfigs","getIcon","showHeader","audienceCampaignSettingsStyles","DynamicSearchAdPreviewUAPLUnstyled","_ref$data","TextPart2","DisplayUrl","Path1","Path2","domain","setDescription","urlPath1","setUrlPath1","urlPath2","setUrlPath2","urlDomain","getDomain","_useSinglePlacementLa","useSinglePlacementLayouts","groupType","placementFilterPredicate","tmp","SinglePlacementLayout","evaluateAdCustomizers","combineDescriptions","evaluatedText","adPreviewContainer","DynamicSearchAdPreviewUAPL","pathProps","orComp","ServerValidatedUrlPath","ValidatedUrlPath","AdTextInternal","initializeAdCustomizer","deps","jsDataCampaign","showAdCustomizers","IsRSAIffPopupEnabledFromDeps","useAdCustomizer","AdTextImg","ValidatedTextFieldWithAdCustomizer","containerSelector","DynamicSearchAd","configProps","LearnMoreLink","linkText","AdText","editor","preview","DynamicSearchAdEditor","onAdChanged","alwaysShowError","Token","cachedAd","setCachedAd","allSections","expandedSections","setExpandedSections","settingsExpand","triggerTestUurl","fn","originalView","isInline","uurlLevels","params","testUurl","apiInLog","validatedAd","URLOptionsSection","MetaDataEditor","metaData","assetLibraryConfig","onTextListChange","onChangeImage","disableGenerate","handleGenerate","textErrorMessages","textList","setTextList","onTextListUpdate","str","newTextList","imageSrc","newImage","TextItem","updateText","showHelpPopup","helpTopic","ImageChooser","currentImage","iconProps","getVideoSettingsEditorStyles","videoSettingsEditor","VideoSettingsEditor","videoSettings","setVideoSettings","onLoadingLogo","onChangeLogo","newLogoDataObject","businessNameErrorMessage","updating","currentLogo","logo","prev","onVideoSettingsChanged","onBusinessNameChange","onEdit","onDelete","ImageContainer","onLoadingImage","displayEdit","displayDelete","IconButton","getVideoEditorStyles","videoEditor","overflowY","leftPanelTop","leftPanelMiddle","maxHeight","tabs","borderRight","outlineColor","outlineStyle","metadata","leftPanelBottom","leftPanel","rightPanel","borderLeft","neutralLighterAlt","getScenePickerStyles","scenePicker","HelpPopupInline","Scene","scene","sceneId","onSceneSelected","selectedSceneId","clickFunc","onKeyDown","keyCode","Enter","keyFrame","isSelected","role","ScenePickerView","scenes","effective","getPreviewStyles","neutralLight","fontStyle","fill","panelNames","keyframeTemplateList","TemplateId","TemplateName","Version","Width","Height","TemplateFileName","Image","AspectRatio","MinHeight","MaxLengthInChar","getActiveTemplate","templateId","loadImagePromise","mock","onload","onerror","PanelButton","currentPanel","switchPanel","ScenePanel","setGenerateError","PlaceHolderBoxViewFooterConfig","summary","VideoPanel","footerProps","localizedTextFields","notReady","ItemPlaceholderBoxView","mainViewIcon","videoIcon","mainViewIconLabel","showTime","onVideoLoaded","LoadingBlocker","videoGenerated","Fragment","Panels","isScenePanel","sceneGenerated","generateError","renderPreview","onDismiss","dismissButtonAriaLabel","PreviewView","isSelenium","getParameter","isLocal","isEqualScene","scene1","scene2","isEqual","omit","isSceneChanged","original","isVideoSettingsChanged","isVideoChanged","useEditVideoAdsViewState","videoMetaData","dataService","copilotDataService","onApply","setIsOpen","newImageDataObject","saveVideoWhenApply","isCTV","_useRecommendations","editVideoAdsAssetRecommendations","fetchVideoKeyFrameRecommendations","generateVideo","audio","newVideoMetaData","generateScene","newSceneMetaData","useRecommendations","setScenes","setSelectedSceneId","isApplying","setIsApplying","setVideo","originalVideo","setOriginalVideo","setSceneGenerated","setVideoGenerated","videoScenesCache","setVideoScenesCache","haveEmptyImage","setHaveEmptyImage","newImageObject","setNewImageObject","_usePreviewState","setCurrentPanel","usePreviewState","_ref5$scenes","scenesInner","scenesWithIds","videoSettingsInner","logTrace","generateNewVideo","scenesInCall","isSwitchFromScene","_ref6$scenes","newVideoSettings","msg","delayedVideoGeneration","selectedScene","onScenesUpdated","updatedScenes","onVideoSettingsSelected","handleGenerateVideo","generateNewScene","videoLevelMetaData","handleGenerateScene","newScenes","copyScenes","from","newScenesWithIds","newScene","co","handleApply","newVideoUrl","savedImages","savedLogo","appliedVideoWithId","newVideo","savedMaterial","errorMessages","updatingText","maxLengthOfText","activeTemplate","getTextSizeLimitation","maxLength","haveTextError","haveErrorInScenes","textErrorForSelectedScene","prevScenes","allImages","loadImagePromises","disableApply","minSizeOfImage","getImageSizeLimitation","EditVideoAdsView","isOpen","_useEditVideoAdsViewS","handleTextListChange","evt","currentTarget","findParentElementWithClass","Panel","headerText","PanelType","custom","customWidth","layerProps","main","Overlay","AssetLibrarySpinner","useCustomSize","Icon","VideoEditorWithAddImageWrapperImp","isAssetLibraryAIGCMVPEnabled","initialView","isLiteLandingPageEnabled","assetLibraryUserPreferences","assetLibraryAccountPreferences","ianaTimeZone","showAddImagePanel","setShowAddImagePanel","setNewImageDataObject","setMinSizeOfImage","constants","defaultAspectRatioOption","aspectRatioOption","setAspectRatioOption","showAddLogoPanel","setShowAddLogoPanel","setNewLogoDataObject","onImageAddError","errorCode","Code","getImageValidationErrorMessage","addMediaConfig","getAddImageConfig","hideStockImage","IsSocialMediaImagesEnabled","VIEWS","SocialMedia","mediaRepository","MediaRepository","onSelectLogo","selectedImage","copilotVideoEditorScenario","create","imageSuggestion","adCreatorScenario","instrumentationScenarios","CopilotVideoAd","_useWebsiteSuggestion","useWebsiteSuggestion","adContext","trace","fullUrl","suggestionState","_suggestionState$sugg","suggestion","preDefinedAssetSources","getAssetSourceOptions","CSMLAssetSource","Shutterstock","preDefinedFilter","minSize","AddImageWrapper","LandingPage","imageExperienceProps","finalUrlProtocol","onUpdateFinalUrl","onUpdateFinalUrlPrefix","disabledAssetSources","AddLogoContainer","isImageSelectorDisplayed","onSelectedImagesSet","onImageSelectionCanceled","imageType","isStockPhotoEnabled","isLazyLoadEnabled","staticImagePath","imageOption","imageOptionKeys","Logo","imageOptions","setImageOption","isAdCreatorEnabled","isFinalUrlImageRetrievalEnabled","defaultSelectedPill","isThumbsUpDownEnabled","isTestEnv","recommendationStockImages","hideStockPillControl","VideoEditorWithAddImageWrapper","_ref2$palette","VideoEditorWithDataServices","withCopilotDataServiceLoaded","withAssetLibraryServicesLoaded","loggerTag","CopilotVideoEditor","isAADUser","dateFormat","accountTimeZone","preferenceService","allowedAssetType","FolderAssetType","AppealBase","AppealByIDsForParentEntity","_AppealBase","parentId","_this","_callSuper","Error","_inherits","AppealAllForParentEntity","_AppealBase2","_this2","resolveAppealParams","appealParams","getEditorialReasons","appealParamsPromise","_appealParams$options","getEditorialReasonsByIDsForParentEntity","getAllEntitiesForParentEntity","createAppealParamsWithIDs","getAppealRejections","_appealParams$options2","controller","odataResponse","Errors","utilities","processRejectReasonsFromOdata","editorialAppealAggregator","obj","substring","assertInputs","requestAppeal","appealData","appealIds","requestAppealFunc","_appealParams$options3","requestAppealAllForParentEntity","requestAppealByIDsForParentEntity","panelStylesProp","fabricPanelFixStyle","commands","uiBlockerAdapter","reactUIBlockerStyle","EditorialAppealRequestPanel","onSave","onCancel","appealDataPromise","setAppealData","setAppealIds","isBusy","setIsBusy","hasError","setHasError","handleAppealData","aggregatedRejectReasons","handleAppealDataError","editorialAppealFormData","setEditorialAppealFormData","isEditorialAppealFormDataValid","setIsEditorialAppealFormDataValid","onEditorialAppealChange","onSaveClick","onCancelClick","onRenderFooterContent","Item","isFooterAtBottom","UiBlocker","blocking","LegacyInlineErrorView","LegacyEditorialAppealRequestForm","appealTitle","EventDelegator","getTheme","IMAGE_DIM","maxWidthOfUrlField","paddleWidth","imageExtConfigAll","ImageExt","BingDesktopSingleImage","BingDesktopMultiImage","BingMobileMultiImage","MSEdgeMediumHeadline","MSNSingleCarousel","MSNMediumHeadline","MSNDoubleCarousel","imageExtConfigAllV2","MMAV2MSNRiver","MMAV2MSNSingleCarousel","imageExtConfigSingleImage","imageExtConfigSingleImageV2","imageExtConfigAllMultiImage","ExtensionImagesControlBase","_React$PureComponent","onImageListUpdated","setState","cropImage","replaceImage","onImageListChanged","onImagePreviewRequested","previewCarouselRef","setPreviewIndexByType","newPrefix","protocol","newUrl","newUrlWithProtocol","finalUrlChanged","setFullUrl","onImageCropCancelled","onImageReplaceCancelled","setAddNewImageCallback","callback","setOpenAddImageCallback","openAddImageCallback","newState","isValidUrl","mapSuggestionResponseToState","SuggestionStatus","FetchInProgress","setError","InvalidURL","fetchSuggestions","cancel","minimumSize","getMinimumSizeForImage","getLandingPageSuggestions","landingPageUrl","minimumResolution","newI18n","oldI18n","defaultPreviewFields","previewTexts","getPreviewTexts","EmptyURL","eligibleLayout","eligibleLayouts","ImageExtensionsEnhancements","subscribeToUrlChanged","ComponentSettings","ThemeFluent","setImageControlSetText","setText","setImageControlsValidate","setImageControlSetEligibleLayout","setEligibleLayout","adCreatorInstrumentation","getAdCreatorInstrumentation","SuggestionPoller","jobCompleteCallback","onPollingSuggestionCompleted","websiteSuggestionActivity","_this$props","enableAdPreviewLibrary","editImageActivity","response","isSubdomainScraping","ServerError","FetchSucceed","newText","newEligibleLayout","processedText","trim","extensionHeadline","imageListToValidate","typesPresent","imageExperienceImage","typesMissing","imageTypesWithOrder","typeMissingStrings","aspectRatios","stringKey","errMsg","_this3","enhancedImageExperienceProps","enhancedPreviewCarouselProps","onCropImage","imgObj","onReplaceImage","customClasses","viewAllPlacementsButton","reCropButton","$","ReactDOM","ThemeProvider","blockCarousel","ImageSuggestionCarousel","carouselParent","inProgress","carousel","isError","messageInfo","onSelectImage","imageSource","websiteSuggestionCarouselActivity","ind","onSelectSeeAll","isAdPreviewRefreshEnabled","PreviewCarouselComponent","UnifiedPreviewCarousel","PreviewCarousel","getUnifiedAdPreviewConfig","Provider","ImageExperience","isImageAdExtensionMode","genericImage","recommendation","isImageExtensionsEnhancementsEnabled","enableUnifiedAdPreview","totalImageListCount","willFetchFile","willInit","willFetchData","willRender","done","ExtensionImagesControl","failInDebug","assert","expression","verboseDebugInfo","assertIsDefined","assertNever","member","wordBreak","hyphens","colorNeutralForeground3BrandHover","Navigation","SideNavigation","mode","reserveSelectedTabSpace","selectionMode","useColorPickerStyles","spacingHorizontalSNudge","spacingVerticalM","colorPreview","spacingVerticalXXS","spacingHorizontalXXS","borderStyle","borderWidth","colorNeutralStroke2","borderRadiusLarge","colorInput","typographyStyles","body1","ColorPicker","onChangeColor","labelId","colorState","setColorState","onUpdateColor","_name","colorValue","hex","test","Caption1Strong","ColorPalette","showTooltipOnSelect","colorData","Color","HexCode","isDuplicate","hideCaption","palletteBoxSize","paletteColorSize","updateColor","Input","contentBefore","callToActionOptions","useCallToActionStyles","select","input","customTextContainer","inlinePopup","labelAction","onChangeCta","withCustomText","ctaValidations","helpLabel","selectedOptions","slice","isCustomTextOptionSelected","customInputText","setCustomInputText","handleSelect","_ev","optionText","ctaSchema","minLength","Combobox","onSelect","onOptionSelect","Option","toLowerCase","TextFormattingButton","TextEditStyle16Regular","useTextFormattingDialogueStyles","containerWrapper","backButton","spacingHorizontalMNudge","fontSelectorHeader","fontSelect","fontWeightSelect","fontContainer","gridGap","spacingHorizontalS","contentDivider","spacingVerticalXL","overrideFontWeights","TextFormattingDialogue","onToggleBack","onFormatText","isUsedForButton","textFormatOptions","hideColorFormatting","font","ArrowLeft16Regular","FontsFamilySelector","selectClassName","FontsWeightSelector","useDefaultContainerStyles","collapseContainer","collectionConfig","labelText","fieldName","singleAssetValidationPropsField","addButtonText","copilotButtonLabel","deleteButtonLabel","minCollectionSize","maxCollectionSize","helpPopupTopic","helpPopupAriaLabel","inlineRecommendationsTitle","inlineRecommendationsHelpTopicKey","inlineRecommendationsHelpTopicAriaLabel","inlineRecommendationsDisabledItemTooltip","duplicateErrorMessage","useTextAssetPlaceholderStyles","borderRadiusMedium","colorNeutralStrokeAccessible","spacingHorizontalM","TextAssetPlaceholder","isMultipleOptions","onFocusTextAsset","onDeleteTextAsset","onResetTextAssets","onApplyRecommendation","onToggleTextFormatting","longHeadlineAssetCollectionConfig","getLongHeadlineAssetCollectionConfig","recommendations","replaceExistingAssets","renderInlineCopilot","showAddButton","withDeleteIconDisabled","replaceMode","hideAddAllSuggestionsButton","enableCustomizer","setAddTextAssetCallback","overrideInputNode","ShortHeadlineAssetCollection","addNewShortHeadlineCallback","shortHeadlineAssetCollectionConfig","getShortHeadlineAssetCollectionConfig","addNewHeadlinesCallback","descriptionAssetCollectionConfig","getDescriptionAssetCollectionConfig","assetName","useTextAssetCollectionStyles","textDivider","disableCopilot","shortHeadlineValidations","longHeadlineValidations","descriptionValidations","onChangeTextAssetFormattingSection","shortHeadlineAssetCollection","onChangeTexts","helpButtonStyles","CurrentLocale","updatedDescriptionSchema","updatedHeadlineSchema","updatedLongHeadlineSchema","updatedAssetGroup","Headline","LongHeadline","onChangeTextsDebounced","textAssets","IsOptional","updatedTextAssets","newShortHeadline","newLongHeadline","newDescription","getskeletonStyles","row","colorNeutralStencil1","displayColorPicker","colorPalette","helpButton","ListSkeleton","Skeleton","SkeletonItem","AdsStudioDisplayColorPicker","paletteData","maxColors","totalColors","renderHelpBubble","allowDuplicates","Body1Strong","showEditBtn","isBrandKitColor","defaultSelected","UploadImage","withInstrumentation","maxLimit","elementType","isBrandKit","onSelectImages","minSizeConfig","panelSubtitle","panelTitle","imageData","privateUrl","setPrivateUrl","urlPrefixValue","prefix","hasErrorInUrl","scenarioValue","imagePickerError","setImagePickerError","clearImagePickerError","uploadImage","processUploadedImage","addImageByUrl","onImageSelected","onImagesSelected","customMediaSourceConfig","emptyFinalUrl","newOpen","showPromotionBanner","isStockImageEnabled","defaultImageOption","managedViewSelectionState","updateManagedViewSelectionState","enableStockMultipleSelection","enableWebsiteMultipleSelection","creativeEditorProps","applyZoom","zoomValue","zoom","parseInt","round","sizeCategories","Horizontal","Vertical","Square","aspectRatioLogoMapping","imageAspectRatioConfig","minCropSize","mapBrandKitImagesToDisplayAd","brandKitImage","logoConfig","isBrandKitImage","Src","assetId","imageSize","CropWidth","CropHeight","cropSetting","sourceHeight","sourceWidth","sourceX","CropX","sourceY","CropY","getImageAssetConfigs","templateConfigs","targetSizes","assetType","displayBackground","apectRatioSet","Set","add","filterBrandKitLogos","brandKit","logoAspectRatio","logos","ImageType","getBrandKitFilterLogos","filterLogos","addBrandKitToRecommendedAssets","recommendedAssets","assets","themesImages","themesLogos","imageAssets","themes","palettes","getAdSizeCategory","category","getAdConfig","templateConfig","assetProperties","getTextFormattingOptions","displayAds","prop","textFormattingColorOptions","textFormattingFontOptions","textFormattingWeightOptions","selectedColor","assetProperty","selectedFont","selectedWeight","isMultiple","getNewAssetProperties","newAssetProperties","newProp","findIndex","getColorContrastRatio","foregrounds","hexToRgb","hexCopy","m","r","g","exec","ratios","foreground","rgb1","rgb2","getContrastRatio","ratio","sum","element","ActionPaneComp","isAssetsLoading","imagesUrl","logosUrl","actionPanelDisplayData","onImageChange","onLogoChange","backgroundColors","onBackgroundColorChange","showRecommendationsBanner","editPanel","setEditPanel","setAssetType","internalEffectSettings","setEffectSettings","logoAssets","maxColorsLimit","next","onDeleteColor","colorid","dataset","handleAssetChange","keepCropSettings","onReplacePreview","onDismissEditPanel","onSelectRecommendedImage","naturalWidth","naturalHeight","assetData","imageUrl","logoUrl","imageAspectRatio","baseImage","AltText","CropSetting","SourceHeight","onEditPreview","hideEditPreviewBtnImage","hideCropImage","isMultpleImages","isMultpleLogos","onSaveEditImage","effectSettings","effectSrc","cropSettings","displayLogo","previewImage","hideEditPreviewBtn","isMultiplePreview","recommendedImages","uiBlocking","seeAllPanelTitle","onEditPreviewImage","onReplacePreviewImage","recommendedLoadingText","recommendationTitle","seeAllLinkText","showViewAllInHeader","M","disableCrop","isLogo","hasRightRail","displayImage","colorObj","finalUrlContainer","finalUrlInput","FinalUrl","setFinalUrl","localFinalUrl","setLocalFinalUrl","inputErrors","setInputErrors","handleSetFinalUrl","notifyFinalURLchange","handleKeyUp","containerClassName","ActionTypes","propApplicable","sizeConfig","updateAdProp","newPayload","currentColor","elementName","newColors","maxLengthInChar","updateColors","currentColors","updatedColors","editable","suffix","reducer","updateTargetSizes","adSizes","filterSizes","updateAssetPropertyAndColor","updateAssetPropertiesAndColor","updateFinalUrl","updateRecommendedAssets","assetsResponse","RecommendedAssets","Themes","ShortHeadlines","Cta","hasUpdateTemplate","recommendedHeadlineText","recommendedLongHeadlineText","recommendedDescriptionText","recommendedCtaText","updateWithRecommendedAssets","updateShortHeadLine","updateLongHeadLine","updateDescription","updateCallToAction","updateImage","updateLogo","updateBackground","updateAssetLoading","updateRecommendedAssetsWithBrandKit","updateRecommendedAssetsWithBrandKitData","adImages","updateBrandKit","displayAd","flat","o","highestColor","colorRatio","textColors","textColorStrings","colorObject","aspectRatioLogo","backgroundIndex","updatedAssetProperties","brandKitFonts","Typeface","Weight","TextAssetType","getAssetPropertiesFromBrandKitFonts","fonts","updateAdsWithBrandKit","updateAdImages","DisplayAdsContext","createContext","getImageData","getColorArray","returnArray","colorArray","getSerializedObjectAsArray","initialState","templateData","displayAdsTemplateDetails","defaultAssets","templateId2Size","templateSizeDetails","sizeKey","DisplayAdsProvider","dispatch","useReducer","propTypes","RecommendationsBanner","handleOnFetchSucceeded","showCopilotDialog","setShowCopilotDialog","lastFetchedUrl","setLastFetchedUrl","handleCopilotBannerFetchSucceeded","isMMA","isSignup","onFetch","onFetchFailed","onFetchSucceeded","handleCopilotDialogClose","handleFetchAssetsSucceeded","assetsRecommendationData","handleRefresh","copyOverrides","BannerServiceProvider","CopilotRecommendationBanner","narrow","isToastEnabled","onRefresh","toastOffset","vertical","shouldFetchRecommendations","CopilotThemesRecommendationDialog","open","onClosed","onFetchAssetsSucceeded","textCollection","colorNeutralBackground1","borderRadiusXLarge","spacingVerticalSNudge","shadow4","spacingVerticalXXL","spacingHorizontalL","getTextAssets","configs","MAX_SAFE_INTEGER","minLengthInChar","AdjustView","onCtaChange","onChangeTextAssets","onAssetPropertiesWithColorChange","onFinalUrlChange","onRecommendedAssetsChange","activeTextFormattingSection","setActiveTextFormattingSection","copilotUrl","actionPanelPreviewData","imageUrls","logoUrls","colorsMap","Map","logoData","colorCode","textFormattingOptions","shortHeadlineFormattingOptions","longHeadlineFormattingOptions","descriptionFormattingOptions","callToActionFormattingOptions","getAllTextFormattingOptions","newFormatting","section","formatConfig","getTransformedAssetProperties","handleChangeSectionAssetFormatting","SizesView","spacingHorizontalXXXL","filterButton","FilterBar","selectionCallback","selectedFilter","setSelectedFilter","previewStyles","justifySelf","adPreviews","centered","editButton","shadow2","transition","sizeText","zoomDropDown","zoomOptions","ZoomControl","onZoomSelect","Dropdown","PreviewImage","adSize","editEnabled","editIndividualAdCallback","loading","AdPreViews","isSinglePreviewSelected","filterSelectionCallback","showPreviewControls","saveButton","DisplayTemplateSummaryBarControl","isSaveDisabled","saveInNewFolder","onSaveSuccess","setIsSaving","sourceType","folderId","summaryBar","setSummaryBar","isSingleAd","getFolder","createFolder","folderName","memoizedImageUpload","asset","uploadImageByUrl","memoizedGetImageById","getImageById","uploadImageAsset","imageId","uploadImageAssets","imageAsset","logoAsset","folder","uploadAssets","adImage","adConfig","addImageWithBaseIdToFolder","baseId","customizedContent","timer","setInterval","summaryBarCustomizeEle","getElementById","clearInterval","createPortal","NavigationIds","colorNeutralBackground2Hover","Wand","bundleIcon","Glance","cache","DisplayAdsEditorComponent","showNavigation","displayTemplatesDataService","hasUpdateBrandKitData","hasFetchBrandKitData","brandKitDataService","brandkitApiState","showSummaryBarControl","onAdChange","setLoading","setDataLoaded","selectedItem","setSelectedItem","setIsSinglePreviewSelected","setZoomValue","loadingImage","setLoadingImage","hasFirstLoadWithAssets","groupedTabs","getBrandKits","fetchNewAds","editDisplayAdsAssetRecommendations","fetchNewDisplayAds","getAdConfigs","loadingAds","newAdImages","adsToFetch","hasCropSettingsUpdated","Ads","generatedDisplayAds","generatedAd","adUrl","imageAdsCropSettings","logoAdsCropSettings","imageCropSettings","logoCropSettings","fetchBrandKits","async","onLongHeadlineChange","onShortHeadlineChange","onDescriptionChange","updateTextAssets","selectedSize","isBrandKitLoading","brandkitLoading","DisplayAdsEditor","remainingProps","drawer","editorContainer","DisplayAdsEditorDrawer","onApplyCreative","templateDetails","setTemplateDetails","setAdData","saving","setSaving","parentContainer","parentElement","fetchDisplayAdsTemplateDefinition","templates","latestTemplate","displayAdsTemplateDefinitions","templateDefinition","version","addUrlImageToFolder","getImage","displayAdConfig","addCreative","mtObj","Drawer","modalType","separator","DrawerHeader","DrawerHeaderTitle","DrawerBody","DrawerFooter","RecommendationsSectionIcon","displayRecommendedImage","imagePreviewContainer","backgroundSize","backgroundPositionX","backgroundPositionY","checkerImage","overlay","colorBackgroundOverlay","multipleBtn","colorNeutralForeground4","fontSizeBase200","colorNeutralBackground3","actionBtns","borderRadiusSmall","getFullyShownImagesCount","itemWidth","getCarouselStyles","_components","_palette","disabledCarouselParent","pointerEvents","imageContainerLeftMargin","isCollapsible","overflowX","imageParentContainer","imageParentLeftOffset","numberOfImages","imageClickableContainer","panelHeading","panelIcon","panelHelpButton","imageHintRight","imageHintLeft","paddleBtn","moreIcon","seeAll","colorNeutralForeground2BrandSelected","seeAllInHeader","ImagePreview","memo","onReplace","hideEditBtn","hideReplaceBtn","showActionBtn","setShowActionBtn","onMouseEnter","onMouseLeave","colorNeutralForeground1","isRecommendationEmpty","hideReplacePreviewBtn","isSuggestionsPanelOpen","setIsSuggestionsPanelOpen","imagesToSuggest","setImagesToSuggest","onSelectSeeAllRecommendedImages","truncatedImages","showShimmer","suggestionId","stylingOverrides","initialImageContainerLeftMargin","isMultiSelect","showThemes","hasMore","onAdd","defaultFilter","searchQuery","collectChildren","flatTreeItems","entry","childValue","filterTreeItems","filteredTreeItemIndexes","ancestor","orderedFilteredIndexes","filteredTreeItems","useDropdownTreeStyles","dropdownContent","branch","hideContent","noResults","treeItemLayout","CustomTreeItem","flatTreeItem","onCheckedChange","onRenderContent","lazyLoadingEnabled","treeItemsProps","getTreeItemProps","allowedCheck","parentValue","treeItemProps","itemType","expandIcon","TreeItem","TreeItemLayout","DropdownTreeSelect","checkedItems","onOpenChange","onRenderTooltip","customFilter","lazyLoad","searchValue","setSearchValue","isResultOpen","setIsResultOpen","lazyLoadedData","setLazyLoadedData","lazyLoadedParents","setLazyLoadedParents","onChangeSearchValue","newValue","trimmedValue","itemsToUse","array","parent","myself","childMapValue","buildMap","parentsWithChild","parentsWithChildOrLoaded","onOpenChangeInternal","openedItem","itemChildData","onItemChecked","flatTree","useHeadlessFlatTree","handleBlur","contains","setTimeout","addEventListener","removeEventListener","showResults","SearchBox","onFocus","FlatTree","getTreeProps","showTips","withArrow","positioning"],"sourceRoot":""}\r\n {\r\n filteredTreeItems.length\r\n ? (\r\n \r\n {\r\n Array.from(flatTree.items(), (flatTreeItem : any) => {\r\n const treeItemsProps = flatTreeItem.getTreeItemProps();\r\n const isOpen = _.includes(openItems, flatTreeItem.value);\r\n const isLoading = isOpen && lazyLoadingEnabled && !_.includes(parentsWithChildOrLoaded, flatTreeItem.value);\r\n\r\n if (treeItemsProps.showTips) {\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 return (\r\n \r\n
\r\n );\r\n })\r\n }\r\n no results
)\r\n }\r\n