\r\n \r\n {keywordsMethod === ADD_KEYWORDS_BY_SELECTION && selectControl}\r\n \r\n {keywordsMethod === ADD_KEYWORDS_BY_ENTRY && entryControl}\r\n \r\n );\r\n};\r\n\r\nKeywordInput.propTypes = {\r\n entryControl: PropTypes.node.isRequired,\r\n isDisabled: PropTypes.bool.isRequired,\r\n isSelectDisabled: PropTypes.bool.isRequired,\r\n keywordsMethod: PropTypes.oneOf([\r\n ADD_KEYWORDS_BY_ENTRY,\r\n ADD_KEYWORDS_BY_SELECTION,\r\n ]),\r\n onChangeKeywordsMethod: PropTypes.func.isRequired,\r\n selectControl: PropTypes.node.isRequired,\r\n};\r\n\r\nKeywordInput.defaultProps = {\r\n keywordsMethod: null,\r\n};\r\n","import PropTypes from 'prop-types';\r\nimport React, { useCallback } from 'react';\r\nimport {\r\n Button,\r\n} from '@fluentui/react-components';\r\nimport {\r\n Dismiss12Regular,\r\n} from '@fluentui/react-icons';\r\n\r\nexport const KeywordTag = ({\r\n id,\r\n listRemoveId,\r\n name,\r\n onRemove,\r\n}) => {\r\n const removeTagId = `${listRemoveId}-${id}`;\r\n const onRemoveTag = useCallback(() => {\r\n onRemove(id);\r\n }, [id, onRemove]);\r\n\r\n return (\r\n }\r\n iconPosition=\"after\"\r\n id={removeTagId}\r\n onClick={onRemoveTag}\r\n shape=\"circular\"\r\n size=\"small\"\r\n >\r\n {name}\r\n \r\n );\r\n};\r\n\r\nKeywordTag.propTypes = {\r\n id: PropTypes.number.isRequired,\r\n listRemoveId: PropTypes.string.isRequired,\r\n name: PropTypes.string.isRequired,\r\n onRemove: PropTypes.func.isRequired,\r\n};\r\n","import PropTypes from 'prop-types';\r\nimport React, { useCallback, useContext } from 'react';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport {\r\n Button,\r\n Text,\r\n useId,\r\n} from '@fluentui/react-components';\r\nimport {\r\n DeleteRegular,\r\n} from '@fluentui/react-icons';\r\nimport { useTagsListStyles } from '../../styles';\r\nimport { KeywordTag } from './keyword-tag';\r\n\r\nexport const KeywordDisplay = ({\r\n fetchedKeywords,\r\n onRemoveAllKeywords,\r\n onRemoveKeyword,\r\n selectedKeywords,\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n const styles = useTagsListStyles();\r\n const tagsListId = useId('selectedKeywordsTagsList');\r\n const tagsListRemoveId = `${tagsListId}-remove`;\r\n\r\n const onRemoveTag = useCallback((removedId) => {\r\n onRemoveKeyword(removedId);\r\n }, [onRemoveKeyword]);\r\n\r\n return (\r\n \r\n
\r\n \r\n {i18n.getString(_TL_('Selected keywords'))}\r\n \r\n }\r\n iconPosition=\"before\"\r\n onClick={onRemoveAllKeywords}\r\n size=\"small\"\r\n >\r\n {i18n.getString(_TL_('Remove all'))}\r\n \r\n
\r\n
\r\n {selectedKeywords.map((keywordId) => {\r\n const { id, name } = fetchedKeywords[keywordId];\r\n return (\r\n \r\n );\r\n })}\r\n \r\n \r\n {i18n.getString(_TL_('Keywords'))}\r\n \r\n {selected.length > 0 && (\r\n \r\n )}\r\n \r\n {buttonText}}\r\n className={styles.dropdown}\r\n disabled={isDisabled}\r\n errorMessage=\"SELECTED_KEYWORDS_REQUIRED\"\r\n multiselect\r\n onOptionSelect={onSelectDropdownOption}\r\n useSearchLift={useSearchLift}\r\n validationProps={{\r\n data: { selectedOptions: selected },\r\n field: 'selectedOptions',\r\n onValidate: onValidateKeywords,\r\n }}\r\n >\r\n {orderedFetchedKeywords.map(({ id, impressions, name }) => {\r\n const isMaxedOut = selected.length === maxKeywordCount;\r\n const isOptionDisabled = isMaxedOut && !selected.includes(id);\r\n const optionLabel = `${name} (${impressions} ${impressionsUnit})`;\r\n\r\n return (\r\n \r\n {optionLabel}\r\n \r\n );\r\n })}\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nKeywordSelector.propTypes = {\r\n fetchedKeywords: PropTypes.objectOf(PropTypes.shape({\r\n id: PropTypes.number.isRequired,\r\n name: PropTypes.string.isRequired,\r\n impressions: PropTypes.number.isRequired,\r\n })),\r\n isDisabled: PropTypes.bool.isRequired,\r\n onRemove: PropTypes.func.isRequired,\r\n onRemoveAll: PropTypes.func.isRequired,\r\n onSelect: PropTypes.func.isRequired,\r\n orderedFetchedKeywords: PropTypes.arrayOf(PropTypes.shape({\r\n id: PropTypes.number.isRequired,\r\n name: PropTypes.string.isRequired,\r\n impressions: PropTypes.number.isRequired,\r\n })),\r\n selected: PropTypes.arrayOf(PropTypes.number).isRequired,\r\n showError: PropTypes.bool,\r\n useSearchLift: PropTypes.bool.isRequired,\r\n};\r\n\r\nKeywordSelector.defaultProps = {\r\n fetchedKeywords: null,\r\n orderedFetchedKeywords: null,\r\n showError: false,\r\n};\r\n","import PropTypes from 'prop-types';\r\nimport React, { useCallback, useContext, useState } from 'react';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { withValidation } from '@bingads-webui-react/validation';\r\nimport {\r\n Field,\r\n Label,\r\n Textarea,\r\n useId,\r\n} from '@fluentui/react-components';\r\nimport { useKeywordInputStyles } from '../../styles';\r\nimport { getCustomValidator } from './keyword-textarea-validation';\r\nimport { errorMessages } from '../../errors';\r\n\r\nconst ValidatedTextarea = withValidation(Textarea);\r\n\r\nexport const KeywordTextarea = ({\r\n isDisabled,\r\n keywordString,\r\n onChange,\r\n showError,\r\n}) => {\r\n const textareaId = useId('keywordTextarea');\r\n\r\n const i18n = useContext(I18nContext);\r\n const placeholder = i18n.getString(_TL_('Enter keywords separated by commas'));\r\n\r\n const [fieldProps, setFieldProps] = useState(null);\r\n\r\n const onChangeTextarea = useCallback((e, data) => {\r\n if (data.length) {\r\n const { value } = data[0];\r\n onChange(value);\r\n }\r\n }, [onChange]);\r\n\r\n const styles = useKeywordInputStyles();\r\n\r\n const validator = getCustomValidator();\r\n\r\n const onValidateKeywords = useCallback(({ isValid, messages }) => {\r\n if (isValid) {\r\n setFieldProps(null);\r\n } else {\r\n const message = messages[0];\r\n\r\n if (typeof message === 'object') {\r\n setFieldProps({\r\n validationMessage: i18n.getString(errorMessages[message.key], message.data),\r\n validateState: 'error',\r\n });\r\n } else {\r\n setFieldProps({\r\n validationMessage: i18n.getString(errorMessages[message]),\r\n validationState: 'error',\r\n });\r\n }\r\n }\r\n }, [i18n]);\r\n\r\n return (\r\n \r\n \r\n {i18n.getString(_TL_('Enter keywords separated by commas'))}\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nKeywordTextarea.propTypes = {\r\n isDisabled: PropTypes.bool.isRequired,\r\n keywordString: PropTypes.string.isRequired,\r\n onChange: PropTypes.func.isRequired,\r\n showError: PropTypes.bool,\r\n};\r\n\r\nKeywordTextarea.defaultProps = {\r\n showError: false,\r\n};\r\n","import { maxKeywordCount, maxKeywordLength } from '../../constants/maximums';\r\nimport { parseKeywordString } from '../../utils';\r\n\r\nexport const getCustomValidator = () => (value) => {\r\n const parsedKeywords = parseKeywordString(value);\r\n\r\n if (!parsedKeywords[0]) {\r\n // We can't use `parsedKeywords.length === 0` because when `value` is just whitespace, `parsedKeywords` will be an\r\n // array with an empty string as its only member.\r\n return ['TYPED_KEYWORDS_REQUIRED'];\r\n }\r\n\r\n const tooLongKeywords = parsedKeywords.filter(word => word.length > maxKeywordLength);\r\n\r\n if (tooLongKeywords.length > 0) {\r\n return [{\r\n key: 'KEYWORDS_TOO_LONG',\r\n data: {\r\n count: tooLongKeywords.length,\r\n max: maxKeywordLength,\r\n unit: tooLongKeywords.length === 1 ? 'keyword' : 'keywords',\r\n verb: tooLongKeywords.length === 1 ? 'exceeds' : 'exceed',\r\n },\r\n }];\r\n }\r\n\r\n if (parsedKeywords.length > maxKeywordCount) {\r\n return [{\r\n key: 'KEYWORDS_TOO_MANY',\r\n data: {\r\n count: parsedKeywords.length,\r\n max: maxKeywordCount,\r\n },\r\n }];\r\n }\r\n\r\n return [];\r\n};\r\n","import PropTypes from 'prop-types';\r\nimport React, { useContext } from 'react';\r\nimport { HelpButton } from '@bingads-webui-react/help-popup';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport {\r\n Card,\r\n CardHeader,\r\n makeStyles,\r\n Subtitle2,\r\n Switch,\r\n} from '@fluentui/react-components';\r\n\r\nconst useStyles = makeStyles({\r\n cardHeader: {\r\n display: 'flex',\r\n '& input': {\r\n height: '100%',\r\n width: '100%',\r\n }\r\n },\r\n});\r\n\r\nexport const MeasurementTypeCard = ({\r\n children,\r\n description,\r\n helpId,\r\n isAllowed,\r\n isEnabled,\r\n onToggle,\r\n title,\r\n}) => {\r\n const styles = useStyles();\r\n const i18n = useContext(I18nContext);\r\n const learnMore = i18n.getString(_TL_('Click to learn more about'));\r\n\r\n const className = title.toLowerCase().replace(/ /g, '-');\r\n\r\n return (\r\n \r\n \r\n {title}}\r\n onChange={onToggle}\r\n />\r\n \r\n \r\n }\r\n />\r\n {description}\r\n {children}\r\n \r\n );\r\n};\r\n\r\nMeasurementTypeCard.propTypes = {\r\n children: PropTypes.node.isRequired,\r\n description: PropTypes.oneOfType([\r\n PropTypes.node,\r\n PropTypes.string,\r\n ]),\r\n helpId: PropTypes.string.isRequired,\r\n isAllowed: PropTypes.bool.isRequired,\r\n isEnabled: PropTypes.bool,\r\n onToggle: PropTypes.func.isRequired,\r\n title: PropTypes.string.isRequired,\r\n};\r\n\r\nMeasurementTypeCard.defaultProps = {\r\n description: null,\r\n isEnabled: true,\r\n};\r\n","import PropTypes from 'prop-types';\r\nimport React, { useCallback, useContext, useState } from 'react';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { withCustomValidation } from '@bingads-webui-react/validation';\r\nimport {\r\n Field,\r\n Input,\r\n Label,\r\n} from '@fluentui/react-components';\r\nimport { maxSearchCid, minSearchCid } from '../../constants/maximums';\r\nimport { errorMessages } from '../../errors';\r\nimport { useSearchCustomerIdStyles } from '../../styles';\r\n\r\nconst SearchCustomerIdInternal = ({\r\n customerId,\r\n isDisabled,\r\n onChange,\r\n showError,\r\n updateValidation,\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n const label = i18n.getString(_TL_('Add customer ID (optional)'));\r\n const placeholder = i18n.getString(_TL_('Enter the CID associated with your Search campaigns'));\r\n\r\n const styles = useSearchCustomerIdStyles();\r\n\r\n const [fieldProps, setFieldProps] = useState(null);\r\n\r\n const getIsValid = useCallback((data) => {\r\n if (data === '') {\r\n return { isValid: true };\r\n }\r\n if (!data) {\r\n return { errorMessage: errorMessages.SEARCH_CID_TYPE, isValid: false };\r\n }\r\n const formattedData = Number(data);\r\n if (formattedData < minSearchCid || formattedData > maxSearchCid) {\r\n return { errorMessage: errorMessages.SEARCH_CID_RANGE, isValid: false };\r\n }\r\n return { isValid: true };\r\n }, []);\r\n\r\n const onChangeInput = useCallback((e, data) => {\r\n const { errorMessage, isValid } = getIsValid(data.value);\r\n if (isValid) {\r\n setFieldProps(null);\r\n updateValidation([], { searchCid: data.value });\r\n } else {\r\n setFieldProps({\r\n validationMessage: i18n.getString(errorMessage),\r\n validationState: 'error',\r\n });\r\n updateValidation([errorMessage], { searchCid: data.value });\r\n }\r\n onChange(data.value);\r\n }, [getIsValid, i18n, onChange, updateValidation]);\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nSearchCustomerIdInternal.propTypes = {\r\n customerId: PropTypes.string.isRequired,\r\n isDisabled: PropTypes.bool.isRequired,\r\n onChange: PropTypes.func.isRequired,\r\n showError: PropTypes.bool,\r\n updateValidation: PropTypes.func.isRequired,\r\n};\r\n\r\nSearchCustomerIdInternal.defaultProps = {\r\n showError: false,\r\n};\r\n\r\nexport const SearchCustomerId = withCustomValidation(SearchCustomerIdInternal);\r\n","import PropTypes from 'prop-types';\r\nimport React, { useMemo } from 'react';\r\nimport {\r\n makeStyles,\r\n Skeleton,\r\n SkeletonItem,\r\n useId,\r\n} from '@fluentui/react-components';\r\n\r\nconst useStyles = makeStyles({\r\n row: {\r\n alignItems: 'center',\r\n columnGap: '10px',\r\n display: 'grid',\r\n gridTemplateColumns: 'min-content 80%',\r\n paddingBottom: '10px',\r\n position: 'relative',\r\n rowGap: '10px',\r\n },\r\n});\r\n\r\nexport const CardContentSkeleton = ({ rowCount }) => {\r\n const skeletonId = useId('cardContentSkeleton');\r\n const rowKeys = useMemo(() => [...Array(rowCount).keys()], [rowCount]);\r\n const styles = useStyles();\r\n\r\n return (\r\n \r\n
\r\n {rowKeys.map(rowKey => (\r\n \r\n \r\n \r\n
\r\n ))}\r\n \r\n
\r\n \r\n {i18n.getString(_TL_('UET tags'))}\r\n \r\n \r\n \r\n {buttonText}}\r\n className={styles.dropdown}\r\n disabled={isDisabled || areActiveConversionGoalsMissing}\r\n errorMessage=\"UET_REQUIRED\"\r\n multiselect\r\n onOptionSelect={onOptionSelect}\r\n validationProps={{\r\n data: { selectedOptions: selected },\r\n field: 'selectedOptions',\r\n onValidate: onValidateUetTags,\r\n }}\r\n >\r\n {orderedFetchedUetTags.map((goal) => {\r\n const { id } = goal;\r\n const isMaxedOut = selected.length === maxTagCount;\r\n const isOptionDisabled = isMaxedOut && !selected.includes(id);\r\n\r\n return (\r\n \r\n {getGoalsOptionText({\r\n goal,\r\n none: noGoals,\r\n plural: goalsUnitPlural,\r\n singular: goalsUnit,\r\n })}\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nUetTagSelector.propTypes = {\r\n fetchedUetTags: PropTypes.objectOf(PropTypes.shape({\r\n id: PropTypes.number.isRequired,\r\n name: PropTypes.string.isRequired,\r\n goalsCount: PropTypes.number.isRequired,\r\n })).isRequired,\r\n isDisabled: PropTypes.bool.isRequired,\r\n onSelect: PropTypes.func.isRequired,\r\n orderedFetchedUetTags: PropTypes.arrayOf(PropTypes.shape({\r\n id: PropTypes.number.isRequired,\r\n name: PropTypes.string.isRequired,\r\n goalsCount: PropTypes.number.isRequired,\r\n })).isRequired,\r\n selected: PropTypes.arrayOf(PropTypes.number).isRequired,\r\n showError: PropTypes.bool,\r\n areActiveConversionGoalsMissing: PropTypes.bool,\r\n};\r\n\r\nUetTagSelector.defaultProps = {\r\n showError: false,\r\n areActiveConversionGoalsMissing: false,\r\n};\r\n","export const TRACK_BOTH_VISIT_AND_CONVERSION = 'both';\r\nexport const TRACK_CONVERSION_ONLY = 'conversion';\r\nexport const TRACK_VISIT_ONLY = 'visit';\r\n","import PropTypes from 'prop-types';\r\nimport React, { useCallback, useContext } from 'react';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport {\r\n RadioGroup,\r\n Radio,\r\n} from '@fluentui/react-components';\r\nimport {\r\n TRACK_BOTH_VISIT_AND_CONVERSION,\r\n TRACK_CONVERSION_ONLY,\r\n TRACK_VISIT_ONLY,\r\n} from './visit-conversion-methods';\r\n\r\nexport const VisitConversionInput = ({\r\n combinedControl,\r\n conversionControl,\r\n isDisabled,\r\n onChangeMethod,\r\n useConversionLift,\r\n useVisitLift,\r\n visitControl,\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n const combinedLabel = i18n.getString(_TL_('Measure visit and conversion lift'));\r\n const conversionLabel = i18n.getString(_TL_('Measure conversion lift only'));\r\n const visitLabel = i18n.getString(_TL_('Measure visit lift only'));\r\n\r\n let trackingMethod = null;\r\n if (useConversionLift && useVisitLift) {\r\n trackingMethod = TRACK_BOTH_VISIT_AND_CONVERSION;\r\n } else if (useConversionLift) {\r\n trackingMethod = TRACK_CONVERSION_ONLY;\r\n } else if (useVisitLift) {\r\n trackingMethod = TRACK_VISIT_ONLY;\r\n }\r\n\r\n const onSelectRadio = useCallback((e, { value }) => {\r\n if (value === TRACK_BOTH_VISIT_AND_CONVERSION) {\r\n onChangeMethod({\r\n useConversionLift: true,\r\n useVisitLift: true,\r\n });\r\n } else if (value === TRACK_CONVERSION_ONLY) {\r\n onChangeMethod({\r\n useConversionLift: true,\r\n useVisitLift: false,\r\n });\r\n } else {\r\n onChangeMethod({\r\n useConversionLift: false,\r\n useVisitLift: true,\r\n });\r\n }\r\n }, [onChangeMethod]);\r\n\r\n return (\r\n \r\n \r\n {trackingMethod === TRACK_BOTH_VISIT_AND_CONVERSION && combinedControl}\r\n \r\n {trackingMethod === TRACK_CONVERSION_ONLY && conversionControl}\r\n \r\n {trackingMethod === TRACK_VISIT_ONLY && visitControl}\r\n \r\n );\r\n};\r\n\r\nVisitConversionInput.propTypes = {\r\n combinedControl: PropTypes.node.isRequired,\r\n conversionControl: PropTypes.node.isRequired,\r\n isDisabled: PropTypes.bool.isRequired,\r\n onChangeMethod: PropTypes.func.isRequired,\r\n useConversionLift: PropTypes.bool,\r\n useVisitLift: PropTypes.bool,\r\n visitControl: PropTypes.node.isRequired,\r\n};\r\n\r\nVisitConversionInput.defaultProps = {\r\n useConversionLift: false,\r\n useVisitLift: false,\r\n};\r\n","import PropTypes from 'prop-types';\r\nimport React from 'react';\r\nimport { CardContentSkeleton } from '../skeleton/card-content-skeleton';\r\nimport { MeasurementTypeCard } from '../measurement-type-card';\r\n\r\nconst noop = () => {};\r\n\r\nexport const VisitConversionLiftLoading = ({ title }) => (\r\n \r\n \r\n \r\n);\r\n\r\nVisitConversionLiftLoading.propTypes = {\r\n title: PropTypes.string.isRequired,\r\n};\r\n","import PropTypes from 'prop-types';\r\nimport React, { useContext } from 'react';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { MeasurementTypeCard } from '../measurement-type-card';\r\n\r\nconst noop = () => {};\r\n\r\nexport const VisitConversionLiftNotAllowed = ({ title }) => {\r\n const i18n = useContext(I18nContext);\r\n const explanation = i18n.getString(_TL_(\"You can't measure visits or conversions because you haven't yet set up UET tags and conversion tracking.\"));\r\n return (\r\n \r\n );\r\n};\r\n\r\nVisitConversionLiftNotAllowed.propTypes = {\r\n title: PropTypes.string.isRequired,\r\n};\r\n","import PropTypes from 'prop-types';\r\nimport React, { useCallback, useContext, useMemo, useState } from 'react';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { withCustomValidation } from '@bingads-webui-react/validation';\r\nimport { useWizardService } from '@bingads-webui-react/wizard';\r\nimport { MessageBar, MessageBarBody } from '@fluentui/react-message-bar';\r\nimport { Field } from '@fluentui/react-components';\r\nimport { errorMessages } from '../../errors';\r\nimport { useRadioChildControlStyles } from '../../styles';\r\nimport { UetTagSelector } from '../uet-tag/uet-tag-selector';\r\nimport { getActiveGoalsCount } from '../uet-tag/uet-tag-selector-utils';\r\nimport { MeasurementTypeCard } from '../measurement-type-card';\r\nimport { VisitConversionInput } from './visit-conversion-input';\r\nimport { VisitConversionLiftLoading } from './visit-conversion-lift-loading';\r\nimport { VisitConversionLiftNotAllowed } from './visit-conversion-lift-not-allowed';\r\n\r\nconst VisitConversionLiftInternal = ({\r\n isEnabled,\r\n onChangeMethod,\r\n onSelectUetTags,\r\n onToggle,\r\n selectedUetTags,\r\n showError,\r\n updateValidation,\r\n useConversionLift,\r\n useVisitLift,\r\n}) => {\r\n const { state: wizardState } = useWizardService();\r\n const { wizardData } = wizardState.context;\r\n const styles = useRadioChildControlStyles();\r\n\r\n const i18n = useContext(I18nContext);\r\n const title = i18n.getString(_TL_('Visit and conversion lift'));\r\n const description = i18n.getString(_TL_('Measure your website visitation rate and/or conversion rate. For both measurement types, you\\'ll need to select the appropriate UET tag for your website.'));\r\n\r\n const isAllowed = useMemo(() => {\r\n const isFinishedFetching = !!(wizardData.fetchedUetTags && wizardData.orderedFetchedUetTags);\r\n if (isFinishedFetching) {\r\n return Object.keys(wizardData.fetchedUetTags).length && wizardData.orderedFetchedUetTags.length;\r\n }\r\n return isFinishedFetching;\r\n }, [wizardData.fetchedUetTags, wizardData.orderedFetchedUetTags]);\r\n const isLiftTypeDisabled = !isAllowed || !isEnabled;\r\n\r\n const [hasLiftTypeRequiredError, setHasLiftTypeRequiredError] = useState(false);\r\n\r\n const onToggleUseVisitConversionLift = useCallback(() => {\r\n const newValue = !isEnabled;\r\n if (newValue && !useConversionLift && !useVisitLift) {\r\n updateValidation(['VISIT_CONVERSION_LIFT_REQUIRED'], { isEnabled: newValue, useConversionLift, useVisitLift });\r\n setHasLiftTypeRequiredError(true);\r\n } else {\r\n setHasLiftTypeRequiredError(false);\r\n }\r\n onToggle();\r\n }, [isEnabled, onToggle, updateValidation, useConversionLift, useVisitLift]);\r\n\r\n const onChangeLiftTypeMethod = useCallback((values) => {\r\n updateValidation([], {\r\n isEnabled,\r\n useConversionLift: values.useConversionLift,\r\n useVisitLift: values.useVisitLift,\r\n });\r\n setHasLiftTypeRequiredError(false);\r\n onChangeMethod(values);\r\n }, [isEnabled, onChangeMethod, updateValidation]);\r\n\r\n // We need to show only those UET tags with active conversion goals for the \"Measure conversion lift only\" option.\r\n const orderedFetchedUetTagsWithActiveGoals = useMemo(() => (\r\n !wizardData.orderedFetchedUetTags\r\n ? null\r\n : wizardData.orderedFetchedUetTags.filter(tag => getActiveGoalsCount(tag.goals) > 0)\r\n ), [wizardData.orderedFetchedUetTags]);\r\n\r\n // We should only show the conversion warning if the user has opted for both visit and conversion lift and selected\r\n // UET tags without active conversion goals.\r\n const [bothVisitAndConversionFieldProps, setBothVisitAndConversionFieldProps] = useState(null);\r\n\r\n const areActiveConversionGoalsMissing = useMemo(() => (\r\n orderedFetchedUetTagsWithActiveGoals && orderedFetchedUetTagsWithActiveGoals.length === 0\r\n ), [orderedFetchedUetTagsWithActiveGoals]);\r\n\r\n const onSelectWithBothVisitAndConversion = useCallback((selectedTags) => {\r\n if (selectedTags.length > 0) {\r\n const withActiveGoalsCount = selectedTags.reduce((sum, tagId) => {\r\n const tagObject = wizardData.fetchedUetTags[tagId];\r\n const activeGoalsCount = getActiveGoalsCount(tagObject.goals);\r\n return sum + activeGoalsCount;\r\n }, 0);\r\n if (withActiveGoalsCount === 0) {\r\n updateValidation(['CONVERSION_GOAL_REQUIRED'], { selectedTags });\r\n setBothVisitAndConversionFieldProps({\r\n validationMessage: i18n.getString(errorMessages.CONVERSION_GOAL_REQUIRED),\r\n validationState: 'error',\r\n });\r\n } else {\r\n updateValidation([], { selectedTags });\r\n setBothVisitAndConversionFieldProps(null);\r\n }\r\n } else {\r\n updateValidation([], { selectedTags });\r\n setBothVisitAndConversionFieldProps(null);\r\n }\r\n onSelectUetTags(selectedTags);\r\n }, [i18n, onSelectUetTags, updateValidation, wizardData.fetchedUetTags]);\r\n\r\n if (!wizardData.isUetTagsFetched) {\r\n return (\r\n \r\n );\r\n }\r\n\r\n if (!isAllowed) {\r\n return (\r\n \r\n );\r\n }\r\n\r\n return (\r\n \r\n {showError && hasLiftTypeRequiredError && (\r\n \r\n {i18n.getString(errorMessages.VISIT_CONVERSION_LIFT_REQUIRED)}\r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n }\r\n conversionControl={\r\n \r\n \r\n
\r\n }\r\n isDisabled={isLiftTypeDisabled}\r\n onChangeMethod={onChangeLiftTypeMethod}\r\n useConversionLift={useConversionLift}\r\n useVisitLift={useVisitLift}\r\n visitControl={\r\n \r\n \r\n
\r\n }\r\n />\r\n \r\n );\r\n};\r\n\r\nVisitConversionLiftInternal.propTypes = {\r\n isEnabled: PropTypes.bool,\r\n onChangeMethod: PropTypes.func.isRequired,\r\n onSelectUetTags: PropTypes.func.isRequired,\r\n onToggle: PropTypes.func.isRequired,\r\n selectedUetTags: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.number)).isRequired,\r\n showError: PropTypes.bool,\r\n updateValidation: PropTypes.func.isRequired,\r\n useConversionLift: PropTypes.bool,\r\n useVisitLift: PropTypes.bool,\r\n};\r\n\r\nVisitConversionLiftInternal.defaultProps = {\r\n isEnabled: false,\r\n showError: false,\r\n useConversionLift: false,\r\n useVisitLift: false,\r\n};\r\n\r\nexport const VisitConversionLift = withCustomValidation(VisitConversionLiftInternal);\r\n","import PropTypes from 'prop-types';\r\nimport React, { useCallback, useContext, useState } from 'react';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { withValidation } from '@bingads-webui-react/validation';\r\nimport {\r\n Card,\r\n CardHeader,\r\n Field,\r\n Input,\r\n Label,\r\n makeStyles,\r\n} from '@fluentui/react-components';\r\nimport { HelpButton } from '@bingads-webui-react/help-popup';\r\nimport { maxExperimentNameLength } from '../constants/maximums';\r\nimport { errorMessages } from '../errors';\r\nimport { cardHeaderStyles } from '../page-layout';\r\n\r\nconst useStyles = makeStyles(cardHeaderStyles);\r\n\r\nconst ValidatedInput = withValidation(Input);\r\n\r\nexport const getErrorProcessor = () => {\r\n const customErrors = {\r\n required: 'NAME_REQUIRED',\r\n maxLength: 'NAME_TOO_LONG',\r\n };\r\n return errors => Object.entries(errors).map(([key, oldError]) => customErrors[key] || oldError);\r\n};\r\n\r\nexport const experimentNameSchema = {\r\n name: 'Experiment Name Schema',\r\n type: 'object',\r\n properties: {\r\n experimentName: {\r\n type: 'string',\r\n required: true,\r\n maxLength: maxExperimentNameLength,\r\n },\r\n },\r\n};\r\n\r\nexport const ExperimentNameCard = ({ experimentName, onChange, showError }) => {\r\n const styles = useStyles();\r\n const i18n = useContext(I18nContext);\r\n const learnMore = i18n.getString(_TL_('Click to learn more about'));\r\n const experimentNameLabel = i18n.getString(_TL_('Experiment name'));\r\n\r\n const [fieldProps, setFieldProps] = useState(null);\r\n\r\n const onValidateExperimentName = useCallback(({ isValid, messages }) => {\r\n if (isValid) {\r\n setFieldProps(null);\r\n } else {\r\n setFieldProps({\r\n validationMessage: i18n.getString(errorMessages[messages[0]]),\r\n validationState: 'error',\r\n });\r\n }\r\n }, [i18n]);\r\n\r\n const errorProcessor = useCallback(getErrorProcessor(), []);\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\nExperimentNameCard.propTypes = {\r\n experimentName: PropTypes.string,\r\n onChange: PropTypes.func.isRequired,\r\n showError: PropTypes.bool,\r\n};\r\n\r\nExperimentNameCard.defaultProps = {\r\n experimentName: null,\r\n showError: false,\r\n};\r\n","import React, { useContext } from 'react';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { makeStyles } from '@fluentui/react-components';\r\nimport { MessageBar, MessageBarBody } from '@fluentui/react-message-bar';\r\n\r\nconst useStyles = makeStyles({\r\n message: {\r\n fontSize: '12px',\r\n },\r\n root: {\r\n paddingBottom: '5px',\r\n paddingTop: '10px',\r\n },\r\n});\r\n\r\nexport const ImpressionThresholdMessage = () => {\r\n const styles = useStyles();\r\n const i18n = useContext(I18nContext);\r\n const message = i18n.getString(_TL_('Lift measurement might not have significant/useful results if audiences associated with your selected campaign(s) have less than one million impressions when the experiment is running. Results are also not guaranteed to be significant even if the impression threshold is met.'));\r\n\r\n return (\r\n \r\n \r\n {message}\r\n \r\n \r\n );\r\n};\r\n","import PropTypes from 'prop-types';\r\nimport React, { useContext } from 'react';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport {\r\n Card,\r\n Text,\r\n Subtitle2,\r\n} from '@fluentui/react-components';\r\n\r\nexport const SelectedCampaignsCard = ({ campaigns }) => {\r\n const i18n = useContext(I18nContext);\r\n const cardTitle = i18n.getString(_TL_('Campaigns'));\r\n const noContent = i18n.getString(_TL_('No campaigns selected'));\r\n const cardContent = campaigns.length === 0\r\n ? noContent\r\n : campaigns.map(({ name }) => name).join(i18n.getString(_TL_(', ')));\r\n\r\n return (\r\n \r\n {cardTitle}\r\n {cardContent}\r\n \r\n );\r\n};\r\n\r\nSelectedCampaignsCard.propTypes = {\r\n campaigns: PropTypes.arrayOf(PropTypes.shape({\r\n name: PropTypes.string.isRequired,\r\n })).isRequired,\r\n};\r\n","import PropTypes from 'prop-types';\r\nimport React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';\r\nimport { LearnMoreLink } from '@bingads-webui-campaign-react/help';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { ValidationGroup, withCustomValidation } from '@bingads-webui-react/validation';\r\nimport { useWizardService, WIZARD_EVENTS } from '@bingads-webui-react/wizard';\r\nimport { setClarityTag } from '@bingads-webui-universal/clarity';\r\nimport { MessageBar, MessageBarBody } from '@fluentui/react-message-bar';\r\nimport { Stack } from '@fluentui/react/lib/Stack';\r\nimport {\r\n Subtitle1,\r\n Text,\r\n Title3,\r\n} from '@fluentui/react-components';\r\nimport { errorMessages } from '../errors';\r\nimport { stepLayoutTokens } from '../page-layout';\r\nimport { validateVisitConversionLift } from '../validate';\r\nimport { CountryCard } from './country/country-card';\r\nimport { StartDateCard } from './date/start-date-card';\r\nimport { ADD_KEYWORDS_BY_SELECTION } from './keyword/keyword-methods';\r\nimport { SearchLift } from './search-lift/search-lift';\r\nimport { ApiSaveErrorNotification } from './api-save-error-notification';\r\nimport { VisitConversionLift } from './visit-conversion-lift/visit-conversion-lift';\r\nimport { ExperimentNameCard } from './experiment-name-card';\r\nimport { ImpressionThresholdMessage } from './impression-threshold-message';\r\nimport { SelectedCampaignsCard } from './selected-campaigns-card';\r\n\r\nconst titles = {\r\n create: _TL_('Create your lift measurement experiment'),\r\n edit: _TL_('Edit your lift measurement experiment'),\r\n};\r\n\r\nconst ConfigureStudyStepInternal = ({ updateValidation }) => {\r\n const i18n = useContext(I18nContext);\r\n const { state: wizardState, send } = useWizardService();\r\n const { wizardData } = wizardState.context;\r\n const { showError } = wizardData;\r\n const [hasLiftTypeRequiredError, setHasLiftTypeRequiredError] = useState(false);\r\n const selectedCampaigns = useMemo(() => (\r\n wizardData.selectedCampaignsById\r\n ? Object.values(wizardData.selectedCampaignsById).map(campaign => ({ name: campaign.Name }))\r\n : []\r\n ), [wizardData.selectedCampaignsById]);\r\n\r\n // Localized strings.\r\n const title = i18n.getString(titles[wizardData.intent]);\r\n const instructions = i18n.getString(_TL_('Lift measurement experiments provide reports on the branch search rate, website visitation rate, and conversion rate for your Audience campaigns (Display, Native, Online Video, and Feed-based). These measurements help you understand how much more likely consumers are to search for your brand, visit your website, and make purchases after seeing your Audience ads.'));\r\n const measurementSectionHeader = i18n.getString(_TL_('Measurement types'));\r\n\r\n const onChangeExperimentName = useCallback((event) => {\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, { experimentName: event.target.value });\r\n }, [send]);\r\n\r\n const onChangeStartDate = useCallback((startDate) => {\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, { startDate });\r\n }, [send]);\r\n\r\n const onChangeCountry = useCallback((country) => {\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, { country });\r\n }, [send]);\r\n\r\n const onToggleUseSearchLift = useCallback(() => {\r\n const newValue = !wizardData.useSearchLift;\r\n\r\n if (!newValue && !wizardData.useConversionLift && !wizardData.useVisitLift) {\r\n updateValidation(['MEASUREMENT_TYPE_REQUIRED']);\r\n setHasLiftTypeRequiredError(true);\r\n } else {\r\n setHasLiftTypeRequiredError(false);\r\n }\r\n\r\n setClarityTag({\r\n IsLiftExperimentUsingSearchLift: newValue,\r\n });\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, { useSearchLift: newValue });\r\n }, [send, updateValidation, wizardData.useConversionLift, wizardData.useSearchLift, wizardData.useVisitLift]);\r\n\r\n const onChangeKeywords = useCallback((typedKeywordString) => {\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, { typedKeywordString });\r\n }, [send]);\r\n\r\n const onChangeKeywordsMethod = useCallback((method) => {\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, { keywordsMethod: method });\r\n }, [send]);\r\n\r\n const onRemoveAllKeywords = useCallback(() => {\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, { selectedKeywords: [] });\r\n }, [send]);\r\n\r\n const onRemoveKeyword = useCallback((removedId) => {\r\n const filteredKeywords = wizardData.selectedKeywords.filter(keywordId => keywordId !== removedId);\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, { selectedKeywords: filteredKeywords });\r\n }, [send, wizardData.selectedKeywords]);\r\n\r\n const onSelectKeywords = useCallback((selectedWords) => {\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, { selectedKeywords: [...selectedWords] });\r\n }, [send]);\r\n\r\n const onChangeCustomerId = useCallback((cid) => {\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, { searchCid: cid });\r\n }, [send]);\r\n\r\n const [hasUETTagsSelectionError, setHasUETTagsSelectionError] = useState(false);\r\n const onToggleUseVisitConversionLift = useCallback(() => {\r\n const isNowToggledOn = !wizardData.useVisitConversionLift;\r\n if (isNowToggledOn) {\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, { useVisitConversionLift: true });\r\n } else {\r\n setHasUETTagsSelectionError(false);\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, { useVisitConversionLift: false, useVisitLift: false, useConversionLift: false });\r\n }\r\n }, [send, wizardData.useVisitConversionLift]);\r\n\r\n const onChangeVisitConversionLiftMethod = useCallback((values) => {\r\n if (!wizardData.useSearchLift && !values.useConversionLift && !values.useVisitLift) {\r\n updateValidation(['MEASUREMENT_TYPE_REQUIRED']);\r\n setHasLiftTypeRequiredError(true);\r\n } else {\r\n setHasLiftTypeRequiredError(false);\r\n }\r\n\r\n setClarityTag({\r\n IsLiftExperimentUsingConversionLift: values.useConversionLift,\r\n IsLiftExperimentUsingVisitLift: values.useVisitLift,\r\n });\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, {\r\n useConversionLift: values.useConversionLift,\r\n useVisitLift: values.useVisitLift,\r\n });\r\n }, [send, updateValidation, wizardData.useSearchLift]);\r\n\r\n const onSelectUetTags = useCallback((selectedTags) => {\r\n let key;\r\n\r\n if (wizardData.useConversionLift && wizardData.useVisitLift) {\r\n key = 'both';\r\n } else if (wizardData.useConversionLift) {\r\n key = 'conversion';\r\n } else {\r\n key = 'visit';\r\n }\r\n setHasUETTagsSelectionError(false);\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, {\r\n uetTags: {\r\n ...wizardData.uetTags,\r\n [key]: [...selectedTags],\r\n },\r\n });\r\n }, [send, wizardData]);\r\n\r\n const onValidate = useCallback(({ isValid }) => {\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, { isValid });\r\n }, [send]);\r\n\r\n useEffect(() => {\r\n const isTagsSelectionValid = validateVisitConversionLift(wizardData);\r\n if (showError && !isTagsSelectionValid) {\r\n setHasUETTagsSelectionError(true);\r\n }\r\n }, [showError, wizardData]);\r\n\r\n return (\r\n \r\n \r\n {title}\r\n \r\n \r\n \r\n {wizardData.apiSaveErrorMessage ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n \r\n \r\n \r\n {measurementSectionHeader}\r\n {showError && hasLiftTypeRequiredError && (\r\n \r\n {i18n.getString(errorMessages.MEASUREMENT_TYPE_REQUIRED)}\r\n \r\n )}\r\n {showError && hasUETTagsSelectionError && (\r\n \r\n {i18n.getString(errorMessages.UET_TAG_SELECTION_REQUIRED)}\r\n \r\n )}\r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nConfigureStudyStepInternal.propTypes = {\r\n updateValidation: PropTypes.func.isRequired,\r\n};\r\n\r\nexport const ConfigureStudyStep = withCustomValidation(ConfigureStudyStepInternal);\r\n","import { getEntityFromScope } from '@bingads-webui/edm-campaign';\r\n\r\nexport const conversionGoalFields = [\r\n 'Id',\r\n 'Name',\r\n 'Status',\r\n 'Tag',\r\n];\r\n\r\nexport const fetchConversionGoal = ({\r\n count,\r\n scope,\r\n tagId,\r\n}) => {\r\n const { currentAccount } = getEntityFromScope(scope);\r\n const filters = ['Status eq \\'Active\\''];\r\n\r\n if (tagId != null) {\r\n const tagIdFilter = Array.isArray(tagId)\r\n ? `Tag/Id in [${tagId.join(', ')}]`\r\n : `Tag/Id eq ${tagId}`;\r\n filters.push(tagIdFilter);\r\n }\r\n\r\n const query = {\r\n filter: {\r\n where: filters.join(' and '),\r\n },\r\n select: [...conversionGoalFields],\r\n top: count || 20,\r\n };\r\n\r\n return currentAccount.Goals['Default.GetConversionGoals']\r\n .$makeCall({ query })\r\n .toPromise();\r\n};\r\n\r\nexport const transformFetchedGoal = fetchedGoal => ({\r\n id: fetchedGoal.Id,\r\n name: fetchedGoal.Name,\r\n status: fetchedGoal.Status,\r\n});\r\n","import { getEntityFromScope } from '@bingads-webui/edm-campaign';\r\n\r\nexport const fetchUetTags = ({\r\n count,\r\n ids,\r\n onFailure,\r\n onSuccess,\r\n scope,\r\n}) => {\r\n const { currentAccount } = getEntityFromScope(scope);\r\n const currentAccountTagsObservable = currentAccount.Tags.get({\r\n top: count,\r\n select: [\r\n 'Id',\r\n 'Name',\r\n 'Status',\r\n 'GoalsCount',\r\n ],\r\n orderby: [\r\n ['GoalsCount', 'desc'],\r\n ],\r\n filter: {\r\n where: ids\r\n ? `Status eq 'Active' AND Id in [${ids.join(', ')}]`\r\n : 'Status eq \\'Active\\'',\r\n },\r\n });\r\n\r\n return currentAccountTagsObservable.subscribe({\r\n next: onSuccess,\r\n error: onFailure,\r\n });\r\n};\r\n\r\nexport const transformFetchedUetTag = fetchedTag => ({\r\n id: fetchedTag.Id,\r\n name: fetchedTag.Name,\r\n status: fetchedTag.Status,\r\n goals: [],\r\n goalsCount: fetchedTag.GoalsCount,\r\n});\r\n\r\nexport const getFetchedTagCollections = (data) => {\r\n const fetchedTags = {};\r\n const fetchedTagsAsArray = [];\r\n\r\n data.value.forEach((fetchedTag) => {\r\n const uetTag = transformFetchedUetTag(fetchedTag);\r\n fetchedTagsAsArray.push(uetTag);\r\n fetchedTags[fetchedTag.Id] = uetTag;\r\n });\r\n\r\n return {\r\n fetchedTags,\r\n fetchedTagsAsArray,\r\n };\r\n};\r\n\r\nexport const getFetchedTagsWithGoalsIds = fetchedTags => fetchedTags\r\n .filter(fetchedTag => fetchedTag.goalsCount > 0)\r\n .map(fetchedTag => fetchedTag.id);\r\n","import { useCallback, useContext } from 'react';\r\nimport dateUtils from '@bingads-webui-component-legacy/humanize/date';\r\nimport { notificationApi } from '@bingads-webui-campaign/notification-center';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { ScopeContext } from '@bingads-webui-react/scope-service';\r\nimport { useWizardService, WIZARD_EVENTS } from '@bingads-webui-react/wizard';\r\nimport { fetchConversionGoal, transformFetchedGoal } from '../../fetch/conversion';\r\nimport { fetchKeywords } from '../../fetch/keywords';\r\nimport { fetchUetTags, getFetchedTagCollections, getFetchedTagsWithGoalsIds } from '../../fetch/uet';\r\nimport { EDIT_INTENT } from '../constants/intents';\r\nimport { maxFetchedGoalsCount, maxFetchedKeywordsCount, maxFetchedTagsCount } from '../constants/maximums';\r\nimport { createMeasurementTypeEnum, saveExperiment, updateExperiment } from '../../fetch/experiment';\r\nimport { API_DATE_FORMAT } from '../date';\r\nimport { errorMessages } from '../errors';\r\nimport { getKeywords, getUETTags } from '../utils';\r\nimport { validateLiftExperiment } from '../validate';\r\nimport { ADD_KEYWORDS_BY_ENTRY } from './keyword/keyword-methods';\r\n\r\nconst onFetchKeywordsSuccess = ({ send }) => (keywords) => {\r\n const orderedFetchedKeywords = [];\r\n const fetchedKeywords = {};\r\n\r\n keywords.forEach((keyword) => {\r\n const fetchedKeyword = {\r\n id: keyword.Id,\r\n name: keyword.Text,\r\n status: keyword.Status,\r\n impressions: keyword.PerformanceMetrics && keyword.PerformanceMetrics.Impressions,\r\n };\r\n orderedFetchedKeywords.push(fetchedKeyword);\r\n fetchedKeywords[keyword.Id] = { ...fetchedKeyword };\r\n });\r\n\r\n const updatedWizardData = {\r\n fetchedKeywords,\r\n isFetchingKeywords: false,\r\n orderedFetchedKeywords,\r\n };\r\n\r\n if (orderedFetchedKeywords.length === 0) {\r\n updatedWizardData.keywordsMethod = ADD_KEYWORDS_BY_ENTRY;\r\n }\r\n\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, updatedWizardData);\r\n};\r\n\r\nconst onFetchUetTagsFailure = ({ i18n, msg, send }) => () => {\r\n notificationApi.showWarning(i18n.getString(msg));\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, { isUetTagsFetched: true });\r\n};\r\n\r\nconst onFetchUetTagsSuccess = ({ i18n, scope, send }) => (data) => {\r\n const { fetchedTags, fetchedTagsAsArray } = getFetchedTagCollections(data);\r\n const tagsWithGoalsIds = getFetchedTagsWithGoalsIds(fetchedTagsAsArray);\r\n\r\n if (tagsWithGoalsIds.length > 0) {\r\n // For any fetched tags that have associated conversion goals, we need to fetch those goals and add them to the\r\n // tag before setting the fetch results in state.\r\n const msg = _TL_('Failed to fetch conversion goals.');\r\n fetchConversionGoal({\r\n count: maxFetchedGoalsCount,\r\n scope,\r\n tagId: tagsWithGoalsIds,\r\n })\r\n .then(({ value }) => {\r\n value.forEach((goal) => {\r\n fetchedTags[goal.Tag.Id].goals.push(transformFetchedGoal(goal));\r\n });\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, {\r\n fetchedUetTags: fetchedTags,\r\n isUetTagsFetched: true,\r\n orderedFetchedUetTags: fetchedTagsAsArray,\r\n });\r\n })\r\n .catch(onFetchUetTagsFailure({ i18n, msg, send }));\r\n } else {\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, {\r\n fetchedUetTags: fetchedTags,\r\n isUetTagsFetched: true,\r\n orderedFetchedUetTags: fetchedTagsAsArray,\r\n });\r\n }\r\n};\r\n\r\nexport const useConfigureStudyRepository = () => {\r\n const { scope } = useContext(ScopeContext);\r\n const { state: wizardState, send } = useWizardService();\r\n const { wizardData } = wizardState.context;\r\n const isEdit = wizardData.intent === EDIT_INTENT;\r\n\r\n const i18n = useContext(I18nContext);\r\n\r\n const load = useCallback(() => new Promise((resolve) => {\r\n if (wizardData.isFetchingKeywords == null) {\r\n wizardData.isFetchingKeywords = true;\r\n fetchKeywords({\r\n count: maxFetchedKeywordsCount,\r\n scope,\r\n })\r\n .then(onFetchKeywordsSuccess({ send }))\r\n .catch((error) => {\r\n notificationApi.showWarning(i18n.getString(_TL_('Failed to fetch keywords: {{ responseText }}'), { responseText: error.responseText }));\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, { isFetchingKeywords: false });\r\n });\r\n }\r\n\r\n if (!wizardData.isUetTagsFetched) {\r\n const msg = _TL_('Failed to fetch UET tags.');\r\n fetchUetTags({\r\n count: maxFetchedTagsCount,\r\n onFailure: onFetchUetTagsFailure({ i18n, msg, send }),\r\n onSuccess: onFetchUetTagsSuccess({ i18n, scope, send }),\r\n scope,\r\n });\r\n }\r\n\r\n setTimeout(() => resolve({}), 1000);\r\n }), [i18n, scope, send, wizardData.isFetchingKeywords, wizardData.isUetTagsFetched]);\r\n\r\n const onFailure = useCallback((message) => {\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, { apiSaveErrorMessage: message });\r\n }, [send]);\r\n\r\n const save = useCallback(async () => {\r\n if (!validateLiftExperiment(wizardData)) {\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, { showError: true });\r\n const saveValidationError = new Error(i18n.getString(errorMessages.SAVE_VALIDATION_FAILED));\r\n return Promise.reject(saveValidationError);\r\n }\r\n\r\n const payload = {\r\n Campaigns: Object.keys(wizardData.selectedCampaignsById).map(idAsString => Number(idAsString)),\r\n Country: wizardData.country,\r\n Keywords: getKeywords(wizardData),\r\n MeasurementType: createMeasurementTypeEnum({\r\n useConversionLift: wizardData.useConversionLift,\r\n useSearchLift: wizardData.useSearchLift,\r\n useVisitLift: wizardData.useVisitLift,\r\n }),\r\n Name: wizardData.experimentName,\r\n StartDate: dateUtils.toString(wizardData.startDate, API_DATE_FORMAT),\r\n SearchCustomerId: wizardData.searchCid ? Number(wizardData.searchCid) : null,\r\n UETTags: getUETTags(wizardData),\r\n };\r\n\r\n let saveResult;\r\n if (isEdit) {\r\n payload.Id = scope.values.liftExperimentId;\r\n saveResult = await updateExperiment(scope.values, { payload, onSuccess: () => { }, onFailure });\r\n } else {\r\n saveResult = await saveExperiment(scope.values, { payload, onSuccess: () => { }, onFailure });\r\n }\r\n\r\n return saveResult.isAPISaveFailure ? Promise.reject(saveResult.error) : Promise.resolve({});\r\n }, [i18n, isEdit, onFailure, scope.values, send, wizardData]);\r\n\r\n return {\r\n load,\r\n save,\r\n };\r\n};\r\n","export const CAMPAIGN_PAUSED_STATUSES = [\r\n 'UserPaused',\r\n 'BudgetPaused',\r\n 'BudgetUserPaused',\r\n];\r\n\r\nexport const CAMPAIGN_TYPE_DISPLAY = _TL_('Display');\r\nexport const CAMPAIGN_TYPE_NATIVE = _TL_('Native');\r\nexport const CAMPAIGN_TYPE_ONLINE_VIDEO = _TL_('Online video');\r\nexport const CAMPAIGN_TYPE_FEED_BASED = _TL_('Feed-based');\r\n\r\nexport const DEFAULT_CAMPAIGN_SUBTYPE_FILTER = \"CampaignSubType in ['AudienceDynamicFeedBased', 'AudienceFeedBased', 'AudienceStatic', 'AudienceVideoAds', 'BrandAwarenessVideoAds', 'DisplayAds']\";\r\n","export const getSelectedCampaignsGridColumns = (i18n => [{\r\n key: 'CampaignName',\r\n name: i18n.getString(_TL_('Campaign name')),\r\n fieldName: 'Name',\r\n}]);\r\n","export const budgetFormatOptions = {\r\n compact: 'short',\r\n minimumFractionDigits: 2,\r\n maximumFractionDigits: 2,\r\n};\r\n","import PropTypes from 'prop-types';\r\nimport React, { useCallback, useContext, useMemo } from 'react';\r\nimport { withServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport { GridContext } from '@bingads-webui-grid/grid-context';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { useWizardService, WIZARD_EVENTS } from '@bingads-webui-react/wizard';\r\nimport {\r\n createTableColumn,\r\n DataGrid,\r\n DataGridBody,\r\n DataGridCell,\r\n DataGridHeader,\r\n DataGridHeaderCell,\r\n DataGridRow,\r\n Spinner,\r\n TableCellLayout,\r\n} from '@fluentui/react-components';\r\nimport { Pause12Filled, PresenceBusy12Filled } from '@fluentui/react-icons';\r\nimport { budgetFormatOptions } from '../../constants/budget-format-options';\r\nimport {\r\n CAMPAIGN_PAUSED_STATUSES,\r\n CAMPAIGN_TYPE_DISPLAY,\r\n CAMPAIGN_TYPE_FEED_BASED,\r\n CAMPAIGN_TYPE_NATIVE,\r\n CAMPAIGN_TYPE_ONLINE_VIDEO,\r\n} from '../../constants/campaign';\r\nimport { EDIT_INTENT } from '../../constants/intents';\r\nimport { useSelectCampaignGridStyles } from '../../styles';\r\n\r\nconst getCampaignSubtypeText = (subType) => {\r\n switch (subType) {\r\n case 'AudienceStatic':\r\n return CAMPAIGN_TYPE_NATIVE;\r\n case 'BrandAwarenessVideoAds':\r\n case 'AudienceVideoAds':\r\n return CAMPAIGN_TYPE_ONLINE_VIDEO;\r\n case 'AudienceFeedBased':\r\n case 'AudienceDynamicFeedBased':\r\n return CAMPAIGN_TYPE_FEED_BASED;\r\n case 'DisplayAds':\r\n default:\r\n return CAMPAIGN_TYPE_DISPLAY;\r\n }\r\n};\r\n\r\nconst getAudienceTargetingText = (targetingEnabled) => {\r\n if (targetingEnabled === null) {\r\n return _TL_('');\r\n }\r\n\r\n return targetingEnabled ? _TL_('Enabled') : _TL_('Disabled');\r\n};\r\n\r\nconst getColumns = ({ CurrencyCode, i18n }) => [\r\n createTableColumn({\r\n columnId: 'Name',\r\n compare: (a, b) => a.Name.localeCompare(b.Name),\r\n renderCell: ((campaign) => {\r\n let nameIcon = ;\r\n if (CAMPAIGN_PAUSED_STATUSES.includes(campaign.Status)) {\r\n nameIcon = ;\r\n } else if (!campaign.IsAudienceTargetingEnabled) {\r\n nameIcon = ;\r\n }\r\n return (\r\n \r\n {campaign.Name}\r\n \r\n );\r\n }),\r\n renderHeaderCell: () => i18n.getString(_TL_('Campaign name')),\r\n }),\r\n createTableColumn({\r\n columnId: 'CampaignSubType',\r\n renderCell: campaign => i18n.getString(getCampaignSubtypeText(campaign.CampaignSubType)),\r\n renderHeaderCell: () => i18n.getString(_TL_('Campaign type')),\r\n }),\r\n createTableColumn({\r\n columnId: 'IsAudienceTargetingEnabled',\r\n renderCell: campaign => i18n.getString(getAudienceTargetingText(campaign.IsAudienceTargetingEnabled)),\r\n renderHeaderCell: () => i18n.getString(_TL_('Audience targeting')),\r\n }),\r\n createTableColumn({\r\n columnId: 'DailyTargetBudgetAmount',\r\n compare: (a, b) => a.DailyTargetBudgetAmount - b.DailyTargetBudgetAmount,\r\n renderCell: campaign => i18n.formatCurrency(campaign.DailyTargetBudgetAmount, CurrencyCode, budgetFormatOptions),\r\n renderHeaderCell: () => i18n.getString(_TL_('Budget per day')),\r\n }),\r\n createTableColumn({\r\n columnId: 'IsEligibleForMSANLiftExperiment',\r\n compare: (a, b) => a.IsEligibleForMSANLiftExperiment - b.IsEligibleForMSANLiftExperiment,\r\n renderCell: campaign => i18n.getString(campaign.IsEligibleForMSANLiftExperiment ? _TL_('Eligible') : _TL_('Ineligible')),\r\n renderHeaderCell: () => i18n.getString(_TL_('Campaign eligibility')),\r\n }),\r\n];\r\n\r\nconst SelectCampaignsGridInternal = ({\r\n onCampaignsChange,\r\n serverContext,\r\n}) => {\r\n const styles = useSelectCampaignGridStyles();\r\n\r\n const { CurrentAccount } = serverContext;\r\n const { CurrencyCode } = CurrentAccount;\r\n\r\n const { dispatch, state } = useContext(GridContext);\r\n const { state: wizardState, send } = useWizardService();\r\n const i18n = useContext(I18nContext);\r\n const columns = getColumns({ CurrencyCode, i18n });\r\n\r\n const onChangeSelectedCampaigns = useCallback((_event, { selectedItems }) => {\r\n const { selectedCampaignsById } = wizardState.context.wizardData;\r\n\r\n const eligibleCampaigns = state.items ? state.items.filter(campaign => campaign.IsEligibleForMSANLiftExperiment) : [];\r\n // Datagrid nas no notion of disabled items, so once something on page is selected - it always gives you back the entire page when clicking select all\r\n const isSelectAll = selectedItems.size >= state.pagination.pageSize;\r\n if (isSelectAll) {\r\n const isAllEligibleCampaignsSelected = eligibleCampaigns.every(campaign => selectedCampaignsById[campaign.Id]);\r\n if (isAllEligibleCampaignsSelected) {\r\n eligibleCampaigns.forEach((campaign) => {\r\n delete selectedCampaignsById[campaign.Id];\r\n });\r\n } else {\r\n eligibleCampaigns.forEach((campaign) => {\r\n selectedCampaignsById[campaign.Id] = campaign;\r\n });\r\n }\r\n } else {\r\n eligibleCampaigns.forEach((campaign) => {\r\n if (selectedItems.has(campaign.Id)) {\r\n selectedCampaignsById[campaign.Id] = campaign;\r\n } else if (selectedCampaignsById[campaign.Id]) {\r\n delete selectedCampaignsById[campaign.Id];\r\n }\r\n });\r\n }\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, { selectedCampaignsById });\r\n onCampaignsChange({ count: Object.keys(selectedCampaignsById).length });\r\n }, [onCampaignsChange, send, state.items, state.pagination.pageSize, wizardState.context.wizardData]);\r\n\r\n const selectedItems = useMemo(() => {\r\n const selectedCampaignsIds = Object.keys(wizardState.context.wizardData.selectedCampaignsById).map(idAsString => Number(idAsString));\r\n return new Set(selectedCampaignsIds);\r\n // eslint-disable-next-line\r\n }, [wizardState.context.wizardData.selectedCampaignsById, Object.keys(wizardState.context.wizardData.selectedCampaignsById).length]);\r\n\r\n const onSortChange = useCallback((e, { sortColumn, sortDirection }) => {\r\n dispatch({\r\n type: 'UPDATE_SORTED_COLUMN',\r\n payload: {\r\n ...state.sortedColumn,\r\n fieldName: sortColumn,\r\n isSortDescending: sortDirection === 'descending',\r\n },\r\n });\r\n }, [dispatch, state]);\r\n\r\n const { isInitialized, intent } = wizardState.context.wizardData;\r\n const isEdit = intent === EDIT_INTENT;\r\n return (\r\n campaign.Id}\r\n items={state.items || []}\r\n onSelectionChange={onChangeSelectedCampaigns}\r\n onSortChange={onSortChange}\r\n selectionMode=\"multiselect\"\r\n sortable\r\n selectedItems={selectedItems}\r\n >\r\n \r\n \r\n {({ renderHeaderCell }) => (\r\n {renderHeaderCell()}\r\n )}\r\n \r\n \r\n {((isEdit && !isInitialized) || state.items === null) ? (\r\n \r\n ) : (\r\n \r\n {({ item, rowId }) => (\r\n \r\n {({ renderCell }) => (\r\n \r\n {renderCell(item)}\r\n \r\n )}\r\n \r\n )}\r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nSelectCampaignsGridInternal.propTypes = {\r\n onCampaignsChange: PropTypes.func.isRequired,\r\n serverContext: PropTypes.shape({\r\n CurrentAccount: PropTypes.shape({\r\n CurrencyCode: PropTypes.string.isRequired,\r\n }).isRequired,\r\n }).isRequired,\r\n};\r\n\r\nexport const SelectCampaignsGrid = withServerContext(SelectCampaignsGridInternal);\r\n","import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';\r\nimport _ from 'underscore';\r\nimport { GridContext } from '@bingads-webui-grid/grid-context';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { Dropdown, Input, Option } from '@fluentui/react-components';\r\nimport { SearchRegular } from '@fluentui/react-icons';\r\nimport { Stack } from '@fluentui/react/lib/Stack';\r\nimport {\r\n CAMPAIGN_TYPE_DISPLAY,\r\n CAMPAIGN_TYPE_FEED_BASED,\r\n CAMPAIGN_TYPE_NATIVE,\r\n CAMPAIGN_TYPE_ONLINE_VIDEO,\r\n DEFAULT_CAMPAIGN_SUBTYPE_FILTER,\r\n} from '../../constants/campaign';\r\nimport { useFilterDropdownStyles } from '../../styles';\r\n\r\nconst campaignTypes = [\r\n CAMPAIGN_TYPE_DISPLAY,\r\n CAMPAIGN_TYPE_NATIVE,\r\n CAMPAIGN_TYPE_ONLINE_VIDEO,\r\n CAMPAIGN_TYPE_FEED_BASED,\r\n];\r\n\r\nconst debouncedEditableFilterDispatch = _.debounce((currentEditableFilterPayload, dispatch) => dispatch({ type: 'SET_EDITABLE_FILTER', payload: currentEditableFilterPayload }), 300);\r\n\r\nexport const SelectCampaignsToolbar = () => {\r\n const styles = useFilterDropdownStyles();\r\n\r\n const i18n = useContext(I18nContext);\r\n const searchBoxPlaceholder = i18n.getString(_TL_('Search campaigns'));\r\n const inputLabel = i18n.getString(_TL_('Campaign name search'));\r\n const dropdownPlaceholder = i18n.getString(_TL_('Campaign types: All'));\r\n const dropdownLabel = i18n.getString(_TL_('Campaign type filter'));\r\n\r\n const { dispatch } = useContext(GridContext);\r\n const [campaignSearchText, setCampaignSearchText] = useState('');\r\n const [selectedCampaignTypes, setSelectedCampaignTypes] = useState([]);\r\n\r\n const dropdownButtonText = useMemo(\r\n () => {\r\n if (selectedCampaignTypes.length === 0) {\r\n return dropdownPlaceholder;\r\n }\r\n const formattedSelectionText = selectedCampaignTypes.join(i18n.getString(_TL_(', ')));\r\n const statusText = selectedCampaignTypes.length > 1 ? i18n.getString(_TL_('Campaign types:')) : i18n.getString(_TL_('Campaign type:'));\r\n return `${statusText} ${formattedSelectionText}`;\r\n },\r\n [i18n, dropdownPlaceholder, selectedCampaignTypes]\r\n );\r\n\r\n const currentEditableFilterPayload = useMemo(() => {\r\n const filterPayloadBase = `contains(tolower(Name), '${campaignSearchText.toLowerCase()}')`;\r\n if (selectedCampaignTypes.length) {\r\n const formattedCampaignSubTypes = selectedCampaignTypes.map((campaignSubTypeDisplayText) => {\r\n switch (campaignSubTypeDisplayText) {\r\n case CAMPAIGN_TYPE_DISPLAY:\r\n return 'DisplayAds';\r\n case CAMPAIGN_TYPE_NATIVE:\r\n return 'AudienceStatic';\r\n case CAMPAIGN_TYPE_FEED_BASED:\r\n return \"AudienceDynamicFeedBased', 'AudienceFeedBased\";\r\n case CAMPAIGN_TYPE_ONLINE_VIDEO:\r\n default:\r\n return \"AudienceVideoAds', 'BrandAwarenessVideoAds\";\r\n }\r\n });\r\n const formattedFilter = formattedCampaignSubTypes.map(campaignSubType => `'${campaignSubType}'`).join(', ');\r\n return `${filterPayloadBase} and CampaignSubType in [${formattedFilter}]`;\r\n }\r\n return `${filterPayloadBase} and ${DEFAULT_CAMPAIGN_SUBTYPE_FILTER}`;\r\n }, [campaignSearchText, selectedCampaignTypes]);\r\n\r\n useEffect(() => {\r\n debouncedEditableFilterDispatch(currentEditableFilterPayload, dispatch);\r\n }, [currentEditableFilterPayload, dispatch]);\r\n\r\n const onChangeSearchInput = useCallback((_e, { value }) => {\r\n setCampaignSearchText(value);\r\n }, []);\r\n\r\n const onOptionSelect = useCallback((_e, data) => {\r\n setSelectedCampaignTypes(data.selectedOptions);\r\n }, []);\r\n\r\n return (\r\n \r\n }\r\n onChange={onChangeSearchInput}\r\n placeholder={searchBoxPlaceholder}\r\n value={campaignSearchText}\r\n />\r\n {dropdownButtonText}\r\n }\r\n data-selectedOptions={selectedCampaignTypes.length ? selectedCampaignTypes : dropdownPlaceholder}\r\n multiselect\r\n onOptionSelect={onOptionSelect}\r\n selectedOptions={selectedCampaignTypes}\r\n >\r\n {campaignTypes.map(campaignType => (\r\n \r\n {i18n.getString(campaignType)}\r\n \r\n ))}\r\n \r\n \r\n );\r\n};\r\n","import PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\nimport React, { useContext } from 'react';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport {\r\n Button,\r\n useId,\r\n} from '@fluentui/react-components';\r\nimport {\r\n Dismiss12Regular,\r\n} from '@fluentui/react-icons';\r\nimport { useCampaignNameTagStyles } from '../../styles';\r\n\r\nexport const CampaignNameTag = ({\r\n campaign,\r\n onRemove,\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n const tagsListId = useId('selectedCampaignsTagsList');\r\n const removeTagId = `${tagsListId}-remove-${campaign.Id}`;\r\n const campaignName = i18n.getString(_TL_('{{name}}'), { name: campaign.Name });\r\n const styles = useCampaignNameTagStyles();\r\n\r\n return (\r\n }\r\n iconPosition=\"after\"\r\n id={campaign.Id}\r\n onClick={() => onRemove(campaign.Id)}\r\n shape=\"rounded\"\r\n size=\"small\"\r\n >\r\n {campaignName}\r\n \r\n );\r\n};\r\n\r\nCampaignNameTag.propTypes = {\r\n campaign: PropTypes.shape({\r\n Id: PropTypes.number.isRequired,\r\n Name: PropTypes.string.isRequired,\r\n }).isRequired,\r\n onRemove: PropTypes.func.isRequired,\r\n};\r\n","import PropTypes from 'prop-types';\r\nimport React, { useCallback, useContext, useMemo } 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 makeStyles,\r\n Caption1Strong,\r\n Accordion,\r\n AccordionItem,\r\n AccordionHeader,\r\n AccordionPanel,\r\n} from '@fluentui/react-components';\r\nimport { selectedCampaignsAccordionStyles } from '../../page-layout';\r\nimport { CampaignNameTag } from './campaign-name-tag';\r\n\r\nconst useStyles = makeStyles(selectedCampaignsAccordionStyles);\r\n\r\nexport const SelectedCampaignsAccordion = ({ onRemoveCampaign, selectedCampaigns }) => {\r\n const styles = useStyles();\r\n const i18n = useContext(I18nContext);\r\n\r\n const selectedCampaignsHeader = i18n.getString(_TL_('Campaigns'));\r\n\r\n const numCampaigns = useMemo(() => selectedCampaigns.length, [selectedCampaigns]);\r\n\r\n const { state: wizardState, send } = useWizardService();\r\n const removeCampaign = useCallback((id) => {\r\n const { selectedCampaignsById } = wizardState.context.wizardData;\r\n delete selectedCampaignsById[id];\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, { selectedCampaignsById });\r\n onRemoveCampaign({ count: Object.keys(selectedCampaignsById).length });\r\n }, [onRemoveCampaign, send, wizardState.context.wizardData]);\r\n\r\n return (\r\n \r\n \r\n \r\n {selectedCampaignsHeader}\r\n {numCampaigns} {i18n.getString(_TL_('campaigns'))}\r\n \r\n \r\n \r\n {selectedCampaigns.map(campaign => (\r\n \r\n ))}\r\n
\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nSelectedCampaignsAccordion.propTypes = {\r\n onRemoveCampaign: PropTypes.func.isRequired,\r\n selectedCampaigns: PropTypes.arrayOf(PropTypes.shape({\r\n Id: PropTypes.number.isRequired,\r\n Name: PropTypes.string.isRequired,\r\n })).isRequired,\r\n};\r\n","import PropTypes from 'prop-types';\r\nimport React, { useContext, useMemo } from 'react';\r\nimport { withServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { useWizardService } from '@bingads-webui-react/wizard';\r\nimport { Stack } from '@fluentui/react/lib/Stack';\r\nimport {\r\n makeStyles,\r\n Subtitle1,\r\n Subtitle2,\r\n Body1,\r\n Caption1,\r\n Caption1Strong,\r\n mergeClasses,\r\n} from '@fluentui/react-components';\r\nimport {\r\n DrawerBody,\r\n DrawerHeader,\r\n DrawerHeaderTitle,\r\n DrawerInline,\r\n} from '@fluentui/react-drawer';\r\nimport { budgetFormatOptions } from '../../constants/budget-format-options';\r\nimport { studySummaryDrawerStyles } from '../../page-layout';\r\nimport { ImpressionThresholdMessage } from '../impression-threshold-message';\r\nimport { SelectedCampaignsAccordion } from './selected-campaigns-accordion';\r\n\r\nconst useStyles = makeStyles(studySummaryDrawerStyles);\r\n\r\nconst StudySummaryDrawerInternal = ({ onRemoveCampaign, serverContext }) => {\r\n const styles = useStyles();\r\n const { CurrentAccount } = serverContext;\r\n const { CurrencyCode } = CurrentAccount;\r\n const i18n = useContext(I18nContext);\r\n const studySummaryTitle = i18n.getString(_TL_('Experiment summary'));\r\n const campaignSelectionTitle = i18n.getString(_TL_('Selected campaigns'));\r\n const totalBudgetLabel = i18n.getString(_TL_('Total budget for selected campaigns'));\r\n\r\n const { state: wizardState } = useWizardService();\r\n const { selectedCampaignsById } = wizardState.context.wizardData;\r\n\r\n const selectedCampaigns = Object.keys(selectedCampaignsById).map(campaignId => selectedCampaignsById[campaignId]);\r\n const totalBudgetFormatted = useMemo(() => {\r\n if (!CurrencyCode) return '--';\r\n const total = selectedCampaigns.reduce((acc, campaign) => {\r\n const dailyTargetBudgetAmount = campaign.DailyTargetBudgetAmount ? campaign.DailyTargetBudgetAmount : 0;\r\n const dailyBudget = campaign.Budget && campaign.Budget.Amount ? campaign.Budget.Amount : dailyTargetBudgetAmount;\r\n return acc + dailyBudget;\r\n }, 0);\r\n return i18n.formatCurrency(total, CurrencyCode, budgetFormatOptions);\r\n }, [selectedCampaigns, i18n, CurrencyCode]);\r\n\r\n return (\r\n \r\n \r\n \r\n {studySummaryTitle} \r\n \r\n \r\n \r\n \r\n \r\n {campaignSelectionTitle} \r\n \r\n \r\n {totalBudgetLabel}\r\n {totalBudgetFormatted}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nStudySummaryDrawerInternal.propTypes = {\r\n onRemoveCampaign: PropTypes.func.isRequired,\r\n serverContext: PropTypes.shape({\r\n CurrentAccount: PropTypes.shape({\r\n CurrencyCode: PropTypes.string.isRequired,\r\n }).isRequired,\r\n }).isRequired,\r\n};\r\n\r\nexport const StudySummaryDrawer = withServerContext(StudySummaryDrawerInternal);\r\n","import { getTheme } from '@fluentui/react';\r\nimport {\r\n Caption1,\r\n makeStyles,\r\n} from '@fluentui/react-components';\r\nimport React, { useContext } from 'react';\r\nimport { curlyTemplate } from '@bingads-webui/primitive-utilities';\r\nimport { GridContext } from '@bingads-webui-grid/grid-context';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { Paginator } from '../../paginator';\r\nimport { noDataStyles } from '../../styles';\r\n\r\nconst { palette } = getTheme();\r\nconst useStyles = makeStyles({\r\n noData: noDataStyles(palette),\r\n});\r\n\r\n\r\nexport const SelectCampaignsFooter = () => {\r\n const i18n = useContext(I18nContext);\r\n const styles = useStyles();\r\n const { state } = useContext(GridContext);\r\n\r\n return state.items && state.items.length > 0\r\n ? (\r\n <>\r\n {curlyTemplate(i18n.getString(_TL_('{{count}} Campaign(s)')))({ count: state.totalCount })}\r\n \r\n \r\n ) : (\r\n \r\n {i18n.getString(_TL_('There are no campaigns.'))}\r\n
\r\n );\r\n};\r\n","import { AlertHelper } from '@bingads-webui-campaign/alert-helper';\r\nimport { GridContext } from '@bingads-webui-grid/grid-context';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { ScopeContext } from '@bingads-webui-react/scope-service';\r\nimport { useCallback, useContext, useEffect } from 'react';\r\nimport { fetchLiftExperimentCampaigns } from '../../../fetch/lift-experiment-campaigns';\r\n\r\nexport const SelectCampaignsGridDataSource = () => {\r\n const { state, dispatch } = useContext(GridContext);\r\n const i18n = useContext(I18nContext);\r\n const { scope } = useContext(ScopeContext);\r\n\r\n const getOrderBy = useCallback((column) => {\r\n if (!column.fieldName) {\r\n return undefined;\r\n }\r\n\r\n return `${column.fieldName} ${column.isSortDescending ? 'DESC' : 'ASC'}`;\r\n }, []);\r\n\r\n const onSuccess = useCallback((response) => {\r\n dispatch({ type: 'FINISH_LOAD_DATA', payload: { items: response.value, totalCount: response['@odata.count'] } });\r\n }, [dispatch]);\r\n const onFailure = useCallback((message) => {\r\n const alertHelper = new AlertHelper({ i18n });\r\n alertHelper.showError(message);\r\n }, [i18n]);\r\n\r\n useEffect(() => {\r\n const orderBy = getOrderBy(state.sortedColumn);\r\n dispatch({ type: 'START_LOAD_DATA' });\r\n fetchLiftExperimentCampaigns(scope.values, {\r\n query: {\r\n $count: true,\r\n $top: state.pagination.pageSize,\r\n $skip: ((state.pagination.pageNumber - 1) * state.pagination.pageSize),\r\n $filter: state.editableFilter,\r\n ...(orderBy ? { $orderby: orderBy } : {}),\r\n },\r\n onSuccess,\r\n onFailure,\r\n });\r\n }, [dispatch, getOrderBy, onFailure, onSuccess, state.editableFilter, state.pagination, state.sortedColumn, scope.values]);\r\n\r\n return null;\r\n};\r\n","import { edmCampaign } from '@bingads-webui/edm-campaign';\r\n\r\nexport const fetchLiftExperimentCampaigns = (\r\n { aid, cid },\r\n {\r\n onFailure,\r\n onSuccess,\r\n query,\r\n }\r\n) => edmCampaign\r\n .Customers.$withKey(cid)\r\n .Accounts.$withKey(aid)\r\n .LiftExperimentCampaigns\r\n .get(query)\r\n .toPromise()\r\n .then((response) => {\r\n onSuccess(response);\r\n })\r\n .catch(() => onFailure(_TL_('Failed to fetch campaigns')));\r\n","import React, { useCallback, useContext, useMemo } from 'react';\r\nimport classNames from 'classnames';\r\nimport { GridContextProvider } from '@bingads-webui-grid/grid-context';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { useWizardService, WIZARD_EVENTS } from '@bingads-webui-react/wizard';\r\nimport { MessageBar, MessageBarBody } from '@fluentui/react-message-bar';\r\nimport { Stack } from '@fluentui/react/lib/Stack';\r\nimport {\r\n Card,\r\n CardFooter,\r\n makeStyles,\r\n Text,\r\n Title3,\r\n} from '@fluentui/react-components';\r\nimport { getTheme, SelectionMode } from '@fluentui/react';\r\nimport { DEFAULT_CAMPAIGN_SUBTYPE_FILTER } from '../constants/campaign';\r\nimport { getSelectedCampaignsGridColumns } from '../constants/selected-campaigns-grid-columns';\r\nimport {\r\n footerStyles,\r\n selectCampaignsStepLayoutTokens,\r\n selectCampaignsStyles\r\n} from '../page-layout';\r\nimport { getUIBlockerStyle, noDataStyles } from '../styles';\r\nimport { validateCampaignCount } from '../validate';\r\nimport { SelectCampaignsGrid } from './select-campaigns-grid/select-campaigns-grid';\r\nimport { SelectCampaignsToolbar } from './select-campaigns-grid/select-campaigns-toolbar';\r\nimport { StudySummaryDrawer } from './summary/study-summary-drawer';\r\nimport { SelectCampaignsFooter } from './select-campaigns-grid/select-campaigns-footer';\r\nimport { SelectCampaignsGridDataSource } from './select-campaigns-grid/select-campaigns-grid-data-source';\r\n\r\nconst { palette } = getTheme();\r\n\r\nconst useStyles = makeStyles({\r\n footer: footerStyles,\r\n ...selectCampaignsStyles,\r\n noData: noDataStyles(palette),\r\n});\r\n\r\nexport const SelectCampaignsStep = () => {\r\n useDefaultStyles(getUIBlockerStyle);\r\n const styles = useStyles();\r\n\r\n const i18n = useContext(I18nContext);\r\n const title = i18n.getString(_TL_('Choose one or more campaigns for this experiment'));\r\n const instructions = i18n.getString(_TL_('Select up to 10 campaigns. Please review the campaign eligibility requirements listed in the summary to ensure that your experiment runs successfully.'));\r\n\r\n const { state: wizardState, send } = useWizardService();\r\n const { wizardData } = wizardState.context;\r\n const {\r\n isValid,\r\n selectCampaignsError,\r\n showError,\r\n } = wizardData;\r\n\r\n const onChangeSelectedCampaigns = useCallback(({ count }) => {\r\n const results = validateCampaignCount({ count, i18n });\r\n send(WIZARD_EVENTS.UPDATE_WIZARD_DATA, {\r\n isValid: results.isValid,\r\n selectCampaignsError: results.error,\r\n });\r\n }, [i18n, send]);\r\n\r\n const initialGridContext = useMemo(() => ({\r\n editableFilter: DEFAULT_CAMPAIGN_SUBTYPE_FILTER,\r\n items: [],\r\n pagination: {\r\n pageNumber: 1,\r\n pageSize: 10,\r\n },\r\n selectedColumns: getSelectedCampaignsGridColumns(i18n),\r\n selectedItems: new Set(),\r\n selectionMode: SelectionMode.multiple,\r\n totalCount: 0,\r\n }), [i18n]);\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n
\r\n {title}\r\n {instructions}\r\n {(showError && !isValid) && (\r\n \r\n {selectCampaignsError}\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 {primaryColumnHeader}\r\n \r\n
\r\n ),\r\n },\r\n {\r\n columnKey: 'control',\r\n label: (\r\n \r\n {controlLabel}\r\n \r\n
\r\n ),\r\n },\r\n {\r\n columnKey: 'treatment',\r\n label: (\r\n \r\n {treatmentLabel}\r\n \r\n
\r\n ),\r\n },\r\n {\r\n columnKey: 'lift',\r\n label: (\r\n \r\n {liftLabel || defaultLiftLabel}\r\n \r\n
\r\n ),\r\n },\r\n {\r\n columnKey: 'confidence',\r\n label: (\r\n \r\n {confidenceLabel}\r\n \r\n
\r\n ),\r\n },\r\n ];\r\n const getPercentageString = useCallback((value) => {\r\n if (value === 'N/A') {\r\n return '--';\r\n }\r\n const percentageValue = i18n.formatDecimalToFixed(value * 100, { digits: 2 });\r\n const percentageString = i18n.getString(_TL_('{{value}}%'), {\r\n value: percentageValue,\r\n });\r\n return percentageString;\r\n }, [i18n]);\r\n\r\n return (\r\n \r\n \r\n \r\n {columns.map(column => (\r\n \r\n {column.label}\r\n \r\n ))}\r\n \r\n \r\n \r\n {items.map(item => (\r\n \r\n {item.name}\r\n {getPercentageString(item.control)}\r\n {getPercentageString(item.treatment)}\r\n {getPercentageString(item.lift)}\r\n {i18n.getString(getConfidenceLevel(item.confidence))}\r\n \r\n ))}\r\n \r\n
\r\n );\r\n};\r\n\r\nOverviewTable.propTypes = {\r\n items: PropTypes.arrayOf(PropTypes.shape({\r\n id: PropTypes.oneOfType([\r\n PropTypes.number,\r\n PropTypes.string,\r\n ]).isRequired,\r\n name: PropTypes.string.isRequired,\r\n confidence: PropTypes.string.isRequired,\r\n control: PropTypes.number.isRequired,\r\n lift: PropTypes.number.isRequired,\r\n treatment: PropTypes.number.isRequired,\r\n })).isRequired,\r\n liftHelpTopic: PropTypes.string.isRequired,\r\n liftLabel: PropTypes.string,\r\n primaryColumnHeader: PropTypes.string.isRequired,\r\n primaryColumnHelpTopic: PropTypes.string.isRequired,\r\n title: PropTypes.string.isRequired,\r\n};\r\n\r\nOverviewTable.defaultProps = {\r\n liftLabel: null,\r\n};\r\n","import PropTypes from 'prop-types';\r\nimport React, { useContext, useMemo } from 'react';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport {\r\n Card,\r\n Subtitle2,\r\n makeStyles,\r\n} from '@fluentui/react-components';\r\n\r\nconst useStyles = makeStyles({\r\n root: {\r\n marginBottom: '12px',\r\n },\r\n row: {\r\n alignItems: 'start',\r\n columnGap: '10px',\r\n display: 'grid',\r\n gridTemplateColumns: '12% 88%',\r\n position: 'relative',\r\n },\r\n});\r\n\r\nconst sortByRank = (a, b) => {\r\n if (a.rank < b.rank) {\r\n return -1;\r\n }\r\n if (b.rank < a.rank) {\r\n return 1;\r\n }\r\n return 0;\r\n};\r\n\r\nconst PerformersList = ({ data, label }) => {\r\n const styles = useStyles();\r\n const i18n = useContext(I18nContext);\r\n const sortedData = useMemo(() => {\r\n if (data) {\r\n return [...data].sort(sortByRank);\r\n }\r\n return null;\r\n }, [data]);\r\n\r\n if (!sortedData) {\r\n return null;\r\n }\r\n\r\n const delimiter = i18n.getString(_TL_(', '));\r\n const list = sortedData.map(performer => (\r\n `${performer.audienceId} (${performer.audienceTypeId})`\r\n )).join(delimiter);\r\n\r\n return (\r\n \r\n {label}\r\n {list}\r\n
\r\n );\r\n};\r\n\r\nPerformersList.propTypes = {\r\n data: PropTypes.arrayOf(PropTypes.shape({\r\n audienceId: PropTypes.oneOfType([\r\n PropTypes.number,\r\n PropTypes.string,\r\n ]).isRequired,\r\n audienceTypeId: PropTypes.oneOfType([\r\n PropTypes.number,\r\n PropTypes.string,\r\n ]).isRequired,\r\n rank: PropTypes.number.isRequired,\r\n })),\r\n label: PropTypes.string.isRequired,\r\n};\r\n\r\nPerformersList.defaultProps = {\r\n data: null,\r\n};\r\n\r\nexport const PositivePerformingAudiencesCard = ({ bottomData, topData }) => {\r\n const i18n = useContext(I18nContext);\r\n const title = i18n.getString(_TL_('Audience performance'));\r\n const highLabel = i18n.getString(_TL_('High-performing'));\r\n const lowLabel = i18n.getString(_TL_('Low-performing'));\r\n const styles = useStyles();\r\n\r\n return (\r\n \r\n
\r\n {title}\r\n \r\n {bottomData.length > 0 && (\r\n \r\n )}\r\n \r\n
\r\n
{sectionTitle}\r\n
\r\n {useSearchLift && (\r\n \r\n {searchLiftTitle}\r\n \r\n \r\n )}\r\n {useVisitLift && (\r\n \r\n {visitLiftTitle}\r\n \r\n \r\n )}\r\n {useConversionLift && (\r\n \r\n {conversionLiftTitle}\r\n \r\n \r\n )}\r\n
\r\n
\r\n {label}\r\n \r\n
\r\n \r\n {displayedValue}\r\n \r\n \r\n );\r\n};\r\n\r\nLift.propTypes = {\r\n color: PropTypes.string.isRequired,\r\n helpTopic: PropTypes.string.isRequired,\r\n label: PropTypes.string.isRequired,\r\n value: PropTypes.number.isRequired,\r\n};\r\n","import PropTypes from 'prop-types';\r\nimport React, { useContext } from 'react';\r\nimport { HelpButton } from '@bingads-webui-react/help-popup';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { Stack } from '@fluentui/react/lib/Stack';\r\nimport {\r\n Caption1,\r\n Caption1Strong,\r\n} from '@fluentui/react-components';\r\nimport { useStyles } from './styles';\r\n\r\nexport const ConfidenceLevel = ({ value }) => {\r\n const styles = useStyles();\r\n const i18n = useContext(I18nContext);\r\n const label = i18n.getString(_TL_('Confidence level'));\r\n const learnMore = i18n.getString(_TL_('Click to learn more about'));\r\n\r\n return (\r\n \r\n \r\n {label}\r\n \r\n
\r\n {value}\r\n \r\n );\r\n};\r\n\r\nConfidenceLevel.propTypes = {\r\n value: PropTypes.string.isRequired,\r\n};\r\n","import PropTypes from 'prop-types';\r\nimport React, { useCallback, useContext } from 'react';\r\nimport { HelpButton } from '@bingads-webui-react/help-popup';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { HorizontalBarChart } from '@fluentui/react-charting';\r\nimport { useStyles } from './styles';\r\n\r\nconst dataVizColors = {\r\n control: '#637CEF',\r\n conversion: '#CA5010',\r\n search: '#9373C0',\r\n visit: '#E3008C',\r\n};\r\n\r\nconst getPercentageString = (value, i18n) => {\r\n if (value === 'N/A') {\r\n return '--';\r\n }\r\n const percentageValue = i18n.formatDecimalToFixed(value * 100, { digits: 2 });\r\n return i18n.getString(_TL_('{{value}}%'), {\r\n value: percentageValue,\r\n });\r\n};\r\n\r\nconst CustomDataLabel = ({ chartData }) => {\r\n const i18n = useContext(I18nContext);\r\n const rawValue = chartData[0].horizontalBarChartdata.x;\r\n return getPercentageString(rawValue, i18n);\r\n};\r\n\r\nCustomDataLabel.propTypes = {\r\n chartData: PropTypes.arrayOf(PropTypes.shape({\r\n horizontalBarChartdata: PropTypes.shape({\r\n x: PropTypes.number.isRequired,\r\n y: PropTypes.number.isRequired,\r\n }).isRequired,\r\n })).isRequired,\r\n};\r\n\r\nexport const TreatmentControl = ({\r\n color,\r\n control,\r\n treatment,\r\n}) => {\r\n const styles = useStyles();\r\n const i18n = useContext(I18nContext);\r\n const treatmentLabel = i18n.getString(_TL_('Treatment'));\r\n const controlLabel = i18n.getString(_TL_('Control'));\r\n const learnMore = i18n.getString(_TL_('Click to learn more about'));\r\n const maxValue = treatment > control ? treatment : control;\r\n\r\n const data = [\r\n {\r\n chartData: [\r\n {\r\n color,\r\n horizontalBarChartdata: { x: treatment, y: maxValue },\r\n legend: treatmentLabel,\r\n yAxisCalloutData: getPercentageString(treatment, i18n),\r\n },\r\n ],\r\n chartTitle: (\r\n \r\n {treatmentLabel}\r\n \r\n \r\n ),\r\n },\r\n {\r\n chartData: [\r\n {\r\n color: dataVizColors.control,\r\n horizontalBarChartdata: { x: control, y: maxValue },\r\n legend: controlLabel,\r\n yAxisCalloutData: getPercentageString(control, i18n),\r\n },\r\n ],\r\n chartTitle: (\r\n \r\n {controlLabel}\r\n \r\n \r\n ),\r\n },\r\n ];\r\n\r\n const getCustomDataLabel = useCallback(props => (\r\n \r\n ), []);\r\n\r\n return (\r\n \r\n );\r\n};\r\n\r\nTreatmentControl.propTypes = {\r\n color: PropTypes.string.isRequired,\r\n control: PropTypes.number.isRequired,\r\n treatment: PropTypes.number.isRequired,\r\n};\r\n","import PropTypes from 'prop-types';\r\nimport React from 'react';\r\nimport {\r\n Card,\r\n Subtitle1,\r\n} from '@fluentui/react-components';\r\nimport { Lift } from './lift';\r\nimport { ConfidenceLevel } from './confidence-level';\r\nimport { TreatmentControl } from './treatment-control';\r\nimport { useStyles } from './styles';\r\n\r\nexport const PerformanceCard = ({\r\n color,\r\n confidence,\r\n control,\r\n lift,\r\n liftHelpTopic,\r\n subtitle,\r\n title,\r\n treatment,\r\n}) => {\r\n const styles = useStyles();\r\n const className = `${title.toLowerCase().replace(/ /g, '-')}-overview`;\r\n\r\n return (\r\n \r\n \r\n \r\n {title}\r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nPerformanceCard.propTypes = {\r\n color: PropTypes.string.isRequired,\r\n confidence: PropTypes.string.isRequired,\r\n control: PropTypes.number.isRequired,\r\n lift: PropTypes.number.isRequired,\r\n liftHelpTopic: PropTypes.string.isRequired,\r\n subtitle: PropTypes.string.isRequired,\r\n title: PropTypes.string.isRequired,\r\n treatment: PropTypes.number.isRequired,\r\n};\r\n","import PropTypes from 'prop-types';\r\nimport React, { useContext } from 'react';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { Stack } from '@fluentui/react/lib/Stack';\r\nimport {\r\n Subtitle1,\r\n} from '@fluentui/react-components';\r\nimport { PerformanceCard } from './performance-card/performance-card';\r\n\r\nconst dataVizColors = {\r\n conversion: '#CA5010',\r\n search: '#9373C0',\r\n visit: '#E3008C',\r\n};\r\n\r\nconst tokens = {\r\n childrenGap: 15,\r\n};\r\n\r\nexport const ExperimentOverviewSection = ({\r\n conversionData,\r\n measurementTypes,\r\n searchData,\r\n visitData,\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n const sectionTitle = i18n.getString(_TL_('Overview'));\r\n const searchTitle = i18n.getString(_TL_('Search lift'));\r\n const searchSubtitle = i18n.getString(_TL_('Brand search rate'));\r\n const visitTitle = i18n.getString(_TL_('Visit lift'));\r\n const visitSubtitle = i18n.getString(_TL_('Website visitation rate'));\r\n const conversionTitle = i18n.getString(_TL_('Conversion lift'));\r\n const conversionSubtitle = i18n.getString(_TL_('Conversion rate'));\r\n const { useConversionLift, useSearchLift, useVisitLift } = measurementTypes;\r\n\r\n return (\r\n <>\r\n {sectionTitle}\r\n \r\n {useSearchLift && (\r\n \r\n )}\r\n {useVisitLift && (\r\n \r\n )}\r\n {useConversionLift && (\r\n \r\n )}\r\n \r\n \r\n );\r\n};\r\n\r\nExperimentOverviewSection.propTypes = {\r\n conversionData: PropTypes.shape({\r\n confidence: PropTypes.string.isRequired,\r\n control: PropTypes.number.isRequired,\r\n lift: PropTypes.number.isRequired,\r\n treatment: PropTypes.number.isRequired,\r\n }).isRequired,\r\n measurementTypes: PropTypes.shape({\r\n useConversionLift: PropTypes.bool.isRequired,\r\n useSearchLift: PropTypes.bool.isRequired,\r\n useVisitLift: PropTypes.bool.isRequired,\r\n }).isRequired,\r\n searchData: PropTypes.shape({\r\n confidence: PropTypes.string.isRequired,\r\n control: PropTypes.number.isRequired,\r\n lift: PropTypes.number.isRequired,\r\n treatment: PropTypes.number.isRequired,\r\n }).isRequired,\r\n visitData: PropTypes.shape({\r\n confidence: PropTypes.string.isRequired,\r\n control: PropTypes.number.isRequired,\r\n lift: PropTypes.number.isRequired,\r\n treatment: PropTypes.number.isRequired,\r\n }).isRequired,\r\n};\r\n","import PropTypes from 'prop-types';\r\nimport React, { useContext } from 'react';\r\nimport { LearnMoreLink } from '@bingads-webui-campaign-react/help';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { Stack } from '@fluentui/react/lib/Stack';\r\nimport {\r\n Button,\r\n Menu,\r\n MenuItem,\r\n MenuList,\r\n MenuPopover,\r\n MenuTrigger,\r\n Title3,\r\n} from '@fluentui/react-components';\r\nimport { ArrowDownload20Filled } from '@fluentui/react-icons';\r\n\r\nexport const DownloadMenu = ({\r\n onClickExcel,\r\n onClickJson,\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n const downloadLabel = i18n.getString(_TL_('Download'));\r\n const excelLabel = i18n.getString(_TL_('Excel'));\r\n const jsonLabel = i18n.getString(_TL_('JSON'));\r\n\r\n return (\r\n \r\n );\r\n};\r\n\r\nDownloadMenu.propTypes = {\r\n onClickExcel: PropTypes.func.isRequired,\r\n onClickJson: PropTypes.func.isRequired,\r\n};\r\n\r\nexport const ResultsPageHeader = ({\r\n onClickExcel,\r\n title,\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n const pageDescription = i18n.getString(_TL_('View your reports for conversion lift, search lift, and visit lift. We report specific data points for each lift measurement type: Conversion rate, brand search rate, and website visitation rate. These measurements help you understand how much more likely consumers are to search for your brand, visit your website, and convert on your website after seeing your Audience ads.'));\r\n const downloadLabel = i18n.getString(_TL_('Download'));\r\n\r\n return (\r\n \r\n
\r\n {title}\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n {label}\r\n {!!helpTopic && (\r\n \r\n )}\r\n
\r\n
\r\n {value}\r\n
\r\n \r\n );\r\n};\r\n\r\nStudySummaryCardField.propTypes = {\r\n helpTopic: PropTypes.string,\r\n label: PropTypes.string.isRequired,\r\n value: PropTypes.string.isRequired,\r\n};\r\n\r\nStudySummaryCardField.defaultProps = {\r\n helpTopic: null,\r\n};\r\n\r\nexport const StudySummaryCard = ({\r\n campaigns,\r\n country,\r\n endDate,\r\n keywords,\r\n startDate,\r\n uetTags,\r\n}) => {\r\n const styles = useStyles();\r\n const i18n = useContext(I18nContext);\r\n const cardTitle = i18n.getString(_TL_('Summary'));\r\n const campaignsLabel = i18n.getString(_TL_('Campaigns'));\r\n const campaignsValue = useMemo(() => campaigns.map(campaign => campaign.name).join(i18n.getString(_TL_(', '))), [campaigns, i18n]);\r\n const countryLabel = i18n.getString(_TL_('Country'));\r\n const countryValue = i18n.getString(countries[country].name);\r\n const dateRangeLabel = i18n.getString(_TL_('Experiment dates'));\r\n const dateRangeValue = i18n.getString(_TL_('{{startDate}} - {{endDate}}'), {\r\n startDate: i18n.formatDate(new Date(startDate), { raw: 'MM/dd/yy' }),\r\n endDate: i18n.formatDate(new Date(endDate), { raw: 'MM/dd/yy' }),\r\n });\r\n const keywordsLabel = i18n.getString(_TL_('Keywords'));\r\n const keywordsValue = useMemo(\r\n () => (\r\n keywords.length\r\n ? keywords.join(i18n.getString(_TL_(', ')))\r\n : i18n.getString(_TL_('None selected'))\r\n ),\r\n [keywords, i18n]\r\n );\r\n const uetTagsLabel = i18n.getString(_TL_('UET Tags'));\r\n const uetTagsValue = useMemo(\r\n () => (\r\n uetTags.length\r\n ? uetTags.join(i18n.getString(_TL_(', ')))\r\n : i18n.getString(_TL_('None selected'))\r\n ),\r\n [i18n, uetTags]\r\n );\r\n\r\n return (\r\n \r\n \r\n {cardTitle}\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\nStudySummaryCard.propTypes = {\r\n campaigns: PropTypes.arrayOf(PropTypes.shape({\r\n name: PropTypes.string.isRequired,\r\n })).isRequired,\r\n country: PropTypes.string.isRequired,\r\n endDate: PropTypes.string.isRequired,\r\n keywords: PropTypes.arrayOf(PropTypes.string).isRequired,\r\n startDate: PropTypes.string.isRequired,\r\n uetTags: PropTypes.arrayOf(PropTypes.oneOfType([\r\n PropTypes.number,\r\n PropTypes.string,\r\n ])).isRequired,\r\n};\r\n\r\nconst useSkeletonStyles = makeStyles({\r\n card: {\r\n marginBottom: '12px',\r\n },\r\n firstRow: {\r\n alignItems: 'center',\r\n columnGap: '20px',\r\n display: 'grid',\r\n gridTemplateColumns: '17% 42%',\r\n position: 'relative',\r\n rowGap: '12px',\r\n },\r\n row: {\r\n alignItems: 'center',\r\n columnGap: '20px',\r\n display: 'grid',\r\n gridTemplateColumns: '17% 17%',\r\n paddingTop: '20px',\r\n position: 'relative',\r\n rowGap: '12px',\r\n },\r\n skeletonRoot: {\r\n marginBottom: '12px',\r\n marginLeft: '12px',\r\n marginRight: '12px',\r\n marginTop: '12px',\r\n },\r\n});\r\n\r\nexport const StudySummaryCardSkeleton = () => {\r\n const styles = useSkeletonStyles();\r\n const i18n = useContext(I18nContext);\r\n const loadingMessage = i18n.getString(_TL_('Loading content'));\r\n const cardTitle = i18n.getString(_TL_('Experiment summary'));\r\n\r\n return (\r\n \r\n {cardTitle}\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","import XLSX from 'xlsx';\r\nimport { downloadify } from '@bingads-webui/download-service';\r\n\r\nconst getDateString = () => new Date().toISOString().split('T')[0];\r\n\r\nconst getFileName = (id, extension) => {\r\n const dateString = getDateString();\r\n return `Lift_Experiment_Result_${id}_${dateString}.${extension}`;\r\n};\r\n\r\nconst addWorksheet = (results, workbook, sheetName) => {\r\n if (results && results.length > 0) {\r\n const worksheet = XLSX.utils.json_to_sheet(results);\r\n XLSX.utils.book_append_sheet(workbook, worksheet, sheetName);\r\n }\r\n};\r\n\r\nexport const downloadExcel = (id, data) => {\r\n const workbook = XLSX.utils.book_new();\r\n const fileName = getFileName(id, 'xlsx');\r\n\r\n addWorksheet(data.Campaign_Result, workbook, 'CampaignResult');\r\n addWorksheet(data.CID_Result, workbook, 'CIDResult');\r\n addWorksheet(data.TargetType_Result, workbook, 'TargetTypeResult');\r\n addWorksheet(data.Top5_Result, workbook, 'Top5Result');\r\n addWorksheet(data.Bottom5_Result, workbook, 'Bottom5Result');\r\n\r\n XLSX.writeFile(workbook, fileName);\r\n\r\n return true;\r\n};\r\n\r\nexport const downloadJson = (id, data) => {\r\n const fileName = getFileName(id, 'json');\r\n const dataString = JSON.stringify(data);\r\n downloadify(fileName, dataString, { type: 'text/json' });\r\n\r\n return true;\r\n};\r\n","import PropTypes from 'prop-types';\r\nimport React, { useCallback, useContext, useEffect, useState } from 'react';\r\nimport { notificationApi } from '@bingads-webui-campaign/notification-center';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { ScopeContext } from '@bingads-webui-react/scope-service';\r\nimport { getRoutePathById } from '@bingads-webui-react/with-site-map';\r\nimport { withServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport { useFetch } from '@bingads-webui-campaign/react-hook-use-fetch';\r\nimport { setClarityTag } from '@bingads-webui-universal/clarity';\r\nimport { Stack } from '@fluentui/react/lib/Stack';\r\nimport {\r\n Title3,\r\n} from '@fluentui/react-components';\r\nimport { fetchExperiment, parseMeasurementTypeEnum } from './fetch/experiment';\r\nimport { fetchCampaignsByIdEDM } from './fetch/campaigns';\r\nimport { fetchUetTags, getFetchedTagCollections } from './fetch/uet';\r\nimport {\r\n getAudienceResults,\r\n getBottomPerformerResults,\r\n getCampaignResults,\r\n getOverallResults,\r\n getTopPerformerResults,\r\n transformResults,\r\n getCampaignIds,\r\n fetchResults,\r\n} from './fetch/result';\r\nimport { AudienceOverviewSection } from './results/audience-overview-section';\r\nimport { CampaignOverviewSection } from './results/campaign-overview-section';\r\nimport { ExperimentOverviewSection } from './results/experiment-overview-section';\r\nimport { ResultsPageHeader } from './results/page-header';\r\nimport { StudySummaryCard } from './results/study-summary-card';\r\nimport { downloadExcel } from './utils/download';\r\n\r\nconst mainLayoutTokens = {\r\n childrenGap: 15,\r\n padding: 30,\r\n};\r\n\r\nexport const LiftMeasurementResultsInternal = ({ siteMap }) => {\r\n const { scope } = useContext(ScopeContext);\r\n const { fetch } = useFetch();\r\n\r\n const [isLoading, setIsLoading] = useState(true);\r\n const [experimentName, setExperimentName] = useState('');\r\n const [campaignsAsArray, setCampaignsAsArray] = useState([]);\r\n const [country, setCountry] = useState(null);\r\n const [startDate, setStartDate] = useState(null);\r\n const [endDate, setEndDate] = useState(null);\r\n const [measurementTypes, setMeasurementTypes] = useState({\r\n useConversionLift: false,\r\n useSearchLift: false,\r\n useVisitLift: false,\r\n });\r\n const [keywords, setKeywords] = useState([]);\r\n const [uetTags, setUetTags] = useState([]);\r\n const [overallResults, setOverallResults] = useState({});\r\n const [audienceResults, setAudienceResults] = useState({});\r\n const [topPerformerResults, setTopPerformerResults] = useState({});\r\n const [bottomPerformerResults, setBottomPerformerResults] = useState({});\r\n const [campaignResults, setCampaignResults] = useState({});\r\n const [liftStudyResults, setLiftStudyResults] = useState();\r\n\r\n const fetchCampaigns = useCallback(async (studyResults) => {\r\n try {\r\n const campaignIds = getCampaignIds(studyResults);\r\n const results = campaignIds.length > 0 ? await fetchCampaignsByIdEDM(scope.values, campaignIds) : null;\r\n\r\n if (!results || !results.value) return;\r\n\r\n const transformedCampaigns = results.value.reduce((acc, result) => {\r\n acc[result.Id] = { name: result.Name, id: result.Id };\r\n return acc;\r\n }, {});\r\n\r\n setCampaignsAsArray(Object.values(transformedCampaigns));\r\n setCampaignResults(getCampaignResults(studyResults, transformedCampaigns));\r\n } catch (e) {\r\n console.log('Error fetching campaigns');\r\n console.log(e);\r\n }\r\n }, [scope.values]);\r\n\r\n const i18n = useContext(I18nContext);\r\n\r\n const fetchLiftStudyResults = useCallback(async liftExperimentId => fetchResults({\r\n liftExperimentId,\r\n scope,\r\n fetch,\r\n onSuccess: (response) => {\r\n setClarityTag({\r\n IsFetchLiftExperimentResultsSuccessful: true,\r\n });\r\n setLiftStudyResults(response);\r\n return transformResults(response);\r\n },\r\n onFailure: (error) => {\r\n setClarityTag({\r\n IsFetchLiftExperimentResultsSuccessful: false,\r\n });\r\n setIsLoading(false);\r\n console.log('Error fetching lift study results');\r\n console.log(error);\r\n },\r\n }), [fetch, scope]);\r\n\r\n useEffect(() => {\r\n if (scope.values.liftExperimentId == null) {\r\n const route = getRoutePathById(siteMap, 'lift-measurement');\r\n scope.remove('liftExperimentId');\r\n scope.save(route);\r\n } else {\r\n setClarityTag({\r\n IsFetchingLiftExperimentResults: true,\r\n IsLiftMeasurementPage: true,\r\n LiftMeasurementPage: 'results',\r\n });\r\n // Fetch from the experiment, experiment results, and campaigns endpoints to build out the page state.\r\n fetchExperiment(scope.values, {\r\n onSuccess: async (liftExperiment) => {\r\n setExperimentName(liftExperiment.Name);\r\n setCountry(liftExperiment.Country);\r\n setStartDate(liftExperiment.StartDate);\r\n setEndDate(liftExperiment.EndDate);\r\n setMeasurementTypes(parseMeasurementTypeEnum(liftExperiment.MeasurementType));\r\n setKeywords(liftExperiment.Keywords == null ? [] : liftExperiment.Keywords);\r\n\r\n if (liftExperiment.UETTags == null) {\r\n setUetTags([]);\r\n } else {\r\n await fetchUetTags({\r\n count: liftExperiment.UETTags.length,\r\n ids: liftExperiment.UETTags,\r\n onFailure: () => {\r\n // Failed to fetch the UET tags so continue with the IDs.\r\n notificationApi.showWarning(i18n.getString(_TL_('Failed to fetch UET tags for IDs: {{ tagIds }}'), {\r\n tagIds: liftExperiment.UETTags.join(i18n.getString(_TL_(', '))),\r\n }));\r\n setUetTags(liftExperiment.UETTags);\r\n },\r\n onSuccess: (data) => {\r\n const { fetchedTagsAsArray } = getFetchedTagCollections(data);\r\n const uetTagNames = fetchedTagsAsArray.map(tag => tag.name);\r\n setUetTags(uetTagNames);\r\n },\r\n scope,\r\n });\r\n }\r\n\r\n const results = await fetchLiftStudyResults(liftExperiment.Id);\r\n\r\n if (results) {\r\n await fetchCampaigns(results);\r\n setOverallResults(getOverallResults(results));\r\n setAudienceResults(getAudienceResults(results));\r\n setTopPerformerResults(getTopPerformerResults(results));\r\n setBottomPerformerResults(getBottomPerformerResults(results));\r\n setIsLoading(false);\r\n }\r\n },\r\n onFailure: (message) => {\r\n // We should log the details of the failure and then route the user back to the landing page.\r\n console.log('The fetch failed:');\r\n console.log(message);\r\n },\r\n });\r\n }\r\n }, [fetchCampaigns, fetchLiftStudyResults, i18n, scope, scope.values.liftExperimentId, siteMap]);\r\n\r\n const onClickExcel = useCallback(() => {\r\n if (liftStudyResults) {\r\n setClarityTag({\r\n IsDownloadingLiftMeasurementExcelResults: true,\r\n });\r\n downloadExcel(scope.values.liftExperimentId, liftStudyResults);\r\n }\r\n }, [scope.values.liftExperimentId, liftStudyResults]);\r\n\r\n const loadingMessage = i18n.getString(_TL_('Loading lift experiment results...'));\r\n\r\n return (\r\n \r\n {isLoading ?\r\n
\r\n {loadingMessage}\r\n \r\n :\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n }\r\n