\r\n {i18n.getString(_TL_('Add more goals to further optimize your campaign performance.'))}\r\n
\r\n\r\n
\r\n \r\n );\r\n};\r\n\r\nSelectableCard.propTypes = {\r\n id: PropTypes.string.isRequired,\r\n title: PropTypes.string.isRequired,\r\n description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\r\n footer: PropTypes.string,\r\n iconName: PropTypes.string,\r\n glyphIconName: PropTypes.string,\r\n isDisabled: PropTypes.bool,\r\n useLargeCards: PropTypes.bool.isRequired,\r\n selected: PropTypes.bool.isRequired,\r\n onClickCard: PropTypes.func.isRequired,\r\n classes: PropTypes.shape({\r\n card: PropTypes.string,\r\n cardHeader: PropTypes.string,\r\n cardHeaderLarge: PropTypes.string,\r\n cardHeaderSmall: PropTypes.string,\r\n contents: PropTypes.string,\r\n description: PropTypes.string,\r\n footer: PropTypes.string,\r\n selectableButton: PropTypes.string,\r\n selectableButtonLarge: PropTypes.string,\r\n selectableButtonSmall: PropTypes.string,\r\n title: PropTypes.string,\r\n titleIcon: PropTypes.string,\r\n }).isRequired,\r\n ariaItemSize: PropTypes.number.isRequired,\r\n ariaItemIndex: PropTypes.number.isRequired,\r\n name: PropTypes.string.isRequired,\r\n descriptionValue: PropTypes.string,\r\n};\r\n\r\nSelectableCard.defaultProps = {\r\n iconName: null,\r\n footer: null,\r\n glyphIconName: null,\r\n isDisabled: false,\r\n description: null,\r\n descriptionValue: '',\r\n};\r\n","\r\nexport const getStyles = (_, { palette = {} }) => ({\r\n cardList: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n marginTop: '1px',\r\n marginLeft: '1px',\r\n },\r\n visuallyHidden: {\r\n position: 'absolute',\r\n width: '1px',\r\n height: '1px',\r\n margin: '-1px',\r\n padding: 0,\r\n border: 0,\r\n overflow: 'hidden',\r\n clip: 'rect(0 0 0 0)',\r\n whiteSpace: 'nowrap',\r\n },\r\n contents: {\r\n fontStyle: 'normal',\r\n fontSize: 12,\r\n lineHeight: '18px',\r\n position: 'relative',\r\n width: '100%',\r\n },\r\n cardHeader: {\r\n display: 'flex',\r\n flexFlow: 'column',\r\n },\r\n cardHeaderSmall: {\r\n height: '48px',\r\n },\r\n cardHeaderLarge: {\r\n height: '75px',\r\n fontSize: 14,\r\n },\r\n title: {\r\n fontWeight: 600,\r\n display: 'inline-block',\r\n margin: 'auto 0px',\r\n },\r\n titleIcon: {\r\n marginRight: '6px',\r\n fontSize: '20px !important',\r\n color: '#006DD1',\r\n },\r\n description: {\r\n fontWeight: 400,\r\n },\r\n footer: {\r\n fontWeight: 400,\r\n fontSize: '10px',\r\n color: palette.neutralSecondaryAlt,\r\n margin: '0px !important',\r\n bottom: 0,\r\n position: 'absolute',\r\n },\r\n selectableButtonLarge: {\r\n height: 167,\r\n },\r\n selectableButtonSmall: {\r\n height: 175,\r\n },\r\n selectableButton: {\r\n '&:hover, &:active': {\r\n outline: `1px solid ${palette.neutralPrimary}`,\r\n '& .shared-radio': {\r\n opacity: 1,\r\n },\r\n },\r\n '&.selected': {\r\n outline: `1px solid ${palette.themePrimary}`,\r\n '& .shared-radio': {\r\n opacity: 1,\r\n },\r\n },\r\n maxWidth: 335,\r\n display: 'inline-flex',\r\n float: 'left',\r\n backgroundColor: palette.white,\r\n marginRight: 20,\r\n marginBottom: 20,\r\n outline: `1px solid ${palette.white}`,\r\n border: 'none',\r\n boxShadow: '0px 1.6px 3.6px rgba(0, 0, 0, 0.132), 0px 0.3px 0px rgba(0, 0, 0, 0.108)',\r\n\r\n '& .selectable-card-label': {\r\n padding: '20px',\r\n height: '100%',\r\n cursor: 'pointer',\r\n },\r\n '&.is-disabled .selectable-card-label': {\r\n cursor: 'not-allowed',\r\n },\r\n\r\n '& .shared-radio': {\r\n float: 'right',\r\n top: '2px',\r\n right: '8px',\r\n position: 'relative',\r\n opacity: 0,\r\n '&:focus': {\r\n opacity: 1,\r\n outline: `1px solid ${palette.neutralPrimary}`,\r\n },\r\n },\r\n\r\n '& .icon-RadioBtnOff': {\r\n right: 5,\r\n zIndex: 1,\r\n },\r\n },\r\n});\r\n","import _ from 'underscore';\r\nimport React, { useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nimport { SelectableCard } from './selectable-card';\r\nimport { getStyles } from './selectable-card-list-styles';\r\n\r\nexport const SelectableCardList = (props) => {\r\n const {\r\n className,\r\n contents,\r\n onItemSelected,\r\n selectedItem,\r\n useLargeCards,\r\n classes: overwriteClasses,\r\n ariaProps,\r\n accessibleTitle,\r\n } = props;\r\n const defaultStyles = useDefaultStyles(getStyles);\r\n const classes = useMemo(() => ({ ...defaultStyles, ...overwriteClasses }), [defaultStyles, overwriteClasses]);\r\n\r\n return (\r\n \r\n
);\r\n }\r\n if (revenueType === 'VariantValue') {\r\n return (\r\n - \r\n
- {i18n.getString(_TL_('If you only want to track your leads, enter an average number for each lead.'))} \r\n
- {i18n.getString(_TL_('If you only sell one type of product, you can use the price of that product as the value of each conversion.'))} \r\n
\r\n \r\n {i18n.getString(_TL_('*For this revenue type, you will need to install an additional tag code.'))}\r\n \r\n
);\r\n }\r\n return null;\r\n }, [i18n, revenueType, classes]);\r\n\r\n if (info) {\r\n return (\r\n - \r\n
- {i18n.getString(_TL_('If you sell multiple products at different price, your conversion value can be varied based on which item is sold.'))} \r\n
\r\n {i18n.getString(_TL_('This revenue type is best for:'))} \r\n {info}\r\n
\r\n );\r\n }\r\n return null;\r\n};\r\n\r\nRevenueTypeInfo.propTypes = {\r\n revenueType: PropTypes.oneOf(['FixedValue', 'VariantValue', 'NoValue']),\r\n};\r\nRevenueTypeInfo.defaultProps = {\r\n revenueType: null,\r\n};\r\n","/* eslint-disable jsx-a11y/anchor-has-content, jsx-a11y/anchor-is-valid */\r\nimport _ from 'underscore';\r\nimport React, { useContext, useMemo, useCallback, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { Link, ChoiceGroup, Dropdown, TextField } from '@fluentui/react';\r\nimport classNames from 'classnames';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { ReactTemplate } from '@bingads-webui-react/react-template';\r\nimport { LearnMoreLink } from '@bingads-webui-campaign-react/help';\r\nimport { ConversionHelpContext } from '@bingads-webui-campaign-react/conversion-help';\r\nimport { GOAL_REVENUE_VALUE_MAX } from '@bingads-webui-campaign-react/conversion-utils';\r\nimport { useIsUetTag } from '@bingads-webui-campaign-react/conversion-data';\r\n\r\nimport { getRevenueTypeSelectorStyles } from './goal-revenue-form-styles';\r\n\r\nconst validateDecimal = (value) => {\r\n const regex = /^\\d+(\\.\\d{1,3})?$/;\r\n return String(value).match(regex);\r\n};\r\n\r\nexport const RevenueTypeSelector = (props) => {\r\n const {\r\n revenue,\r\n revenueType,\r\n currency,\r\n onRevenueChange,\r\n onRevenueTypeChange,\r\n onCurrencyChange,\r\n currencies,\r\n onNotifyValidationResult,\r\n } = props;\r\n const i18n = useContext(I18nContext);\r\n const helpIds = useContext(ConversionHelpContext);\r\n const classes = useDefaultStyles(getRevenueTypeSelectorStyles);\r\n const isUetTag = useIsUetTag();\r\n const [isInitialized, setIsInitialized] = useState(!_.isEmpty(revenue));\r\n\r\n const getValueErrorMessage = useCallback((value) => {\r\n if (_.isUndefined(value) || value.length === 0) {\r\n return i18n.getString(_TL_('Enter a revenue amount'));\r\n } else if (!validateDecimal(value)) {\r\n return i18n.getString(_TL_('Enter a valid revenue amount'));\r\n }\r\n const number = parseFloat(value);\r\n if (number < 0 || number > GOAL_REVENUE_VALUE_MAX) {\r\n return i18n.getString(_TL_('Revenue amount is out of range, min 0 and max 999999999999.999'));\r\n }\r\n return undefined;\r\n }, [i18n]);\r\n\r\n const handleRevenueChange = useCallback((ev) => {\r\n setIsInitialized(true);\r\n const { target: { value } = {} } = ev || {};\r\n return onRevenueChange(value);\r\n }, [onRevenueChange]);\r\n\r\n const valueInput = useMemo(() => (\r\n \r\n
\r\n ), [\r\n classes,\r\n getValueErrorMessage,\r\n onNotifyValidationResult,\r\n i18n,\r\n revenue,\r\n currency,\r\n currencies,\r\n handleRevenueChange,\r\n onCurrencyChange,\r\n isInitialized,\r\n ]);\r\n\r\n const options = useMemo(() => {\r\n const optionStyles = {\r\n root: {\r\n fontWeight: 600,\r\n fontSize: '14px',\r\n padding: '16px 0',\r\n margin: 0,\r\n },\r\n };\r\n\r\n const variantValueDescription = i18n.getString(isUetTag ?\r\n _TL_('Enter the default amount and select the default currency to be used when no value is received for a conversion. The revenue value will change based on the customization you make to the UET tag tracking code that you add to your website. {{help}}Learn more{{/help}} | {{examplesLink}}See examples{{/examplesLink}}') :\r\n _TL_('Enter the default amount and select the default currency to be used when no value is received for a conversion. You will need to update your website code so that the revenue value gets sent to Microsoft Advertising as part of a custom event when the conversion happens. {{help}}Learn more{{/help}} | {{examplesLink}}See examples{{/examplesLink}}'));\r\n\r\n return ([\r\n {\r\n key: 'FixedValue',\r\n text: i18n.getString(_TL_('Each conversion action has the same value')),\r\n onRenderField: (fieldProps, render) => {\r\n const { checked } = fieldProps;\r\n return (\r\n \r\n onCurrencyChange(option.key)}\r\n dropdownWidth=\"auto\"\r\n ariaLabel={i18n.getString(_TL_('Select revenue currency'))}\r\n />\r\n
\r\n \r\n {render(fieldProps)}\r\n {checked &&\r\n
\r\n );\r\n },\r\n styles: optionStyles,\r\n },\r\n {\r\n key: 'VariantValue',\r\n text: i18n.getString(_TL_('Conversion action value may vary (i.e. by purchase price)')),\r\n onRenderField: (fieldProps, render) => {\r\n const { checked } = fieldProps;\r\n return (\r\n \r\n
\r\n }\r\n {i18n.getString(_TL_('Each time it happens, the conversion action has the same value. Enter the amount and select the currency. This is a static revenue value that doesn\\'t change.'))}
\r\n {valueInput}\r\n\r\n {render(fieldProps)}\r\n {checked &&\r\n
\r\n );\r\n },\r\n styles: optionStyles,\r\n },\r\n { key: 'NoValue', text: i18n.getString(_TL_('No value (Not recommended)')), styles: optionStyles },\r\n ]);\r\n }, [helpIds, i18n, classes, valueInput, isUetTag]);\r\n\r\n const onChange = useCallback((ev, selection) => {\r\n onRevenueTypeChange(selection.key);\r\n if (selection.key === 'NoValue' && _.isFunction(onNotifyValidationResult)) {\r\n // if NoValue is selected, the form is valid\r\n onNotifyValidationResult('');\r\n }\r\n }, [onNotifyValidationResult, onRevenueTypeChange]);\r\n return (\r\n \r\n
\r\n }\r\n \r\n (\r\n \r\n {text}\r\n ),\r\n help: text =>
\r\n {valueInput}\r\n \r\n
);\r\n};\r\n\r\n\r\nRevenueTypeSelector.propTypes = {\r\n revenue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\r\n revenueType: PropTypes.oneOf(['FixedValue', 'VariantValue', 'NoValue']),\r\n currency: PropTypes.string.isRequired,\r\n onRevenueChange: PropTypes.func.isRequired,\r\n onRevenueTypeChange: PropTypes.func.isRequired,\r\n onCurrencyChange: PropTypes.func.isRequired,\r\n currencies: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\r\n onNotifyValidationResult: PropTypes.func,\r\n};\r\nRevenueTypeSelector.defaultProps = {\r\n revenue: '',\r\n revenueType: undefined,\r\n onNotifyValidationResult: null,\r\n};\r\n","export const getStyles = (_, { palette = {} }) => ({\r\n eventTypeContainer: {\r\n padding: '0px 20px',\r\n border: `1px solid ${palette.neutralLight}`,\r\n borderRadius: '2px',\r\n width: 'fit-content',\r\n height: '60px',\r\n display: 'flex',\r\n alignItems: 'center',\r\n },\r\n actionOperator: {\r\n marginRight: '8px',\r\n minWidth: '150px',\r\n },\r\n actionContainer: {\r\n display: 'flex',\r\n '& .url-input, .action-input': {\r\n flexGrow: 1,\r\n minWidth: 200,\r\n maxWidth: 360,\r\n },\r\n '& label': {\r\n padding: '7.6955px 0px',\r\n },\r\n },\r\n actionText: {\r\n marginTop: '5px',\r\n marginRight: '32px',\r\n fontWeight: 600,\r\n },\r\n actionTitle: {\r\n margin: '10.5px 0',\r\n lineHeight: '1.1',\r\n fontWeight: 600,\r\n },\r\n urlInput: {\r\n marginTop: '36.396px',\r\n },\r\n operatorDescription: {\r\n color: '#737271',\r\n marginTop: 8,\r\n },\r\n helpLink: {\r\n marginLeft: 4,\r\n },\r\n});\r\n","import _ from 'underscore';\r\nimport React, { useCallback, useContext, useMemo, useState, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { Dropdown, TextField, Link } from '@fluentui/react';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\n\r\nimport { getStyles } from './get-styles';\r\n\r\n// valid characters for URL\r\nconst urlPattern = /^[\\w\\-._~:/?#[\\]@!$&'()*+,;=.]+$/;\r\n\r\nconst URL_MAX_LENGTH = 1024;\r\n\r\nexport const DestinationUrlAction = (props) => {\r\n const {\r\n goals,\r\n getValueErrorMessage,\r\n url,\r\n onURLChange,\r\n onNotifyValidationResult,\r\n expressionOperator,\r\n onExpressionOperatorChange,\r\n urlExpressionOperators,\r\n } = props;\r\n const i18n = useContext(I18nContext);\r\n const classes = useDefaultStyles(getStyles);\r\n const [isInitialized, setIsInitialized] = useState(!_.isEmpty(url));\r\n\r\n const duplicateUrlErrorText = useMemo(() => i18n.getString(_TL_('Goal with this url and operator already exists')), [i18n]);\r\n\r\n const checkDuplicateAction = useCallback((inputUrl, operator) => {\r\n const getGoalByUrlAndExpressionOperator = _.find(goals, g => g.url === inputUrl && g.expressionOperator === operator);\r\n\r\n if (getGoalByUrlAndExpressionOperator) {\r\n return duplicateUrlErrorText;\r\n }\r\n return '';\r\n }, [duplicateUrlErrorText, goals]);\r\n\r\n const urlErrorMessage = useMemo(() => {\r\n let errorMessage = '';\r\n\r\n if (isInitialized) {\r\n errorMessage = getValueErrorMessage(i18n, URL_MAX_LENGTH, url);\r\n\r\n // check for invalid characters\r\n if (_.isEmpty(errorMessage) && !urlPattern.test(url)) {\r\n errorMessage = i18n.getString(_TL_('Destination URL contains invalid characters'));\r\n }\r\n\r\n // check for duplicates\r\n if (_.isEmpty(errorMessage)) {\r\n errorMessage = checkDuplicateAction(url, expressionOperator);\r\n }\r\n }\r\n\r\n return errorMessage;\r\n }, [checkDuplicateAction, expressionOperator, getValueErrorMessage, i18n, isInitialized, url]);\r\n\r\n useEffect(() => onNotifyValidationResult(urlErrorMessage), [urlErrorMessage, onNotifyValidationResult]);\r\n\r\n const validateInput = useCallback((value) => {\r\n const duplicatedActionErrorMessage = checkDuplicateAction(value, expressionOperator);\r\n\r\n if (duplicatedActionErrorMessage) {\r\n return duplicatedActionErrorMessage;\r\n }\r\n\r\n const errorValidationOnParent = getValueErrorMessage(i18n, 1024, value);\r\n return errorValidationOnParent;\r\n }, [checkDuplicateAction, expressionOperator, getValueErrorMessage, i18n]);\r\n\r\n const onTextChange = useCallback((value) => {\r\n setIsInitialized(true);\r\n validateInput(value);\r\n onURLChange(value);\r\n }, [onURLChange, validateInput]);\r\n\r\n const onOperatorChange = useCallback((_event, option) => {\r\n onExpressionOperatorChange(option);\r\n }, [onExpressionOperatorChange]);\r\n\r\n const getDestinationUrlInputLabel = () => {\r\n switch (expressionOperator) {\r\n case 'EqualsTo':\r\n return i18n.getString(_TL_('Website URL'));\r\n case 'Contains':\r\n return i18n.getString(_TL_('String present in URL'));\r\n default:\r\n return undefined;\r\n }\r\n };\r\n\r\n const selectedExpressionOperatorOption = useMemo(() => (\r\n _.find(urlExpressionOperators, option => option.key === expressionOperator)\r\n ), [expressionOperator, urlExpressionOperators]);\r\n\r\n return (\r\n \r\n
);\r\n};\r\n\r\nDestinationUrlAction.propTypes = {\r\n goals: PropTypes.arrayOf(PropTypes.shape({\r\n expressionOperator: PropTypes.string,\r\n url: PropTypes.string,\r\n })),\r\n getValueErrorMessage: PropTypes.func.isRequired,\r\n url: PropTypes.string,\r\n onURLChange: PropTypes.func.isRequired,\r\n onNotifyValidationResult: PropTypes.func,\r\n expressionOperator: PropTypes.oneOf(['EqualsTo', 'StartsWith', 'Contains', 'RegularExpression']).isRequired,\r\n onExpressionOperatorChange: PropTypes.func.isRequired,\r\n urlExpressionOperators: PropTypes.arrayOf(PropTypes.shape({\r\n key: PropTypes.string,\r\n text: PropTypes.string,\r\n inputLabel: PropTypes.string,\r\n description: PropTypes.string,\r\n helpLink: PropTypes.string,\r\n })).isRequired,\r\n};\r\n\r\nDestinationUrlAction.defaultProps = {\r\n goals: undefined,\r\n onNotifyValidationResult: null,\r\n url: '',\r\n};\r\n","import _ from 'underscore';\r\nimport React, { useCallback, useContext, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { Dropdown, TextField } from '@fluentui/react';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { ConversionHelpContext } from '@bingads-webui-campaign-react/conversion-help';\r\nimport { LearnMoreLink } from '@bingads-webui-campaign-react/help';\r\n\r\nimport { getStyles } from './get-styles';\r\n\r\nexport const CustomEventAction = (props) => {\r\n const {\r\n goals,\r\n getValueErrorMessage,\r\n actionOperator,\r\n onActionOperatorChange,\r\n action,\r\n onActionChange,\r\n onNotifyValidationResult,\r\n } = props;\r\n\r\n const i18n = useContext(I18nContext);\r\n const helpIds = useContext(ConversionHelpContext);\r\n const classes = useDefaultStyles(getStyles);\r\n const duplicateUrlErrorText = useMemo(() => i18n.getString(_TL_('Goal with this action and operator already exists')), [i18n]);\r\n\r\n const checkDuplicateAction = useCallback((actionValue, operator) => {\r\n const getGoalByUrlAndActionOperator = _.find(goals, g => g.action === actionValue && g.actionOperator === operator);\r\n\r\n if (getGoalByUrlAndActionOperator) {\r\n return duplicateUrlErrorText;\r\n }\r\n return undefined;\r\n }, [duplicateUrlErrorText, goals]);\r\n\r\n const actionErrorMessage = useMemo(() => {\r\n let errorMessage = '';\r\n\r\n // MT will trim the action field before writing to DB\r\n const trimmedAction = action && action.trim();\r\n\r\n errorMessage = getValueErrorMessage(i18n, 75, trimmedAction);\r\n if (_.isEmpty(errorMessage)) {\r\n // check for goals with the same action and action operator\r\n errorMessage = checkDuplicateAction(trimmedAction, actionOperator);\r\n }\r\n\r\n // defer onNotifyValidationResult call so parent state doesn't get modified during initial render\r\n _.defer(onNotifyValidationResult, errorMessage);\r\n\r\n return errorMessage;\r\n }, [action, actionOperator, checkDuplicateAction, getValueErrorMessage, i18n, onNotifyValidationResult]);\r\n\r\n const onOperatorChange = useCallback((_event, option) => {\r\n onActionOperatorChange(option);\r\n }, [onActionOperatorChange]);\r\n\r\n const onTextChange = useCallback((value) => {\r\n onActionChange(value);\r\n }, [onActionChange]);\r\n\r\n return (\r\n \r\n onTextChange((target || {}).value)}\r\n errorMessage={urlErrorMessage}\r\n />\r\n
\r\n {/* operator explanation */}\r\n {!_.isEmpty(selectedExpressionOperatorOption) && (\r\n \r\n \r\n {selectedExpressionOperatorOption.description}\r\n \r\n {selectedExpressionOperatorOption.helpLink && (\r\n \r\n {i18n.getString(_TL_('Learn more'))}\r\n \r\n )}\r\n
\r\n )}\r\n \r\n
);\r\n};\r\n\r\nCustomEventAction.propTypes = {\r\n goals: PropTypes.arrayOf(PropTypes.shape({\r\n action: PropTypes.string,\r\n actionOperator: PropTypes.string,\r\n })),\r\n getValueErrorMessage: PropTypes.func.isRequired,\r\n action: PropTypes.string,\r\n onActionChange: PropTypes.func.isRequired,\r\n onNotifyValidationResult: PropTypes.func,\r\n actionOperator: PropTypes.oneOf(['EqualsTo']).isRequired,\r\n onActionOperatorChange: PropTypes.func.isRequired,\r\n};\r\n\r\nCustomEventAction.defaultProps = {\r\n goals: undefined,\r\n onNotifyValidationResult: null,\r\n action: '',\r\n};\r\n","import _ from 'underscore';\r\nimport React, { useCallback, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { DestinationUrlAction } from './destination-url-action';\r\nimport { CustomEventAction } from './custom-event-action';\r\n\r\nexport const goalType = {\r\n DestinationGoal: {\r\n glyph: 'ba-Link',\r\n name: _TL_('Destination URL'),\r\n },\r\n EventGoal: {\r\n glyph: 'ba-Click',\r\n name: _TL_('Custom event'),\r\n },\r\n};\r\n\r\nconst getValueErrorMessage = (i18n, max, value) => {\r\n if (_.size(value) === 0) {\r\n return i18n.getString(_TL_('Enter a value'));\r\n } else if (value.length > max) {\r\n return i18n.getString(_TL_('Please provide a value with less than {{max}} characters'), { max });\r\n }\r\n return undefined;\r\n};\r\n\r\nexport const GoalActionForm = (props) => {\r\n const {\r\n goals,\r\n eventType,\r\n actionOperator,\r\n onChangeActionOperator,\r\n url,\r\n onURLChange,\r\n action,\r\n onActionChange,\r\n onNotifyValidationResult,\r\n urlExpressionOperators,\r\n } = props;\r\n\r\n const onActionOperatorChange = useCallback(option => onChangeActionOperator(option.key), [onChangeActionOperator]);\r\n\r\n const goalAction = useMemo(() => {\r\n if (eventType === 'DestinationGoal') {\r\n return ({i18n.getString(_TL_('Custom event parameters'))}
\r\n{i18n.getString(_TL_('Select the parameters you\\'d like to send with your event.'))}\r\n
\r\n onTextChange((target || {}).value)}\r\n errorMessage={actionErrorMessage}\r\n />\r\n
\r\n {i18n.getString(_TL_('Action'))}
\r\n\r\n \r\n {children}\r\n \r\n {helpId && (\r\n
\r\n );\r\n};\r\n\r\nAccordionHeaderUnstyled.propTypes = {\r\n classes: PropTypes.shape({\r\n accordionTitle: PropTypes.string,\r\n helpButton: PropTypes.string,\r\n }).isRequired,\r\n className: PropTypes.string,\r\n children: PropTypes.string.isRequired,\r\n expanded: PropTypes.bool.isRequired,\r\n onChange: PropTypes.func.isRequired,\r\n helpId: PropTypes.string,\r\n titleId: PropTypes.string,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n};\r\n\r\nAccordionHeaderUnstyled.defaultProps = {\r\n className: undefined,\r\n helpId: undefined,\r\n titleId: undefined,\r\n};\r\n\r\nexport const AccordionHeader = withDefaultStyles(AccordionHeaderUnstyled, getStyles);\r\n","export const getStyles = (_components, { fonts = {}, palette = {} } = {}) => {\r\n const color = {\r\n advancedTitleColor: palette.blue || '#0078D4',\r\n };\r\n const font = fonts.medium || {};\r\n\r\n return ({\r\n accordionTitle: {\r\n ...font,\r\n fontWeight: 600,\r\n lineHeight: '24px',\r\n color: color.advancedTitleColor,\r\n display: 'flex',\r\n\r\n '& .title': {\r\n textDecoration: 'none',\r\n\r\n '&:focus': {\r\n outline: 'none',\r\n },\r\n\r\n '&:focus-visible': {\r\n outline: '1px solid #000',\r\n },\r\n\r\n '&:after': {\r\n content: '\"\\\\E70E\"',\r\n float: 'left',\r\n fontFamily: 'MsAds MDL2 Assets',\r\n fontSize: '14px',\r\n transform: 'rotate(180deg)',\r\n marginRight: '11px',\r\n },\r\n '&.collapsed:after': {\r\n transform: 'rotate(90deg)',\r\n transition: 'transform .1s linear',\r\n },\r\n },\r\n\r\n '& .helpbutton': {\r\n marginLeft: 7,\r\n },\r\n },\r\n });\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { ReactTemplate } from '@bingads-webui-react/react-template';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nimport { getStyles } from './code-snippet-styles';\r\n\r\nconst CodeSnippetUnstyled = (props) => {\r\n const {\r\n classes,\r\n className,\r\n model,\r\n codeTemplate,\r\n } = props;\r\n\r\n return (\r\n \r\n \r\n {i18n.getString(_TL_('Not sure how to do it? See an example'))}\r\n \r\n {showExample && (\r\n
\r\n );\r\n};\r\n\r\nSeeExampleUnstyled.propTypes = {\r\n 'aria-label': PropTypes.string,\r\n classes: PropTypes.shape({ seeExampleContainer: PropTypes.string }).isRequired,\r\n className: PropTypes.string,\r\n i18n: PropTypes.shape({}).isRequired,\r\n exampleTemplate: PropTypes.string,\r\n message: PropTypes.string.isRequired,\r\n model: PropTypes.shape({}),\r\n};\r\n\r\nSeeExampleUnstyled.defaultProps = {\r\n 'aria-label': undefined,\r\n className: undefined,\r\n exampleTemplate: undefined,\r\n model: {},\r\n};\r\n\r\nexport const SeeExample = withDefaultStyles(SeeExampleUnstyled, getStyles);\r\n","export const getStyles = () => ({\r\n seeExampleContainer: {\r\n marginBottom: '20px',\r\n marginLeft: '11px',\r\n\r\n '& .example-message': {\r\n marginBottom: 30,\r\n },\r\n },\r\n});\r\n","import _ from 'underscore';\r\n\r\nconst errorCodesAndMessages = {\r\n GoalWithSameNameAlreadyExistsUnderTag: _TL_('A goal with this name already exists. Enter a different name.'),\r\n GoalNameHasInvalidCharacters: _TL_('Your goal name is invalid. Please try a different goal name. If you still encounter issues, please contact support.'),\r\n DestinationGoalUrlStringTooLong: _TL_('The Destination URL entered is too long. Enter a shorter Destination URL.'),\r\n GoalTypeCannotBeChanged: _TL_('The type of goal cannot be edited.'),\r\n InvalidEventGoalCategory: _TL_('Goal category value is invalid.'),\r\n InvalidEventGoalAction: _TL_('Goal action value is invalid'),\r\n OnlyOneInStoreTransactionGoalBeAllowedPerCustomer: _TL_('Only one in-store transaction goal can be created per customer.'),\r\n OnlyOneInStoreVisitGoalBeAllowedPerCustomer: _TL_('We cannot create this conversion goal. There is one store visit conversion goal created across all your accounts. Only one store visit conversion goal can be created across all accounts under your manager account.'),\r\n InvalidCustomerId: _TL_('The account selected for the goal must be associated with the current manager account.'),\r\n CustomerUnderMigration: _TL_('Conversion tracking tags and goals data is currently being migrated to a better system. Please try again later.'),\r\n DestinationGoalURLStringHasInvalidCharacters: _TL_('The Destination URL entered has invalid characters.'),\r\n CustomerNotEligibleForConversionGoalSelection: _TL_('Manager account not under pilot for conversion goal selection.'),\r\n DuplicateGoalActionAndOperator: _TL_('A goal with this action already exists. Enter a different action.'),\r\n HasInvalidUrlExpression: _TL_('The Destination URL entered has invalid characters.'),\r\n GoalHaveDuplicateName: _TL_('A goal with this name already exists. Enter a different name.'),\r\n DuplicateGoalName: _TL_('A goal with this name already exists. Enter a different name.'),\r\n GoalHaveDuplicateURLAndOperator: _TL_('A goal with this Destionation URL already exists. Enter a different Destination URL.'),\r\n InvalidConversionGoalName: _TL_('This name is invalid or exceeds the length limit.'),\r\n GoalLevelCannotBeDowngraded: _TL_('The scope of the conversion goal cannot be downgraded to account level.'),\r\n CustomerNotEligibleForAutoConversion: _TL_('Manager account not under pilot for auto conversion. Please contact the support to enable it.'),\r\n GoalTagCannotBeChanged: _TL_('A tag cannot be changed for auto conversion goal.'),\r\n GoalCategoryCannotBeChanged: _TL_('A goal category cannot be changed.'),\r\n NotAllowedToDoCurrentOperation: _TL_('You don not have permission to update the LTV value now.'),\r\n};\r\n\r\nexport function getMessageFromErrors(i18n, errors) {\r\n if (_.isArray(errors)) {\r\n for (let i = 0; i < _.size(errors); i += 1) {\r\n const error = errors[i];\r\n if (error.Code && _.has(errorCodesAndMessages, error.Code)) {\r\n return i18n.getString(errorCodesAndMessages[error.Code]);\r\n }\r\n }\r\n }\r\n\r\n return null;\r\n}\r\n","import React from 'react';\r\n\r\nexport const ClarityEventSetupSvg = () => (\r\n \r\n\r\n);\r\n","import React, { useState, useCallback, useContext, useMemo, useRef, useEffect } from 'react';\r\nimport { TextField, DefaultButton } from '@fluentui/react';\r\nimport PropTypes from 'prop-types';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { ReactTemplate } from '@bingads-webui-react/react-template';\r\nimport { LearnMoreLink } from '@bingads-webui-campaign-react/help';\r\nimport { notificationApi } from '@bingads-webui-react/notification-center';\r\nimport { withScope } from '@bingads-webui-react/scope-service';\r\nimport { withPermissions } from '@bingads-webui-react/hoc-with-permissions';\r\nimport _ from 'underscore';\r\nimport { v4 as generateGuid } from 'uuid';\r\nimport classNames from 'classnames';\r\nimport { getCurrencyOptions } from '@bingads-webui-campaign-react/conversion-utils';\r\nimport { LearnMore } from '../learn-more/learn-more';\r\nimport { getStepStyles } from '../shared-styles/shared-content-style';\r\nimport { Badge } from './badge';\r\nimport { ClarityEventSetupSvg } from './clarity-event-setup-svg';\r\n\r\nconst styles = (components, { palette = {} }) => ({\r\n eventTrackingContainer: {\r\n display: 'flex',\r\n },\r\n eventTrackingViewContainer: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n },\r\n websiteUrlText: {\r\n fontSize: '12px',\r\n },\r\n websiteURLTextField: {\r\n width: '418px',\r\n },\r\n redoTrackingViewContainer: {\r\n width: '418px',\r\n },\r\n badgesContainer: {\r\n display: 'flex',\r\n width: '235px',\r\n justifyContent: 'space-between',\r\n marginTop: '5px',\r\n },\r\n eventTrackingButton: {\r\n marginLeft: '5px',\r\n },\r\n skipForNowContainer: {\r\n alignSelf: 'center',\r\n marginLeft: '18px',\r\n },\r\n clarityEventSetup: {\r\n '& .btn-link': {\r\n color: palette.themePrimary,\r\n },\r\n },\r\n});\r\nconst MESSAGES = {\r\n INIT: 'INIT_CLARITY_EVENT_SETUP',\r\n ACK: 'ACK_INIT_CLARITY_EVENT_SETUP',\r\n SAVE_EVENT: 'SAVE_EVENT_DEFINITION',\r\n ACK_SAVE_EVENT: 'ACK_SAVE_EVENT_DEFINITION',\r\n REINIT: 'REINIT_CLARITY_EVENT_SETUP',\r\n ACK_REINIT: 'ACK_REINIT_CLARITY_EVENT_SETUP',\r\n END_SESSION: 'END_CLARITY_EVENT_SETUP_SESSION',\r\n};\r\nconst validateUrl = (url) => {\r\n if (!url || url.trim().length === 0) {\r\n return false;\r\n }\r\n let parsedUrl;\r\n try {\r\n parsedUrl = new URL(url);\r\n } catch (ex) {\r\n return false;\r\n }\r\n return parsedUrl.protocol.toLowerCase() === 'http:' || parsedUrl.protocol.toLowerCase() === 'https:';\r\n};\r\nexport const STAGES = {\r\n NOTCONNECTED: 0,\r\n STARTINIT: 1,\r\n WAITINGFORACK: 2,\r\n CONNECTED: 3,\r\n SYNCINGEVENTS: 4,\r\n TRACKINGEVENT: 5,\r\n};\r\nconst validateProp = (props, dependency, expectedProperties) => {\r\n const dep = props[dependency];\r\n expectedProperties.forEach((key) => {\r\n if (!dep[key]) {\r\n throw new Error(`Expected parameter ${key} is not present in dependency ${dependency}`);\r\n }\r\n });\r\n};\r\n\r\nconst getUrlObjectWithDebugParameter = (url) => {\r\n const urlObj = new URL(url);\r\n urlObj.searchParams.set('bat_debug', new Date().getTime());\r\n return urlObj;\r\n};\r\n\r\nconst UnstyledClarityEventSetup = (props) => {\r\n const {\r\n classes, serverContext, scope, clarityTagSetupRepository: {\r\n getClarityEventInfo, getErrorMessage, saveGoal, processPayload, postClarityEventInfo,\r\n }, wizardContext,\r\n setClarityEventObjectExists, setShouldBlockerLoading, goToManualSetupPage, goalAction,\r\n } = props;\r\n\r\n const [currentStage, setCurrentStage] = useState(STAGES.NOTCONNECTED);\r\n\r\n // Validate shared prop between ESC and Expert mode here.\r\n validateProp(props, 'clarityTagSetupRepository', ['getClarityEventInfo', 'getErrorMessage', 'saveGoal', 'processPayload', 'postClarityEventInfo']);\r\n validateProp(props, 'wizardContext', ['cid', 'aid', 'goBack', 'goToNext', 'cancel', 'goalContext', 'permissions', 'logActivity']);\r\n\r\n const i18n = useContext(I18nContext);\r\n const useMockListener = scope && scope.values && scope.values.useMockListener;\r\n const [notificationError, setNotificationError] = useState(null);\r\n const [websiteUrl, setWebsiteUrl] = useState(null);\r\n const [errorMsg, setErrorMsg] = useState(null);\r\n // need ref to read the state value in add event listener callback (need to check if there is a cleaner solution)\r\n const currentTimer = useRef(-1);\r\n const closeTimer = useRef(-1);\r\n const connectionTimeout = useRef(-1);\r\n const currentAbortController = useRef(null);\r\n const sessionId = useRef('');\r\n\r\n const [currentTab, setCurrentTab] = useState(null);\r\n const { goalContext, logActivity } = wizardContext;\r\n const tagName = _.find(goalContext.tags, item => item.Id === goalContext.Tag.Id).Name;\r\n const tagId = goalContext.Tag.Id.toString();\r\n const receivedACK = useRef(false);\r\n const isRetrievingClarityEvent = useRef(false);\r\n const clarityEventInfoId = useRef(null);\r\n\r\n // single object since we should have one event per goal\r\n const [pageEvent, setPageEvent] = useState(null);\r\n const { Token } = serverContext;\r\n const messageParams = {\r\n TagId: tagId,\r\n Goal: {\r\n Name: goalContext.Name,\r\n Type: goalContext.Type,\r\n ValueType: goalContext.GoalValueType,\r\n Operator: goalContext.Operator,\r\n UrlString: goalContext.UrlString,\r\n },\r\n CurrencyCode: goalContext.CurrencyCode,\r\n CurrencyOptions: getCurrencyOptions(i18n),\r\n aid: wizardContext.aid.toString(),\r\n cid: wizardContext.cid.toString(),\r\n PageTrackingId: serverContext.PageTrackingId.toString(),\r\n UserId: serverContext.CurrentUser.Id.toString(),\r\n };\r\n const tagNameModel = { tagName: () => ({tagName}), bold: text => ({text}) };\r\n\r\n const errorMessages = useMemo(() => ({\r\n InvalidUrl: i18n.getString(_TL_('Please input a valid URL starting with http:// or https://')),\r\n NewTabError: i18n.getString(_TL_('Could not open new page.')),\r\n CannotDetectTagError: (\r\n \r\n {text},\r\n ...model,\r\n }}\r\n />\r\n
\r\n )}\r\n {message}
\r\n \r\n
\r\n Your event tracking is all set up!\r\n
\r\n );\r\n }, [classes, i18n, pageEvent, websiteUrl]);\r\n\r\n const eventTrackingView = useCallback(() => {\r\n if (currentStage === STAGES.TRACKINGEVENT) {\r\n return (\r\n {websiteUrl}
\r\n\r\n {eventTracking}\r\n {revenueTracking}\r\n
\r\n\r\n \r\n
\r\n );\r\n};\r\nUnstyledClarityEventSetup.propTypes = {\r\n classes: PropTypes.shape(_.mapObject(\r\n getStepStyles(),\r\n _.constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n serverContext: PropTypes.shape({\r\n Token: PropTypes.string.isRequired,\r\n PageTrackingId: PropTypes.string.isRequired,\r\n CurrentUser: PropTypes.shape({ Id: PropTypes.string.isRequired }).isRequired,\r\n }).isRequired,\r\n scope: PropTypes.shape({\r\n values: PropTypes.shape({ useMockListener: PropTypes.string }).isRequired,\r\n }).isRequired,\r\n clarityTagSetupRepository: PropTypes.shape({\r\n getClarityEventInfo: PropTypes.func.isRequired,\r\n postClarityEventInfo: PropTypes.func.isRequired,\r\n getErrorMessage: PropTypes.func.isRequired,\r\n saveGoal: PropTypes.func.isRequired,\r\n processPayload: PropTypes.func.isRequired,\r\n }).isRequired,\r\n wizardContext: PropTypes.shape({\r\n cid: PropTypes.string.isRequired,\r\n aid: PropTypes.string.isRequired,\r\n goBack: PropTypes.func.isRequired,\r\n goToNext: PropTypes.func.isRequired,\r\n cancel: PropTypes.func.isRequired,\r\n deleteClarityEvent: PropTypes.bool.isRequired,\r\n goalContext: PropTypes.shape({\r\n tags: PropTypes.arrayOf(PropTypes.shape({ Id: PropTypes.string })).isRequired,\r\n Tag: PropTypes.shape({ Id: PropTypes.string }).isRequired,\r\n Name: PropTypes.string,\r\n Type: PropTypes.string,\r\n ValueType: PropTypes.string,\r\n Operator: PropTypes.string,\r\n UrlString: PropTypes.string,\r\n CurrencyCode: PropTypes.string,\r\n Action: PropTypes.string,\r\n Id: PropTypes.string,\r\n GoalValueType: PropTypes.string,\r\n }),\r\n permissions: PropTypes.shape({}).isRequired,\r\n logActivity: PropTypes.func.isRequired,\r\n }).isRequired,\r\n goToManualSetupPage: PropTypes.func.isRequired,\r\n setClarityEventObjectExists: PropTypes.func.isRequired,\r\n setShouldBlockerLoading: PropTypes.func.isRequired,\r\n goalAction: PropTypes.string,\r\n};\r\n\r\nUnstyledClarityEventSetup.defaultProps = {\r\n goalAction: undefined,\r\n};\r\n\r\nexport const ClarityEventSetup = withPermissions(withScope(withDefaultStyles(UnstyledClarityEventSetup, styles)));\r\n","export const titleArray = [\r\n _TL_('Insert the tracking tag using a website editing platform'), // general step title for WordPress/Shopify/Wix/BigCommerce\r\n _TL_('Connect your Google Tag Manager account'),\r\n _TL_('Set up UET tag on your Google Tag Manager account'),\r\n _TL_('Next steps'),\r\n];\r\n\r\nexport const defaultConfig = IsGTMCloningChecked => ({\r\n '@odata.type': '#Model.GoogleTagManagerImportTaskItem',\r\n Type: 'GoogleTagManagerImport',\r\n NotificationType: 'Always',\r\n ImportUserPreference: {\r\n Version: '3.0',\r\n ImportNewEntities: typeof IsGTMCloningChecked === 'boolean' ? IsGTMCloningChecked : true,\r\n '@odata.type': '#Model.ImportUserPreference',\r\n },\r\n});\r\n\r\nexport const errorCodeMapping = {\r\n // GoogleTagManagerWorkspaceCouldNotBeCreated\r\n 65251: _TL_('We have encountered an error while adding your UET tag with Google Tag Manager. Please ensure that you have less than 3 pre-existing workspaces in the Google Tag Manager container you\\'re using.'),\r\n // GoogleTagManagerPublishFailed\r\n 65252: _TL_('We have encountered an error while publishing your UET tag with Google Tag Manager. Please ensure that you have the permissions to publish tags in the affected container.'),\r\n // GoogleTagManagerImportFailed\r\n 65253: _TL_('We have encountered an error while adding your UET tag with Google Tag Manager. Please contact support and provide them with the details of this problem.'),\r\n // GoogleTagManagerTagCreationFailed\r\n 65254: _TL_('We have encountered an error while adding your UET tag with Google Tag Manager. Please contact support and provide them with the details of this problem.'),\r\n // CustomerNotEnabledForGTMImport\r\n 65255: _TL_('You are not authorized to perform this action. Please contact support and provide them with the details of this problem.'),\r\n};\r\n","import React from 'react';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport classNames from 'classnames';\r\nimport PropTypes from 'prop-types';\r\nimport { getStyles } from './badge-styles';\r\n\r\nexport const BadgeUnstyled = (props) => {\r\n const {\r\n text, secondaryText, className, classes,\r\n } = props;\r\n return (\r\n \r\n
\r\n {errorMsg &&\r\n \r\n
\r\n \r\n
\r\n {currentStage !== STAGES.TRACKINGEVENT &&\r\n \r\n {i18n.getString(_TL_('Which webpage you want to track?'))}\r\n \r\n }\r\n \r\n \r\n {i18n.getString(_TL_('Code-free, powered by Microsoft Clarity'))}\r\n
\r\n \r\n {i18n.getString(_TL_('Open your website below and select the area you\\'d like to track as your conversion event. Your conversion event will start sending data to Microsoft Advertising—no code needed!'))}\r\n
\r\n\r\n {eventTrackingView()}\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n {errorMsg}\r\n \r\n
}\r\n \r\n {i18n.getString(_TL_('Want to set event tracking in a different way?'))}\r\n \r\n
\r\n {wizardContext.deleteClarityEvent &&\r\n \r\n \r\n \r\n {i18n.getString(_TL_('Since you\\'ve made updates to your goal type, you\\'ll need to redo your event tracking. Open your website above to continue.'))}\r\n \r\n
}\r\n \r\n
\r\n );\r\n};\r\n\r\nBadgeUnstyled.propTypes = {\r\n text: PropTypes.string.isRequired,\r\n secondaryText: PropTypes.string,\r\n className: PropTypes.string,\r\n classes: PropTypes.shape({\r\n badgeContainer: PropTypes.string.isRequired,\r\n }),\r\n};\r\n\r\nBadgeUnstyled.defaultProps = {\r\n classes: null,\r\n secondaryText: null,\r\n className: null,\r\n};\r\n\r\nexport const Badge = withDefaultStyles(\r\n BadgeUnstyled,\r\n getStyles\r\n);\r\n","export const getStyles = () => ({\r\n badgeContainer: {\r\n background: '#DFF6DD',\r\n border: '1px solid #107C10',\r\n borderRadius: '4px',\r\n width: 'fit-content',\r\n color: '#107C10',\r\n padding: '4px 10px',\r\n fontSize: '12px',\r\n },\r\n primaryText: {\r\n fontWeight: '600',\r\n },\r\n secondaryText: {\r\n fontStyle: 'italic',\r\n },\r\n});\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nexport const LearnMore = (props) => {\r\n const {\r\n i18n, topicId, ariaLabel, label,\r\n } = props;\r\n\r\n return (\r\n \r\n {text}\r\n
\r\n \r\n {secondaryText}\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nCopyTagUnstyled.propTypes = {\r\n tag: PropTypes.shape({\r\n id: PropTypes.number.isRequired,\r\n type: PropTypes.oneOf(['Container', 'UET']).isRequired,\r\n }).isRequired,\r\n onCopyCallback: PropTypes.func.isRequired,\r\n classes: PropTypes.shape(_.mapObject(\r\n getCopyTagStyle(),\r\n _.constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n platformName: PropTypes.string,\r\n};\r\n\r\nCopyTagUnstyled.defaultProps = {\r\n platformName: undefined,\r\n};\r\n\r\nexport const CopyTag = withDefaultStyles(CopyTagUnstyled, getCopyTagStyle);\r\n","export const getCopyTagStyle = () => ({\r\n container: {\r\n fontSize: '16px',\r\n lineHeight: '24px',\r\n color: '#323130',\r\n marginBottom: '12px',\r\n },\r\n});\r\n","export const getEditWebsiteViewStyle = () => ({\r\n container: {\r\n fontSize: '14px',\r\n marginLeft: 26,\r\n marginBottom: 12,\r\n },\r\n description: {\r\n marginBottom: 24,\r\n },\r\n descriptionExpanded: {\r\n marginLeft: 26,\r\n },\r\n});\r\n\r\nexport const optionSelectorStyle = {\r\n flexContainer: [\r\n {\r\n selectors: {\r\n '.ms-ChoiceField': {\r\n backgroundColor: '#F3F2F1',\r\n width: 503,\r\n minHeight: 110,\r\n marginBottom: 24,\r\n },\r\n '.ms-ChoiceField-wrapper': {\r\n width: '-webkit-fill-available',\r\n height: '-webkit-fill-available',\r\n marginLeft: 20,\r\n },\r\n '.ms-ChoiceField-field': {\r\n float: 'right',\r\n marginTop: 5,\r\n },\r\n '.ms-Icon': {\r\n 'vertical-align': 'text-top',\r\n },\r\n '.text': {\r\n marginTop: 20,\r\n },\r\n '.title-container': {\r\n fontWeight: 'bold',\r\n },\r\n '.title-icon': {\r\n color: '#000000',\r\n },\r\n '.title-text': {\r\n display: 'inline-block',\r\n marginLeft: 6,\r\n },\r\n },\r\n },\r\n ],\r\n};\r\n\r\nexport const optionSelectorClasses = () => ({\r\n title: {\r\n fontWeight: '600',\r\n display: 'inline-block',\r\n lineHeight: '20px',\r\n margin: '8px 0px',\r\n fontSize: '14px',\r\n },\r\n selectableButtonLarge: {\r\n height: '174px',\r\n },\r\n cardHeaderLarge: {\r\n height: undefined,\r\n },\r\n});\r\n","import React, { useContext, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { SelectableCardList } from '@bingads-webui-campaign-react/conversion-wizard-components';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { IS_EMAIL_SUPPORTED_ENABLED } from '@bingads-webui-campaign-react/conversion-utils';\r\nimport { optionSelectorClasses } from '../styles/edit-website-view-styles';\r\n\r\nexport const OptionsSelectableCardList = (props) => {\r\n const {\r\n onChangeOptions,\r\n isEmailSupported,\r\n isGTMEnabled,\r\n selectedOption,\r\n } = props;\r\n\r\n const i18n = useContext(I18nContext);\r\n const overwriteClasses = useDefaultStyles(optionSelectorClasses);\r\n\r\n const options = {\r\n thirdPartyTag: {\r\n id: 'thirdPartyTag',\r\n title: i18n.getString(_TL_('Add the tag through a website editing platform')),\r\n description: i18n.getString(_TL_('We\\'ll provide instructions for adding the tracking tag through an editing platform, such as WordPress, Wix, Shopify, or BigCommerce.')),\r\n glyphIconName: 'ba-AdUnitChannel',\r\n },\r\n googleTagManager: {\r\n id: 'googleTagManager',\r\n title: i18n.getString(_TL_('Automatically add the tracking tag through Google Tag Manager')),\r\n description: i18n.getString(_TL_('If you are already using Google Tag Manager for your website, we can automatically set up the tracking tag for you.')),\r\n glyphIconName: 'ba-AdUnitChannel',\r\n },\r\n copyTag: {\r\n id: 'copyTag',\r\n title: i18n.getString(_TL_('Install the tag yourself')),\r\n description: i18n.getString(_TL_('We\\'ll provide instructions so you can add the tracking tag to your website\\'s code.')),\r\n iconName: 'SingleColumnEdit',\r\n },\r\n emailTag: {\r\n id: 'emailTag',\r\n title: i18n.getString(_TL_('Send the tag to a developer')),\r\n description: i18n.getString(_TL_('We\\'ll send the tracking tag and instructions to the people you specify, so they can add the tag to your website\\'s code.')),\r\n iconName: 'Mail',\r\n },\r\n };\r\n\r\n\r\n const optionStrings = useMemo(() => {\r\n const methods = [options.copyTag];\r\n\r\n if (isEmailSupported) {\r\n methods.push(options.emailTag);\r\n }\r\n\r\n methods.push(options.thirdPartyTag);\r\n\r\n if (isGTMEnabled) {\r\n methods.push(options.googleTagManager);\r\n }\r\n return methods;\r\n }, [isEmailSupported, isGTMEnabled, options.copyTag, options.emailTag, options.googleTagManager, options.thirdPartyTag]);\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\n\r\nOptionsSelectableCardList.propTypes = {\r\n onChangeOptions: PropTypes.func.isRequired,\r\n isEmailSupported: PropTypes.bool,\r\n isGTMEnabled: PropTypes.bool.isRequired,\r\n selectedOption: PropTypes.string,\r\n};\r\n\r\nOptionsSelectableCardList.defaultProps = {\r\n isEmailSupported: IS_EMAIL_SUPPORTED_ENABLED,\r\n selectedOption: undefined,\r\n};\r\n","import React, { useContext, useMemo, useCallback } from 'react';\r\nimport _, { map } from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { FontIcon, ChoiceGroup } from '@fluentui/react';\r\nimport { ConversionDataContext } from '@bingads-webui-campaign-react/conversion-data';\r\nimport { IS_EMAIL_SUPPORTED_ENABLED } from '@bingads-webui-campaign-react/conversion-utils';\r\nimport { optionSelectorStyle } from '../styles/edit-website-view-styles';\r\n\r\nexport const OptionsChoiceGroup = (props) => {\r\n const {\r\n isGTMEnabled,\r\n isEmailSupported,\r\n onChangeOptions,\r\n selectedOption,\r\n } = props;\r\n\r\n const i18n = useContext(I18nContext);\r\n const { instrumentation } = useContext(ConversionDataContext);\r\n\r\n const options = useMemo(() => _.pick({\r\n THIRD_PARTY_TAG: 'thirdPartyTag',\r\n GOOGLE_TAG_MANAGER: isGTMEnabled ? 'googleTagManager' : null,\r\n COPY_TAG: 'copyTag',\r\n EMAIL_TAG: isEmailSupported ? 'emailTag' : null,\r\n }, id => !_.isNull(id)), [isEmailSupported, isGTMEnabled]);\r\n\r\n const optionStrings = useMemo(() => ({\r\n thirdPartyTag: {\r\n title: _TL_('Let me add the tracking tag through a website editing platform'),\r\n text: _TL_('We\\'ll provide instructions for adding the tracking tag through an editing platform, such as WordPress, Wix, Shopify, or BigCommerce.'),\r\n iconName: 'SingleColumnEdit',\r\n },\r\n copyTag: {\r\n title: _TL_('Let me edit my website\\'s code myself'),\r\n text: _TL_('We\\'ll provide instructions so you can add the tracking tag to your website\\'s code.'),\r\n iconName: 'SingleColumnEdit',\r\n },\r\n emailTag: {\r\n title: _TL_('Let me send the tracking tag to someone else'),\r\n text: _TL_('We\\'ll send the tracking tag and instructions to the people you specify, so they can add the tag to your website\\'s code.'),\r\n iconName: 'Mail',\r\n },\r\n googleTagManager: {\r\n title: _TL_('Automatically add the tracking tag through Google Tag Manager'),\r\n text: _TL_('If you are already using Google Tag Manager for your website, we can automatically set up the tracking tag for you.'),\r\n iconName: 'SingleColumnEdit',\r\n },\r\n }), []);\r\n\r\n const selectedOptions = useMemo(() => map(options, option => ({\r\n key: option,\r\n text: '',\r\n ariaLabel: i18n.getString(optionStrings[option].title),\r\n onRenderField: (_props, render) => (\r\n \r\n
\r\n \r\n
\r\n {i18n.getString(optionStrings[option].title)}
\r\n {i18n.getString(optionStrings[option].text)}
\r\n \r\n \r\n \r\n }\r\n
\r\n );\r\n};\r\n\r\nEditWebsiteView.propTypes = {\r\n onChangeOptions: PropTypes.func.isRequired,\r\n isEmailSupported: PropTypes.bool,\r\n permissions: PropTypes.shape({ }).isRequired,\r\n showClarityOption: PropTypes.bool.isRequired,\r\n isGTMEnabled: PropTypes.bool.isRequired,\r\n selectedOption: PropTypes.string,\r\n isEventGoal: PropTypes.bool,\r\n showTagDescriptions: PropTypes.bool,\r\n onChangeClarityOption: PropTypes.func,\r\n};\r\n\r\nEditWebsiteView.defaultProps = {\r\n isEmailSupported: IS_EMAIL_SUPPORTED_ENABLED,\r\n selectedOption: undefined,\r\n isEventGoal: false,\r\n showTagDescriptions: false,\r\n onChangeClarityOption: noop,\r\n};\r\n\r\n","export const getPickPlatformViewStyle = () => ({\r\n container: {\r\n fontSize: '14px',\r\n marginLeft: 26,\r\n marginBottom: 12,\r\n maxWidth: 600,\r\n lineHeight: '24px',\r\n '& .ms-ChoiceField': {\r\n marginRight: '18px',\r\n marginBottom: 18,\r\n width: 130,\r\n height: 110,\r\n },\r\n '& label span[id^=\"ChoiceGroup\"]': {\r\n fontWeight: 'bold',\r\n },\r\n },\r\n description: {\r\n marginBottom: 24,\r\n },\r\n surveyBlock: {\r\n display: 'flex',\r\n float: 'right',\r\n },\r\n\r\n});\r\n","/* eslint-disable jsx-a11y/anchor-is-valid */\r\n/* eslint-disable jsx-a11y/no-static-element-interactions */\r\n/* eslint-disable jsx-a11y/click-events-have-key-events */\r\n/* eslint-disable react/jsx-boolean-value */\r\nimport { map, mapObject, constant } from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport React, { useContext, useMemo, useCallback } from 'react';\r\nimport classNames from 'classnames';\r\n\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { ChoiceGroup } from '@fluentui/react';\r\n\r\nimport { getPlatforms } from '../utils/platforms';\r\nimport { getPickPlatformViewStyle } from '../styles/pick-platform-view-styles';\r\n\r\nconst PickPlatformViewUnstyled = (props) => {\r\n const {\r\n onChangePlatforms,\r\n isSmartOrExpertMode,\r\n classes,\r\n selectedPlatform,\r\n } = props;\r\n const i18n = useContext(I18nContext);\r\n\r\n const onChangeSelectedPlatforms = useCallback((_, option) => {\r\n const platform = option.key;\r\n onChangePlatforms(platform);\r\n }, [onChangePlatforms]);\r\n\r\n const platformOptions = useMemo(() => map(getPlatforms(isSmartOrExpertMode), (platformText, platformKey) =>\r\n ({\r\n key: platformKey,\r\n text: platformText,\r\n imageSrc: '#',\r\n imageSize: {\r\n width: 130,\r\n height: 48,\r\n },\r\n })), [isSmartOrExpertMode]);\r\n\r\n return (\r\n \r\n {showTagDescriptions && (\r\n \r\n \r\n {i18n.getString(isUetTag ? _TL_('Universal Event Tag (UET Tag)') : _TL_('Base tag'))}\r\n \r\n {isBaseTagDescriptionExpanded && (\r\n \r\n \r\n {i18n.getString(_TL_('Custom event tag'))}\r\n \r\n {isEventTagDescriptionExpanded && (\r\n \r\n )}\r\n \r\n )}\r\n {!showTagDescriptions && i18n.getString(_TL_('To track customer actions, you\\'ll need to add a tracking tag to your website\\'s code. You can edit the code yourself or send the tag to someone else.'))}\r\n
\r\n\r\n {showTagDescriptions ?\r\n {i18n.getString(_TL_('To achieve your conversion goal setting, you will need to set up:'))}
\r\n\r\n {i18n.getString(isUetTag ?\r\n _TL_('Universal Event Tracking (UET) is the key that unlocks powerful Microsoft Advertising features such as conversion tracking. The key comes in the form of the UET tag, which records what customers do on your website and sends that information to Microsoft Advertising.') :\r\n _TL_('Adding the base tag unlocks powerful Microsoft Advertising features such as conversion tracking. The base tag records what customers do on your website and sends that information to Microsoft Advertising.'))}\r\n
\r\n )}\r\n\r\n {isEventGoal && (\r\n\r\n {i18n.getString(isUetTag ?\r\n _TL_('Custom event tag is an additional custom event JavaScript code you need to add to your UET tag, enabling the UET tag to track specific actions such as clicking on the \"Download now\" button.') :\r\n _TL_('Custom event tag is an additional custom event JavaScript code you need to set up in addition to the base tag. This will help you track specific actions such as clicking on the \"Download now\" button.'))}\r\n
\r\n )}\r\n\r\n
\r\n );\r\n};\r\n\r\nPickPlatformViewUnstyled.propTypes = {\r\n onChangePlatforms: PropTypes.func.isRequired,\r\n isSmartOrExpertMode: PropTypes.bool.isRequired,\r\n classes: PropTypes.shape(mapObject(\r\n getPickPlatformViewStyle(),\r\n constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n selectedPlatform: PropTypes.string,\r\n};\r\n\r\nPickPlatformViewUnstyled.defaultProps = {\r\n selectedPlatform: undefined,\r\n};\r\n\r\nexport const PickPlatformView = withDefaultStyles(PickPlatformViewUnstyled, getPickPlatformViewStyle);\r\n","import React from 'react';\r\n\r\nexport const svgConfig = {\r\n Container: {\r\n svg: {\r\n withImage: {\r\n width: 880,\r\n height: 350,\r\n viewBox: '0 0 880 350',\r\n },\r\n noImage: {\r\n width: 440,\r\n height: 350,\r\n viewBox: '0 0 440 350',\r\n },\r\n },\r\n rect: {\r\n width: 450,\r\n height: 350,\r\n x: -16,\r\n fill: '#FFF4CE',\r\n },\r\n image: {\r\n width: 386,\r\n height: 350,\r\n viewBox: '0 0 386 350',\r\n fill: 'none',\r\n template: (\r\n \r\n ),\r\n },\r\n },\r\n DMC: {\r\n svg: {\r\n withImage: {\r\n width: 880,\r\n height: 350,\r\n viewBox: '0 0 880 350',\r\n },\r\n noImage: {\r\n width: 440,\r\n height: 350,\r\n viewBox: '0 0 440 350',\r\n },\r\n },\r\n rect: {\r\n width: 450,\r\n height: 350,\r\n x: -16,\r\n fill: '#FFF4CE',\r\n },\r\n image: {\r\n width: 386,\r\n height: 350,\r\n viewBox: '0 0 386 350',\r\n fill: 'none',\r\n template: (\r\n \r\n ),\r\n },\r\n },\r\n UET: {\r\n svg: {\r\n withImage: {\r\n width: 1300,\r\n height: 480,\r\n viewBox: '0 0 1300 480',\r\n },\r\n noImage: {\r\n width: 660,\r\n height: 480,\r\n viewBox: '0 0 660 480',\r\n },\r\n },\r\n rect: {\r\n width: 700,\r\n height: 480,\r\n x: -16,\r\n fill: '#FFF4CE',\r\n },\r\n image: {\r\n width: 561,\r\n height: 480,\r\n viewBox: '0 0 561 480',\r\n fill: 'none',\r\n template: (\r\n \r\n ),\r\n },\r\n },\r\n text: {\r\n xOffset: 20,\r\n yOffset: 40,\r\n lineHeight: 25,\r\n classname: 'svg-text',\r\n },\r\n xmlns: 'http://www.w3.org/2000/svg',\r\n};\r\n","import _ from 'underscore';\r\nimport React, { useContext, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\n\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { PermissionsContext } from '@bingads-webui-react/hoc-with-permissions';\r\n\r\nimport { getTagSVGStyle } from '../styles/tag-SVG-styles';\r\nimport { svgConfig } from '../utils/svg-config';\r\nimport { generateTag } from '../utils/tag-generator';\r\n\r\nconst TagSVGUnstyled = (props) => {\r\n const {\r\n tag,\r\n renderImage,\r\n classes,\r\n } = props;\r\n const {\r\n id,\r\n type,\r\n } = tag;\r\n\r\n const i18n = useContext(I18nContext);\r\n const permissions = useContext(PermissionsContext);\r\n const isUetSpaTrackingEnabled = _.result(permissions.dynamic, 'UetAutoSpaTracking');\r\n\r\n const tagContent = useMemo(() =>\r\n generateTag(type, id, false, undefined, isUetSpaTrackingEnabled), [type, id, isUetSpaTrackingEnabled]);\r\n\r\n const onRenderText = useMemo(() => (\r\n \r\n {i18n.getString(_TL_('We will provide steps for adding the tracking tag through the following website platforms.'))}\r\n
\r\n \r\n {onRenderSVG}\r\n
\r\n );\r\n};\r\n\r\nTagSVGUnstyled.propTypes = {\r\n tag: PropTypes.shape({\r\n id: PropTypes.number.isRequired,\r\n type: PropTypes.oneOf(['Container', 'UET']).isRequired,\r\n }).isRequired,\r\n renderImage: PropTypes.bool,\r\n classes: PropTypes.shape(_.mapObject(\r\n getTagSVGStyle(),\r\n _.constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n};\r\n\r\nTagSVGUnstyled.defaultProps = {\r\n renderImage: true,\r\n};\r\n\r\nexport const TagSVG = withDefaultStyles(TagSVGUnstyled, getTagSVGStyle);\r\n","export const getTagSVGStyle = () => ({\r\n container: {\r\n fontSize: '16px',\r\n lineHeight: '24px',\r\n color: '#323130',\r\n marginBottom: '12px',\r\n '& .svg-text': {\r\n 'white-space': 'pre',\r\n },\r\n },\r\n});\r\n","import _ from 'underscore';\r\n\r\nconst hash = {};\r\n\r\nconst get = key => (hash[key] || '');\r\n\r\nconst set = (key /* key or object */, value) => {\r\n if (_.isString(key)) {\r\n hash[key] = value;\r\n } else if (_.isObject(key)) {\r\n _.extend(hash, key);\r\n }\r\n};\r\n\r\nconst has = key => _.has(hash, key);\r\n\r\nexport const getConfig = (value) => {\r\n set(value);\r\n return {\r\n hash,\r\n get,\r\n set,\r\n has,\r\n };\r\n};\r\n","import _ from 'underscore';\r\nimport { http, odata as odataInternal } from '@bingads-webui/http-util';\r\n\r\n// const browserUrl = window.location.href;\r\n\r\nexport function wrapOptions(options = {}, config, paramData) {\r\n const host = config.has(options.host) ? config.get(options.host) : options.host;\r\n const path = config.has(options.path) ? config.get(options.path) : options.path;\r\n\r\n return _.defaults({\r\n error(xhr, textStatus, errorThrown) {\r\n if (options.error) {\r\n options.error(xhr, textStatus, errorThrown);\r\n }\r\n },\r\n host: host || config.get('odata.url'),\r\n path: path || config.get('odata.path'),\r\n params: _.extend({}, paramData, options.params),\r\n authorization: options.authorization ? `CCMTSmallToken ${config.get('odata.token')}` : null,\r\n }, options);\r\n}\r\n\r\nfunction buildHeaders(originalHeaders, config) {\r\n const oDataToken = config.get('odata.token');\r\n\r\n const headers = _.defaults({\r\n Authorization: `CCMTSmallToken ${oDataToken}`,\r\n }, originalHeaders);\r\n\r\n const loginType = config.get('odata.loginType');\r\n\r\n if (loginType) {\r\n headers['x-ms-logintype'] = loginType;\r\n }\r\n\r\n const sessionId = _.result(config.get('Omniture'), 'SessionId');\r\n\r\n if (!_.isUndefined(sessionId)) {\r\n headers['x-ms-sessionid'] = sessionId;\r\n }\r\n\r\n const lcid = config.get('CultureLcid');\r\n\r\n headers['x-ms-lcid'] = lcid;\r\n headers.lcid = lcid;\r\n\r\n return headers;\r\n}\r\n\r\nexport function wrapOptionsOfODataMethods(options = {}, config, paramData) {\r\n return _.defaults({\r\n headers: buildHeaders(options.headers, config),\r\n multipartPath: config.get('odata.multipart_path'),\r\n }, wrapOptions(options, config, paramData));\r\n}\r\n\r\nfunction addOptionsToODataMethod(method, config, paramData) {\r\n // eslint-disable-next-line func-names\r\n return function (...args) {\r\n const [url, options, cb] = http.signature(args);\r\n\r\n return method(url, wrapOptionsOfODataMethods(options, config, paramData), cb);\r\n };\r\n}\r\n\r\n\r\nexport const odata = (config, paramData) => {\r\n function defaults(options) {\r\n const originalDefaults = odata.defaults(options);\r\n return addOptionsToODataMethod(originalDefaults, config, paramData);\r\n }\r\n\r\n return {\r\n get: addOptionsToODataMethod(odataInternal.get, config, paramData),\r\n post: addOptionsToODataMethod(odataInternal.post, config, paramData),\r\n put: addOptionsToODataMethod(odataInternal.put, config, paramData),\r\n patch: addOptionsToODataMethod(odataInternal.patch, config, paramData),\r\n delete: addOptionsToODataMethod(odataInternal.delete, config, paramData),\r\n upload: addOptionsToODataMethod(odataInternal.upload, config, paramData),\r\n ajax: addOptionsToODataMethod(odataInternal.ajax, config, paramData),\r\n defaults,\r\n };\r\n};\r\n\r\n","export const getWordpressInstructionsStyles = () => ({\r\n container: {\r\n fontFamily: 'Segoe UI',\r\n fontStyle: 'normal',\r\n fontSize: '16px',\r\n lineHeight: '24px',\r\n color: '#323130',\r\n marginBottom: '12px',\r\n },\r\n steps: {\r\n fontSize: '14px',\r\n marginBottom: '12px',\r\n },\r\n instructionContainer: {\r\n marginLeft: '29px',\r\n marginTop: '16px',\r\n paddingBottom: '16px',\r\n },\r\n instructionBody: {\r\n marginLeft: '50px',\r\n fontWeight: 'normal',\r\n fontSize: '14px',\r\n lineHeight: '23px',\r\n },\r\n instructionTitle: {\r\n fontWeight: 600,\r\n fontSize: '15px',\r\n lineHeight: '20px',\r\n },\r\n instructionInfo: {\r\n background: '#EFF6FC',\r\n fontWeight: 'normal',\r\n fontSize: '12px',\r\n lineHeight: '36px',\r\n height: '36px',\r\n maxWidth: '696px',\r\n },\r\n instructionInfoIcon: {\r\n paddingLeft: '8px',\r\n paddingRight: '8px',\r\n },\r\n instructionImage: {\r\n marginRight: '79px',\r\n marginBottom: '20px',\r\n maxWidth: 1000,\r\n width: '100%',\r\n height: 'auto',\r\n display: 'block',\r\n },\r\n downloadButton: {\r\n marginTop: '12px',\r\n },\r\n downloadButtonIcon: {\r\n color: '#0078D4',\r\n },\r\n});\r\n","import _ from 'underscore';\r\nimport React, { useContext, useState, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { ReactTemplate } from '@bingads-webui-react/react-template';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { Button, Glyphicon } from '@bingads-webui-react/primitive';\r\nimport { notificationApi } from '@bingads-webui-react/notification-center';\r\nimport { downloadifyBlob } from '@bingads-webui/download-service';\r\n\r\nimport { getConfig } from '../repository/config';\r\nimport { odata } from '../repository/odata';\r\nimport { getWordpressInstructionsStyles } from '../styles/wordpress-instructions-styles';\r\n\r\nimport imageStep2 from '../../media/wordpress-step2.png';\r\nimport imageStep3 from '../../media/wordpress-step3.png';\r\nimport imageStep4 from '../../media/wordpress-step4.png';\r\n\r\nconst WordpressInstructionsUnstyled = (props) => {\r\n const {\r\n classes,\r\n tagData,\r\n logTrace,\r\n serverContext,\r\n } = props;\r\n const i18n = useContext(I18nContext);\r\n const noTranslateModel = { noTranslate: text => ({text}) };\r\n const step2Bulletin1Template = i18n.getString(_TL_('1. Go to your {{noTranslate}}Dashboard{{/noTranslate}}.'));\r\n const step2Bulletin2Template = i18n.getString(_TL_('2. Click {{noTranslate}}Plugins{{/noTranslate}} and select {{noTranslate}}Add New{{/noTranslate}}.'));\r\n const step3Bulletin1Template = i18n.getString(_TL_('1. Click {{noTranslate}}Upload Plugin{{/noTranslate}}.'));\r\n const step3Bulletin2Template = i18n.getString(_TL_('2. Click {{noTranslate}}Choose file{{/noTranslate}} and select {{noTranslate}}Microsoft-Advertising-UET-TagID.zip{{/noTranslate}}.'));\r\n const step3Bulletin3Template = i18n.getString(_TL_('3. Click {{noTranslate}}Install Now{{/noTranslate}}.'));\r\n const step4Bulletin1Template = i18n.getString(_TL_('1. Click {{noTranslate}}Plugins{{/noTranslate}}.'));\r\n const step4Bulletin2Template = i18n.getString(_TL_('2. Look for {{noTranslate}}Microsoft Advertising Universal Event Tracking (UET){{/noTranslate}} under installed plugins.'));\r\n const step4Bulletin3Template = i18n.getString(_TL_('3. Click {{noTranslate}}Activate{{/noTranslate}}.'));\r\n\r\n const downloadGenericError = i18n.getString(_TL_('We\\'ve encountered an error while downloading this plugin. Please refresh the page and try again.'));\r\n\r\n const [odataInstance, setOdataInstance] = useState(null);\r\n const odataConfig = getConfig({});\r\n\r\n useEffect(() => {\r\n if (!odataInstance) {\r\n if (!odataConfig.has('odata.path')) {\r\n const {\r\n CurrentLocale,\r\n CultureLcid,\r\n ServicesEndpoints,\r\n CampaignAPIPath,\r\n Token,\r\n CurrentAccount,\r\n CurrentCustomer,\r\n CurrentUser,\r\n } = serverContext;\r\n odataConfig.set({\r\n CultureName: CurrentLocale,\r\n CultureLcid,\r\n 'odata.url': ServicesEndpoints && ServicesEndpoints.CampaignAPI, // https://ui.ads-int.microsoft.com/ODataApi\r\n 'odata.path': CampaignAPIPath || '/Campaign/V2', // /Campaign/V2\r\n 'odata.token': Token,\r\n CurrentUser,\r\n CurrentCustomer,\r\n CurrentAccount,\r\n AccountTimeZone: (CurrentAccount && CurrentAccount.TimeZone) || 71,\r\n });\r\n }\r\n setOdataInstance(odata(odataConfig, {}));\r\n }\r\n }, [odataConfig, odataInstance, serverContext]);\r\n\r\n const doDownload = () => {\r\n logTrace('[WordPress] download clicked');\r\n\r\n const getTagPuglinBlobUrl = `/Customers(${tagData.cid})/Accounts(${tagData.aid})/Tags(${tagData.tagId})/Default.GetTagPuglinBlobUrl()`;\r\n odataInstance.get(getTagPuglinBlobUrl)\r\n .then((response) => {\r\n const downloadUrl = response.value;\r\n fetch(downloadUrl)\r\n .then(res => res.blob())\r\n .then((blob) => {\r\n const originalType = blob.type.split('/').pop();\r\n // do not download xml error file\r\n if (originalType === 'zip') {\r\n const fileNameExtract = downloadUrl.match(/Microsoft(.)*\\.zip/);\r\n downloadifyBlob(blob, fileNameExtract[0]);\r\n } else {\r\n notificationApi.showWarning(downloadGenericError);\r\n }\r\n });\r\n })\r\n .catch((response) => {\r\n if (response.body && response.body.Code) {\r\n if (_.some(response.body.value, v => v.Code === 'InvalidCustomerId')) {\r\n notificationApi.showWarning(i18n.getString(_TL_('The manager account ID does not exist.')));\r\n }\r\n } else {\r\n notificationApi.showWarning(downloadGenericError);\r\n }\r\n\r\n logTrace('[WordPress] download error');\r\n });\r\n };\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nWordpressInstructionsUnstyled.propTypes = {\r\n classes: PropTypes.shape(_.mapObject(\r\n getWordpressInstructionsStyles(),\r\n _.constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n tagData: PropTypes.shape({\r\n cid: PropTypes.number.isRequired,\r\n aid: PropTypes.number.isRequired,\r\n tagId: PropTypes.number.isRequired,\r\n }).isRequired,\r\n logTrace: PropTypes.func.isRequired,\r\n serverContext: PropTypes.func.isRequired,\r\n};\r\n\r\nexport const WordpressInstructions = withDefaultStyles(WordpressInstructionsUnstyled, getWordpressInstructionsStyles);\r\n\r\n","import _ from 'underscore';\r\nimport React, { useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { ReactTemplate } from '@bingads-webui-react/react-template';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { PermissionsContext } from '@bingads-webui-react/hoc-with-permissions';\r\nimport { notificationApi } from '@bingads-webui-react/notification-center';\r\nimport { getWordpressInstructionsStyles } from '../styles/wordpress-instructions-styles';\r\nimport { CopyTag } from './copy-tag';\r\n\r\nimport imageStep2 from '../../media/shopify-step2.png';\r\nimport imageStep3a from '../../media/shopify-step3a.png';\r\nimport imageStep3b from '../../media/shopify-step3b.png';\r\nimport imageStep3c from '../../media/shopify-step3c.png';\r\nimport imageStep4a from '../../media/shopify-step4a.png';\r\nimport imageStep4b from '../../media/shopify-step4b.png';\r\nimport { generateTag } from '../utils/tag-generator';\r\n\r\nconst ShopifyInstructionsUnstyled = (props) => {\r\n const { classes, tag, logTrace } = props;\r\n const i18n = useContext(I18nContext);\r\n const noTranslateModel = { noTranslate: text => ({text}) };\r\n const step2Bulletin1Template = i18n.getString(_TL_('1. Click on {{noTranslate}}Online Store{{/noTranslate}}, select {{noTranslate}}Themes{{/noTranslate}}.'));\r\n const step2Bulletin2Template = i18n.getString(_TL_('2. Under Current theme, select {{noTranslate}}Actions > Edit code{{/noTranslate}}.'));\r\n const step3Bulletin1Template = i18n.getString(_TL_('1. Under {{noTranslate}}Layout{{/noTranslate}}, select {{noTranslate}}theme.liquid{{/noTranslate}}.'));\r\n const step3Bulletin2Template = i18n.getString(_TL_('2. Scroll down the page until you are at the {{noTranslate}}{{/noTranslate}} tag.'));\r\n const step3Bulletin3Template = i18n.getString(_TL_('3. Paste the UET tag just before {{noTranslate}}content_for_header{{/noTranslate}}.'));\r\n const step3Bulletin4Template = i18n.getString(_TL_('4. Click {{noTranslate}}Save{{/noTranslate}}.'));\r\n const step4Bulletin1Template = i18n.getString(_TL_('1. Open {{noTranslate}}Settings{{/noTranslate}}.'));\r\n const step4Bulletin2Template = i18n.getString(_TL_('2. Click on {{noTranslate}}Checkout{{/noTranslate}}.'));\r\n const step4Bulletin3Template = i18n.getString(_TL_('3. Scroll down to the {{noTranslate}}Additional scripts{{/noTranslate}} field. Paste the UET tag in {{noTranslate}}Additional scripts{{/noTranslate}}. And then click {{noTranslate}}Save{{/noTranslate}}.'));\r\n\r\n const onCopyCallback = ({ error, message, tagContent }) => {\r\n if (error) {\r\n logTrace(`[Shopify] Copy error. Error: ${error} tagContent: ${JSON.stringify(tagContent)}`);\r\n notificationApi.showWarning(message);\r\n } else {\r\n logTrace('[Shopify] Copy success.');\r\n notificationApi.showInfo(message);\r\n }\r\n };\r\n\r\n const tagContainerStyle = {\r\n container: {\r\n fontSize: '14px',\r\n lineHeight: '20px',\r\n color: '#323130',\r\n marginBottom: '12px',\r\n border: '1px solid black',\r\n padding: 20,\r\n wordWrap: 'break-word',\r\n whiteSpace: 'pre-wrap',\r\n width: 500,\r\n },\r\n };\r\n\r\n const permissions = useContext(PermissionsContext);\r\n const isUetSpaTrackingEnabled = _.result(permissions.dynamic, 'UetAutoSpaTracking');\r\n\r\n const containerStyle = _.extend({}, tagContainerStyle.container);\r\n return (\r\n \r\n
\r\n \r\n
\r\n {i18n.getString(_TL_('Step 1: Download the Microsoft Advertising UET plugin.'))}
\r\n\r\n
\r\n {i18n.getString(_TL_('Click'))} {i18n.getString(_TL_('Download'))} {i18n.getString(_TL_('for a .zip file that you’ll install in your WordPress admin panel.'))}
\r\n\r\n
\r\n \r\n
\r\n {i18n.getString(_TL_('Step 2: Add new plugin in your WordPress account.'))}
\r\n\r\n 
\r\n
\r\n {i18n.getString(_TL_('Make sure you open a new tab and are logged into your WordPress account.'))}
\r\n\r\n
\r\n
\r\n
\r\n \r\n
\r\n {i18n.getString(_TL_('Step 3: Install the plugin.'))}
\r\n\r\n 
\r\n
\r\n {i18n.getString(_TL_('Make sure you open a new tab and are logged into your WordPress account.'))}
\r\n\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n {i18n.getString(_TL_('Step 4: Activate the plugin'))}.
\r\n\r\n 
\r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n );\r\n};\r\n\r\nShopifyInstructionsUnstyled.propTypes = {\r\n classes: PropTypes.shape(_.mapObject(\r\n getWordpressInstructionsStyles(),\r\n _.constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n tag: PropTypes.shape({\r\n id: PropTypes.number.isRequired,\r\n type: PropTypes.oneOf(['Container', 'UET']).isRequired,\r\n }).isRequired,\r\n logTrace: PropTypes.func.isRequired,\r\n};\r\n\r\nexport const ShopifyInstructions = withDefaultStyles(ShopifyInstructionsUnstyled, getWordpressInstructionsStyles);\r\n\r\n","import _ from 'underscore';\r\nimport React, { useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { ReactTemplate } from '@bingads-webui-react/react-template';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { notificationApi } from '@bingads-webui-react/notification-center';\r\nimport { PermissionsContext } from '@bingads-webui-react/hoc-with-permissions';\r\nimport { getWordpressInstructionsStyles } from '../styles/wordpress-instructions-styles';\r\nimport { CopyTag } from './copy-tag';\r\n\r\nimport imageStep2 from '../../media/squarespace-step2.png';\r\nimport imageStep3a from '../../media/squarespace-step3a.png';\r\nimport imageStep3b from '../../media/squarespace-step3b.png';\r\nimport { generateTag } from '../utils/tag-generator';\r\n\r\nconst SquareSpaceInstructionsUnstyled = (props) => {\r\n const { classes, tag, logTrace } = props;\r\n const i18n = useContext(I18nContext);\r\n const permissions = useContext(PermissionsContext);\r\n const isUetSpaTrackingEnabled = _.result(permissions.dynamic, 'UetAutoSpaTracking');\r\n\r\n const noTranslateModel = { noTranslate: text => ({text}) };\r\n const step3Bulletin1Template = i18n.getString(_TL_('1. Select {{noTranslate}}Settings{{/noTranslate}}.'));\r\n const step3Bulletin2Template = i18n.getString(_TL_('2. Select {{noTranslate}}Advanced{{/noTranslate}}.'));\r\n const step3Bulletin3Template = i18n.getString(_TL_('3. Select {{noTranslate}}Code injection{{/noTranslate}}.'));\r\n const step3Bulletin4Template = i18n.getString(_TL_('4. Paste UET code in the {{noTranslate}}HEADER{{/noTranslate}} section.'));\r\n const step3Bulletin5Template = i18n.getString(_TL_('5. Click {{noTranslate}}Save{{/noTranslate}}.'));\r\n\r\n const onCopyCallback = ({ error, message, tagContent }) => {\r\n if (error) {\r\n logTrace(`[SquareSpace] Copy error. Error: ${error} tagContent: ${JSON.stringify(tagContent)}`);\r\n notificationApi.showWarning(message);\r\n } else {\r\n logTrace('[SquareSpace] Copy success.');\r\n notificationApi.showInfo(message);\r\n }\r\n };\r\n\r\n const tagContainerStyle = {\r\n container: {\r\n fontSize: '14px',\r\n lineHeight: '20px',\r\n color: '#323130',\r\n marginBottom: '12px',\r\n border: '1px solid black',\r\n padding: 20,\r\n wordWrap: 'break-word',\r\n whiteSpace: 'pre-wrap',\r\n width: 500,\r\n },\r\n };\r\n\r\n const containerStyle = _.extend({}, tagContainerStyle.container);\r\n return (\r\n \r\n
\r\n \r\n
\r\n {i18n.getString(_TL_('Step 1: Copy the UET tag below.'))}
\r\n\r\n
\r\n \r\n {generateTag(tag.type, tag.id, false, 'shpfy_ui', isUetSpaTrackingEnabled)}\r\n
\r\n \r\n
\r\n \r\n
\r\n {i18n.getString(_TL_('Step 2: Login to your Shopify account.'))}
\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n \r\n
\r\n {i18n.getString(_TL_('Step 3: Install the tag.'))}
\r\n\r\n
\r\n \r\n 
\r\n
\r\n \r\n 
\r\n
\r\n \r\n 
\r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n {i18n.getString(_TL_('Step 4: Customize your online checkout process.'))}
\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\nSquareSpaceInstructionsUnstyled.propTypes = {\r\n classes: PropTypes.shape(_.mapObject(\r\n getWordpressInstructionsStyles(),\r\n _.constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n tag: PropTypes.shape({\r\n id: PropTypes.number.isRequired,\r\n type: PropTypes.oneOf(['Container', 'UET']).isRequired,\r\n }).isRequired,\r\n logTrace: PropTypes.func.isRequired,\r\n};\r\n\r\nexport const SquareSpaceInstructions = withDefaultStyles(SquareSpaceInstructionsUnstyled, getWordpressInstructionsStyles);\r\n\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { pick } from 'underscore';\r\nimport { Image } from '@fluentui/react/lib/Image';\r\nimport { PrimaryButton } from '@bingads-webui-react/fabric-with-signal';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport googleIconNormal from './btn_google_dark_normal.svg';\r\n\r\nconst getSignInGoogleStyles = () => ({\r\n signInGoogle: {\r\n backgroundColor: '#4285F4',\r\n paddingLeft: 0,\r\n paddingRight: 0,\r\n\r\n '&:active': {\r\n backgroundColor: '#3367d6',\r\n },\r\n\r\n '&:hover': {\r\n boxShadow: '0 0 3px 3px rgb(66 133 244 / 30%)',\r\n backgroundColor: '#4285F4',\r\n },\r\n\r\n '&:focus-visible': {\r\n outline: '-webkit-focus-ring-color auto 1px',\r\n },\r\n\r\n '& .google-sign-in-image': {\r\n backgroundColor: '#ffffff',\r\n padding: 6,\r\n },\r\n '& .google-sign-in-text': {\r\n padding: '0px 18px',\r\n fontFamily: 'Roboto,arial,sans-serif',\r\n },\r\n },\r\n});\r\n\r\nfunction UnstyledGoogleLoginButton(props) {\r\n const { classes, i18n } = props;\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n {i18n.getString(_TL_('Step 1: Copy the UET tag below.'))}
\r\n\r\n
\r\n \r\n {generateTag(tag.type, tag.id, false, 'sqsp_ui', isUetSpaTrackingEnabled)}\r\n
\r\n \r\n
\r\n \r\n
\r\n {i18n.getString(_TL_('Step 2: Login to your SquareSpace account. Select the webpage you would like to track conversions.'))}
\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {i18n.getString(_TL_('Step 3: Install the tag.'))}
\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n {i18n.getString(_TL_('Sign in with Google'))}\r\n
\r\n \r\n \r\n
\r\n );\r\n }\r\n return null;\r\n }, [classes, completedHelpLabel, completedTestInstructionTemplate, finishPageData, i18n, inProgressHelpLabel, inProgressTestInstructionTemplate, trackingInstructionTemplate, selectedAccount, selectedContainer, audiencesLibraryPageLink, conversionGoalsPageLink]);\r\n\r\n const generateStepContent = useMemo(() => {\r\n if (finishPageData) {\r\n return (\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n {i18n.getString(_TL_('You can see the tags created in your Google Tag Manager container on the latest published version. You can also use this link to see the changes:'))}\r\n {' '}{tagManagerLink}\r\n
\r\n )}\r\n{generateFinishPage}
\r\n );\r\n }\r\n if (currentStep === 0) {\r\n onGoogleLoggedOut();\r\n return (\r\n \r\n
\r\n );\r\n }\r\n if (currentStep === 1) {\r\n onGoogleSelectAccount();\r\n return (\r\n \r\n
\r\n {i18n.getString(_TL_('In order to set up tagging, we need one-time access to your Google Tag Manager account. When logging into Google, make sure to allow Microsoft Advertising to make changes to your Google Tag Manager account to continue setup.'))}
\r\n\r\n
\r\n );\r\n }\r\n return (\r\n
\r\n {/* {i18n.getString(_TL_('Select the Google Tag Manager account and container you want to integrate with. If you don\\'t see the correct account information, make sure you are logged into the Google profile associated with the Google Tag Manager account you want to use.'))}
\r\n\r\n
\r\n {!_.isEmpty(containersDropdownOptions) && selectedAccount &&\r\n {i18n.getString(_TL_('You are signed in to this Google account:'))} {emailAddress || ''}\r\n
\r\n
\r\n }\r\n \r\n
\r\n }\r\n {gtmUIContext.AllowTagCloning && !_.isEmpty(selectedContainer) && (\r\n \r\n
\r\n ) }\r\n \r\n {i18n.getString(_TL_('Your UET tags will use the same set up options including the tag settings and trigger values used for Universal Analytics or Google Analytics GA4 Event tags.'))} \r\n
\r\n placeholder
);\r\n }, [\r\n finishPageData, currentStep, generateFinishPage, onGoogleLoggedOut, classes, i18n,\r\n signInToGoogle, onGoogleSelectAccount, emailAddress, logoutGoogle, accountsDropdownOptions,\r\n selectedAccount, onChangeAccount, containersDropdownOptions, isGTMImprovementEnabled, containerList,\r\n selectedContainer, onChangeContainer, gtmUIContext.AllowTagCloning, gtmUIContext.IsGTMCloningChecked,\r\n onTagCloningCheckboxChange,\r\n ]);\r\n\r\n return (\r\n \r\n \r\n {generateStepContent}\r\n \r\n
\r\n );\r\n};\r\n\r\nGoogleTagManagerInstructionsUnstyled.propTypes = {\r\n classes: PropTypes.shape({\r\n container: PropTypes.string,\r\n contentBlock: PropTypes.string,\r\n dropdown: PropTypes.string,\r\n imageCenterBlock: PropTypes.string,\r\n textBlock: PropTypes.string,\r\n gtmInstructionsRoot: PropTypes.string,\r\n }).isRequired,\r\n tag: PropTypes.shape({\r\n id: PropTypes.number,\r\n }).isRequired,\r\n serverContext: PropTypes.shape({\r\n CurrentAccount: PropTypes.shape({}),\r\n isDemo: PropTypes.bool,\r\n Permissions: PropTypes.shape({}),\r\n DynamicPermissions: PropTypes.shape({\r\n GSILocal: PropTypes.bool,\r\n }),\r\n }).isRequired,\r\n deps: PropTypes.shape({\r\n isAllDependenciesLoaded: PropTypes.bool,\r\n repository: PropTypes.instanceOf(GoogleTagManagerReporitory),\r\n token: PropTypes.string,\r\n }).isRequired,\r\n onGoogleLoggedOut: PropTypes.func.isRequired,\r\n onGoogleSelectAccount: PropTypes.func.isRequired,\r\n updateGTMImportContext: PropTypes.func.isRequired,\r\n finishPageData: PropTypes.shape({ publishedVersionId: PropTypes.number }),\r\n gtmUIContext: PropTypes.shape({\r\n AllowTagCloning: PropTypes.bool,\r\n IsGTMCloningChecked: PropTypes.bool,\r\n loginEmail: PropTypes.string,\r\n sessionId: PropTypes.string,\r\n }).isRequired,\r\n logTrace: PropTypes.func.isRequired,\r\n};\r\n\r\nGoogleTagManagerInstructionsUnstyled.defaultProps = {\r\n finishPageData: undefined,\r\n};\r\n\r\nexport const GoogleTagManagerInstructions = withDefaultStyles(GoogleTagManagerInstructionsUnstyled, getGtmInstructionsStyles);\r\n","export const getGtmInstructionsStyles = (_, { palette = {} }) => ({\r\n gtmInstructionsRoot: {\r\n '& .blocker-image': {\r\n width: '28px',\r\n height: '28px',\r\n border: '2px solid',\r\n animation: 'spinner 1s linear infinite',\r\n marginRight: '9px',\r\n borderRadius: '50%',\r\n borderTopColor: palette.themeLight,\r\n borderLeftColor: palette.themePrimary,\r\n borderRightColor: palette.themeLight,\r\n borderBottomColor: palette.themeLight,\r\n },\r\n '& .blocker-text': {\r\n color: palette.themePrimary,\r\n },\r\n },\r\n container: {\r\n fontSize: '14px',\r\n marginBottom: 12,\r\n },\r\n contentBlock: {\r\n marginBottom: 30,\r\n '& .btn-link': {\r\n color: '#0078d4',\r\n '&:focus, &:hover, &:active': {\r\n textDecoration: 'underline',\r\n },\r\n },\r\n },\r\n textBlock: {\r\n maxWidth: 1046,\r\n },\r\n imageCenterBlock: {\r\n minWidth: 140,\r\n width: '20%',\r\n margin: 'auto',\r\n },\r\n dropdown: {\r\n maxWidth: 350,\r\n },\r\n titleBlock: {},\r\n saveBar: {\r\n marginLeft: -8,\r\n '& button': {\r\n marginLeft: 8,\r\n },\r\n },\r\n statusActive: {\r\n paddingLeft: '6px',\r\n paddingBottom: '2px',\r\n font: 'bold 12px arial !important',\r\n color: '#333333 !important',\r\n },\r\n statusInactive: {\r\n paddingLeft: '6px',\r\n paddingBottom: '2px',\r\n font: 'normal 12px arial !important',\r\n color: '#b3b3b3 !important',\r\n },\r\n statusItem: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n marginTop: '10px',\r\n },\r\n bigCheck: {\r\n fontSize: 'medium',\r\n color: '#0078d4',\r\n },\r\n progressList: {},\r\n});\r\n","import _ from 'underscore';\r\nimport React, { useContext, useState, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { ReactTemplate } from '@bingads-webui-react/react-template';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { Button, Glyphicon } from '@bingads-webui-react/primitive';\r\nimport { notificationApi } from '@bingads-webui-react/notification-center';\r\nimport { downloadifyBlob } from '@bingads-webui/download-service';\r\n\r\nimport { getConfig } from '../repository/config';\r\nimport { odata } from '../repository/odata';\r\nimport { getWordpressInstructionsStyles } from '../styles/wordpress-instructions-styles';\r\n\r\nimport imageStep2 from '../../media/wordpress-step2.png';\r\nimport imageStep3 from '../../media/wordpress-step3.png';\r\nimport imageStep4 from '../../media/wordpress-step4.png';\r\n\r\nconst WooCommerceInstructionsUnstyled = (props) => {\r\n const {\r\n classes,\r\n tagData,\r\n logTrace,\r\n serverContext,\r\n } = props;\r\n const i18n = useContext(I18nContext);\r\n const noTranslateModel = { noTranslate: text => ({text}) };\r\n const step2Bulletin1Template = i18n.getString(_TL_('1. Go to your {{noTranslate}}Dashboard{{/noTranslate}}.'));\r\n const step2Bulletin2Template = i18n.getString(_TL_('2. Click {{noTranslate}}Plugins{{/noTranslate}} and select {{noTranslate}}Add New{{/noTranslate}}.'));\r\n const step3Bulletin1Template = i18n.getString(_TL_('1. Click {{noTranslate}}Upload Plugin{{/noTranslate}}.'));\r\n const step3Bulletin2Template = i18n.getString(_TL_('2. Click {{noTranslate}}Choose file{{/noTranslate}} and select {{noTranslate}}Microsoft-Advertising-UET-TagID.zip{{/noTranslate}}.'));\r\n const step3Bulletin3Template = i18n.getString(_TL_('3. Click {{noTranslate}}Install Now{{/noTranslate}}.'));\r\n const step4Bulletin1Template = i18n.getString(_TL_('1. Click {{noTranslate}}Plugins{{/noTranslate}}.'));\r\n const step4Bulletin2Template = i18n.getString(_TL_('2. Look for {{noTranslate}}Microsoft Advertising Universal Event Tracking (UET){{/noTranslate}} under installed plugins.'));\r\n const step4Bulletin3Template = i18n.getString(_TL_('3. Click {{noTranslate}}Activate{{/noTranslate}}.'));\r\n\r\n const downloadGenericError = i18n.getString(_TL_('We\\'ve encountered an error while downloading this plugin. Please refresh the page and try again.'));\r\n\r\n const [odataInstance, setOdataInstance] = useState(null);\r\n const odataConfig = getConfig({});\r\n\r\n useEffect(() => {\r\n if (!odataInstance) {\r\n if (!odataConfig.has('odata.path')) {\r\n const {\r\n CurrentLocale,\r\n CultureLcid,\r\n ServicesEndpoints,\r\n CampaignAPIPath,\r\n Token,\r\n CurrentAccount,\r\n CurrentCustomer,\r\n CurrentUser,\r\n } = serverContext;\r\n odataConfig.set({\r\n CultureName: CurrentLocale,\r\n CultureLcid,\r\n 'odata.url': ServicesEndpoints && ServicesEndpoints.CampaignAPI, // https://ui.ads-int.microsoft.com/ODataApi\r\n 'odata.path': CampaignAPIPath || '/Campaign/V2', // /Campaign/V2\r\n 'odata.token': Token,\r\n CurrentUser,\r\n CurrentCustomer,\r\n CurrentAccount,\r\n AccountTimeZone: (CurrentAccount && CurrentAccount.TimeZone) || 71,\r\n });\r\n }\r\n setOdataInstance(odata(odataConfig, {}));\r\n }\r\n }, [odataConfig, odataInstance, serverContext]);\r\n\r\n const doDownload = () => {\r\n logTrace('[WooCommerce] download clicked');\r\n\r\n const getTagPuglinBlobUrl = `/Customers(${tagData.cid})/Accounts(${tagData.aid})/Tags(${tagData.tagId})/Default.GetWooCommerceBlobUrl()`;\r\n odataInstance.get(getTagPuglinBlobUrl)\r\n .then((response) => {\r\n const downloadUrl = response.value;\r\n fetch(downloadUrl)\r\n .then(res => res.blob())\r\n .then((blob) => {\r\n const originalType = blob.type.split('/').pop();\r\n // do not download xml error file\r\n if (originalType === 'zip') {\r\n const fileNameExtract = downloadUrl.match(/Microsoft(.)*\\.zip/);\r\n downloadifyBlob(blob, fileNameExtract[0]);\r\n } else {\r\n notificationApi.showWarning(downloadGenericError);\r\n }\r\n });\r\n })\r\n .catch((response) => {\r\n if (response.body && response.body.Code) {\r\n if (_.some(response.body.value, v => v.Code === 'InvalidCustomerId')) {\r\n notificationApi.showWarning(i18n.getString(_TL_('The manager account ID does not exist.')));\r\n }\r\n } else {\r\n notificationApi.showWarning(downloadGenericError);\r\n }\r\n\r\n logTrace('[WooCommerce] download error');\r\n });\r\n };\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nWooCommerceInstructionsUnstyled.propTypes = {\r\n classes: PropTypes.shape(_.mapObject(\r\n getWordpressInstructionsStyles(),\r\n _.constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n tagData: PropTypes.shape({\r\n cid: PropTypes.number.isRequired,\r\n aid: PropTypes.number.isRequired,\r\n tagId: PropTypes.number.isRequired,\r\n }).isRequired,\r\n logTrace: PropTypes.func.isRequired,\r\n serverContext: PropTypes.func.isRequired,\r\n};\r\n\r\nexport const WooCommerceInstructions = withDefaultStyles(WooCommerceInstructionsUnstyled, getWordpressInstructionsStyles);\r\n\r\n","import _ from 'underscore';\r\nimport React, { useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { ReactTemplate } from '@bingads-webui-react/react-template';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { notificationApi } from '@bingads-webui-react/notification-center';\r\nimport { PermissionsContext } from '@bingads-webui-react/hoc-with-permissions';\r\nimport { getWordpressInstructionsStyles } from '../styles/wordpress-instructions-styles';\r\nimport { CopyTag } from './copy-tag';\r\n\r\nimport imageStep2 from '../../media/wix-step2.png';\r\nimport imageStep3 from '../../media/wix-step3.png';\r\nimport imageStep4 from '../../media/wix-step4.png';\r\nimport imageStep5 from '../../media/wix-step5.png';\r\nimport imageStep6 from '../../media/wix-step6.png';\r\nimport imageStep7 from '../../media/wix-step7.png';\r\nimport imageStep8 from '../../media/wix-step8.png';\r\nimport imageStep9 from '../../media/wix-step9.png';\r\n\r\nimport { generateTag } from '../utils/tag-generator';\r\n\r\nconst WixInstructionsUnstyled = (props) => {\r\n const { classes, tag, logTrace } = props;\r\n const i18n = useContext(I18nContext);\r\n const noTranslateModel = { noTranslate: text => ({text}) };\r\n const onCopyCallback = ({ error, message, tagContent }) => {\r\n if (error) {\r\n logTrace(`[Wix] Copy error. Error: ${error} tagContent: ${JSON.stringify(tagContent)}`);\r\n notificationApi.showWarning(message);\r\n } else {\r\n logTrace('[Wix] Copy success.');\r\n notificationApi.showInfo(message);\r\n }\r\n };\r\n const permissions = useContext(PermissionsContext);\r\n const isUetSpaTrackingEnabled = _.result(permissions.dynamic, 'UetAutoSpaTracking');\r\n\r\n const tagContainerStyle = {\r\n container: {\r\n fontSize: '14px',\r\n lineHeight: '20px',\r\n color: '#323130',\r\n marginBottom: '12px',\r\n border: '1px solid black',\r\n padding: 20,\r\n wordWrap: 'break-word',\r\n whiteSpace: 'pre-wrap',\r\n width: 500,\r\n },\r\n };\r\n\r\n const containerStyle = _.extend({}, tagContainerStyle.container);\r\n return (\r\n \r\n
\r\n \r\n
\r\n {i18n.getString(_TL_('Step 1: Download the Microsoft Advertising UET plugin.'))}
\r\n\r\n
\r\n {i18n.getString(_TL_('Click'))} {i18n.getString(_TL_('Download'))} {i18n.getString(_TL_('for a .zip file that you’ll install in your WordPress admin panel.'))}
\r\n\r\n
\r\n \r\n
\r\n {i18n.getString(_TL_('Step 2: Add new plugin in your WordPress account.'))}
\r\n\r\n \r\n
\r\n {i18n.getString(_TL_('Make sure you open a new tab and are logged into your WordPress account.'))}
\r\n\r\n
\r\n
\r\n
\r\n \r\n
\r\n {i18n.getString(_TL_('Step 3: Install the plugin.'))}
\r\n\r\n \r\n
\r\n {i18n.getString(_TL_('Make sure you open a new tab and are logged into your WordPress account.'))}
\r\n\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n {i18n.getString(_TL_('Step 4: Activate the plugin'))}.
\r\n\r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n );\r\n};\r\n\r\nWixInstructionsUnstyled.propTypes = {\r\n classes: PropTypes.shape(_.mapObject(\r\n getWordpressInstructionsStyles(),\r\n _.constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n tag: PropTypes.shape({\r\n id: PropTypes.number.isRequired,\r\n type: PropTypes.oneOf(['Container', 'UET']).isRequired,\r\n }).isRequired,\r\n logTrace: PropTypes.func.isRequired,\r\n};\r\n\r\nexport const WixInstructions = withDefaultStyles(WixInstructionsUnstyled, getWordpressInstructionsStyles);\r\n","import _ from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport React, { useContext, useMemo, useState, useEffect, useCallback } from 'react';\r\nimport classNames from 'classnames';\r\nimport { notificationApi } from '@bingads-webui-react/notification-center';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { LearnMoreLink } from '@bingads-webui-campaign-react/help';\r\nimport { Link } from '@fluentui/react';\r\n\r\nimport { conversionTagProp, withConversionTagData, useInitConversionTagData, isDataReady } from '@bingads-webui-campaign-react/conversion-data';\r\n\r\nimport { TagSVG } from '../components/tag-SVG';\r\nimport { CopyTag } from '../components/copy-tag';\r\nimport { WordpressInstructions } from '../components/wordpress-instructions';\r\nimport { platforms, useHelpIds } from '../utils/platforms';\r\nimport { getThirdPartyTagViewStyle } from '../styles/third-party-tag-view-styles';\r\nimport { ShopifyInstructions } from '../components/shopify-instructions';\r\nimport { SquareSpaceInstructions } from '../components/squarespace-instructions';\r\nimport { GoogleTagManagerInstructions } from '../components/gtm-instruction';\r\nimport { WooCommerceInstructions } from '../components/woocommerce-instructions';\r\nimport { WixInstructions } from '../components/wix-instructions';\r\n\r\nconst ThirdPartyTagViewUnstyled = (props) => {\r\n const {\r\n tagContext,\r\n selectedPlatform,\r\n isSmartOrExpertMode,\r\n classes,\r\n serverContext,\r\n logTrace,\r\n onGoogleLoggedOut,\r\n onGoogleSelectAccount,\r\n updateGTMImportContext,\r\n deps,\r\n finishPageData,\r\n gtmUIContext,\r\n customLink,\r\n } = props;\r\n const {\r\n data,\r\n } = tagContext;\r\n const i18n = useContext(I18nContext);\r\n const helpIds = useHelpIds();\r\n const allPlatformsLearnMoreLink = helpIds.allPlatformsLearnMore;\r\n\r\n const content = useMemo(() => i18n.getString(_TL_('{0} instructions')), [i18n]);\r\n const texts = useMemo(() => content.split('{0}'), [content]);\r\n\r\n const [showHelp, setShowHelp] = useState(true);\r\n\r\n useInitConversionTagData(tagContext);\r\n\r\n useEffect(() => {\r\n if (isDataReady(data) && !_.isString(allPlatformsLearnMoreLink) && showHelp) {\r\n logTrace('[ThirdPartyTagView] Show apex help content');\r\n const apexHelpLink = document.querySelector('.third-party-tag-view span > a.HelpTopic');\r\n if (apexHelpLink) {\r\n apexHelpLink.click();\r\n }\r\n }\r\n }, [data, showHelp, logTrace, allPlatformsLearnMoreLink]);\r\n\r\n const onCopyCallback = useCallback(({ error, message, tagContent }) => {\r\n if (error) {\r\n logTrace(`[ThirdPartyTagStep] Copy error. Error: ${error} tagContent: ${JSON.stringify(tagContent)}`);\r\n notificationApi.showWarning(message);\r\n } else {\r\n logTrace('[ThirdPartyTagStep] Copy success.');\r\n notificationApi.showInfo(message);\r\n }\r\n }, [logTrace]);\r\n\r\n const specificInstructionsForPlatform = useMemo(() => {\r\n if (!isSmartOrExpertMode) {\r\n // platform-specific instructions only apply for Smart Campaigns and Expert\r\n return null;\r\n }\r\n\r\n switch (selectedPlatform) {\r\n case 'WordPress':\r\n setShowHelp(false);\r\n return (\r\n \r\n
\r\n \r\n
\r\n {i18n.getString(_TL_('Step 1: Copy the UET tag below.'))}
\r\n\r\n
\r\n \r\n {generateTag(tag.type, tag.id, false, 'wix_ui', isUetSpaTrackingEnabled)}\r\n
\r\n \r\n
\r\n \r\n
\r\n {i18n.getString(_TL_('Step 2: Log into your Wix Website dashboard and select Settings from the left menu. '))}
\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {i18n.getString(_TL_('Step 3: Scroll to the Advanced bar at the bottom of the page and select Custom code.'))}
\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {i18n.getString(_TL_('Step 4: Select + Add Custom Code from the upper-right corner of the page.'))}
\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {i18n.getString(_TL_('Step 5: In the text box under Paste the code snippet here, paste the UET code that you copied in Step 1.'))}
\r\n\r\n
\r\n \r\n 
\r\n
\r\n \r\n
\r\n \r\n
\r\n {i18n.getString(_TL_('Step 6: Enter a name for your code in the Name box that you can easily identify later.'))}
\r\n\r\n
\r\n \r\n 
\r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n {i18n.getString(_TL_('Step 7: Under Add Code to Pages, select an option.'))}
\r\n\r\n
\r\n \r\n 
\r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n \r\n
\r\n {i18n.getString(_TL_('Step 8: Under Place Code in, select the area of your website where you want to place the code (Head, Body - start, or Body - end).'))}
\r\n\r\n
\r\n \r\n 
\r\n
\r\n \r\n
\r\n \r\n
\r\n {i18n.getString(_TL_('Step 9: Select Apply.'))}
\r\n\r\n
\r\n \r\n 
\r\n
\r\n \r\n {isDataReady(data) && (\r\n \r\n \r\n )}\r\n
\r\n );\r\n\r\n return (\r\n \r\n {isDataReady(data) && (\r\n specificInstructionsForPlatform || genericInstructions\r\n )}\r\n
\r\n );\r\n};\r\n\r\nThirdPartyTagViewUnstyled.propTypes = {\r\n tagContext: conversionTagProp.isRequired,\r\n selectedPlatform: PropTypes.string.isRequired,\r\n isSmartOrExpertMode: PropTypes.bool,\r\n serverContext: PropTypes.shape({\r\n CurrentAccount: PropTypes.shape({\r\n Id: PropTypes.number,\r\n AdvertiserCustomerID: PropTypes.number,\r\n }),\r\n }).isRequired,\r\n logTrace: PropTypes.func.isRequired,\r\n onGoogleLoggedOut: PropTypes.func.isRequired,\r\n onGoogleSelectAccount: PropTypes.func.isRequired,\r\n deps: PropTypes.shape({}).isRequired,\r\n updateGTMImportContext: PropTypes.func.isRequired,\r\n finishPageData: PropTypes.shape({}),\r\n gtmUIContext: PropTypes.shape({}).isRequired,\r\n permissions: PropTypes.shape({\r\n dynamic: PropTypes.shape({}),\r\n }),\r\n classes: PropTypes.shape(_.mapObject(\r\n getThirdPartyTagViewStyle(),\r\n _.constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n customLink: PropTypes.elementType,\r\n};\r\n\r\nThirdPartyTagViewUnstyled.defaultProps = {\r\n finishPageData: null,\r\n isSmartOrExpertMode: false,\r\n customLink: null,\r\n permissions: {\r\n dynamic: {},\r\n },\r\n};\r\n\r\nexport const ThirdPartyTagView = withDefaultStyles(\r\n withConversionTagData(ThirdPartyTagViewUnstyled),\r\n getThirdPartyTagViewStyle\r\n);\r\n","export const getThirdPartyTagViewStyle = () => ({\r\n container: {\r\n fontSize: '14px',\r\n marginLeft: 26,\r\n marginTop: 10,\r\n marginBottom: 12,\r\n '& .copy-tag': {\r\n display: 'inline-block',\r\n },\r\n '& a.HelpTopic, & a.all-platforms-learn-more': {\r\n marginLeft: 15,\r\n 'vertical-align': 'middle',\r\n },\r\n },\r\n});\r\n","import _ from 'underscore';\r\nimport React, { useContext, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\n\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\n\r\nimport { getInsertInstructionStyle } from '../styles/insert-instruction-styles';\r\n\r\nconst InsertInstructionUnstyled = (props) => {\r\n const { classes } = props;\r\n const i18n = useContext(I18nContext);\r\n const stepList = useMemo(() => [\r\n _TL_('Click {0} below to copy the tracking tag to your clipboard.'),\r\n _TL_('Open the HTML for each page on your website.'),\r\n _TL_('Paste the tracking tag anywhere in the head section of your pages\\' code (between the HTML \"\" and \"\" tags).'),\r\n _TL_('Make sure the tracking tag is in the code for every page of your website.'),\r\n _TL_('Save the changes to your webpages.'),\r\n ], []);\r\n const onRenderSteps = useMemo(() => _.map(stepList, (step, idx) => {\r\n const texts = i18n.getString(step).split('{0}');\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nInsertInstructionUnstyled.propTypes = {\r\n classes: PropTypes.shape(_.mapObject(\r\n getInsertInstructionStyle(),\r\n _.constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n};\r\n\r\nexport const InsertInstruction = withDefaultStyles(InsertInstructionUnstyled, getInsertInstructionStyle);\r\n","export const getInsertInstructionStyle = () => ({\r\n container: {\r\n fontSize: '16px',\r\n lineHeight: '24px',\r\n color: '#323130',\r\n marginBottom: '12px',\r\n },\r\n steps: {\r\n fontSize: '14px',\r\n marginBottom: '12px',\r\n },\r\n});\r\n","import _ from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport React from 'react';\r\nimport classNames from 'classnames';\r\n\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nimport { conversionTagProp, withConversionTagData, useInitConversionTagData, isDataReady } from '@bingads-webui-campaign-react/conversion-data';\r\n\r\nimport { InsertInstruction } from '../components/insert-instruction';\r\nimport { TagSVG } from '../components/tag-SVG';\r\nimport { CopyTag } from '../components/copy-tag';\r\nimport { getCopyTagViewStyle } from '../styles/copy-tag-view-styles';\r\n\r\nconst CopyTagViewUnstyled = (props) => {\r\n const {\r\n tagContext,\r\n onCopyCallback,\r\n classes,\r\n } = props;\r\n const {\r\n data,\r\n } = tagContext;\r\n\r\n useInitConversionTagData(tagContext);\r\n\r\n return (\r\n - \r\n {onRenderSteps}\r\n
\r\n
\r\n );\r\n};\r\n\r\nCopyTagViewUnstyled.propTypes = {\r\n tagContext: conversionTagProp.isRequired,\r\n onCopyCallback: PropTypes.func.isRequired,\r\n classes: PropTypes.shape(_.mapObject(\r\n getCopyTagViewStyle(),\r\n _.constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n};\r\n\r\nexport const CopyTagView = withDefaultStyles(\r\n withConversionTagData(CopyTagViewUnstyled),\r\n getCopyTagViewStyle\r\n);\r\n","export const getCopyTagViewStyle = () => ({\r\n container: {\r\n fontSize: '14px',\r\n marginLeft: 26,\r\n marginBottom: 12,\r\n },\r\n});\r\n","import { useContext } from 'react';\r\nimport { filter, map, isEmpty, each } from 'underscore';\r\nimport { ConversionHelpContext } from '@bingads-webui-campaign-react/conversion-help';\r\n\r\nexport const MAX_EMAIL_ADDRESSES_COUNT = 10;\r\n\r\nexport const senders = {\r\n Container: 'Unified Smart',\r\n DMC: 'Digital Marketing Center',\r\n UET: 'Microsoft Advertising',\r\n};\r\n\r\nexport function useHelpIds() {\r\n const helpIds = useContext(ConversionHelpContext);\r\n\r\n return helpIds.emailTag;\r\n}\r\n\r\n// TODO: Should this be updated for UP\r\nexport const supportTeamLinks = {\r\n Container: 'https://help.digitalmarketing.microsoft.com/#apex/27/en/30006/',\r\n DMC: 'https://help.digitalmarketing.microsoft.com/#apex/27/en/30006/',\r\n UET: 'https://help.ads.microsoft.com/',\r\n};\r\n\r\nconst isValidEmailAddress = (address) => {\r\n const re = /^(([^<>()[\\]\\\\.,;:\\s@']+(\\.[^<>()[\\]\\\\.,;:\\s@']+)*)|('.+'))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\r\n return re.test(String(address).toLowerCase());\r\n};\r\n\r\nexport const genEmailAddresses = (emailAddresses) => {\r\n const trimmedAddress = map(emailAddresses, address => address.trim());\r\n const validEmailAddresses = filter(trimmedAddress, address => isValidEmailAddress(address));\r\n\r\n return validEmailAddresses.join(';');\r\n};\r\n\r\nexport const splitEmailAddresses = (emailAddresses) => {\r\n const validEmailAddresses = [];\r\n const invalidEmailAddresses = [];\r\n const trimmedAddress = map(emailAddresses, address => address.trim());\r\n each(trimmedAddress, (address) => {\r\n if (isEmpty(address.trim())) {\r\n return;\r\n }\r\n if (isValidEmailAddress(address)) {\r\n validEmailAddresses.push(address);\r\n } else {\r\n invalidEmailAddresses.push(address);\r\n }\r\n });\r\n return [validEmailAddresses, invalidEmailAddresses];\r\n};\r\n\r\nexport const canSendEmail = (validEmailAddresses, invalidEmailAddresses) =>\r\n validEmailAddresses.length > 0 &&\r\n validEmailAddresses.length <= MAX_EMAIL_ADDRESSES_COUNT &&\r\n invalidEmailAddresses.length === 0;\r\n","export const getEmailTemplateStyle = () => ({\r\n template: {\r\n fontSize: '16px',\r\n marginLeft: 0,\r\n marginTop: 20,\r\n marginBottom: 0,\r\n },\r\n instruction: {\r\n lineHeight: '24px',\r\n color: '#323130',\r\n marginTop: 20,\r\n marginBottom: 20,\r\n },\r\n steps: {\r\n marginBottom: 12,\r\n },\r\n text: {\r\n marginTop: 15,\r\n marginBottom: 15,\r\n },\r\n});\r\n\r\nexport const emailTemplateWidth = {\r\n Container: '440px',\r\n UET: '650px',\r\n};\r\n","/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport { map, mapObject, constant } from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport React, { useContext, useMemo } from 'react';\r\nimport classNames from 'classnames';\r\n\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { LearnMoreLink } from '@bingads-webui-campaign-react/help';\r\nimport { Link } from '@fluentui/react';\r\n\r\nimport { TagSVG } from '../components/tag-SVG';\r\nimport { senders, supportTeamLinks, useHelpIds } from '../utils/email-tag';\r\nimport { getEmailTemplateStyle, emailTemplateWidth } from '../styles/email-template-styles';\r\n\r\nconst EmailTemplateUnstyled = (props) => {\r\n const {\r\n tag,\r\n classes,\r\n } = props;\r\n const {\r\n type,\r\n } = tag;\r\n const i18n = useContext(I18nContext);\r\n const helpIds = useHelpIds();\r\n\r\n const onRenderDescriptions = useMemo(() => {\r\n const texts = i18n.getString(_TL_('Hello from {{send}},'), { send: senders[type] });\r\n const texts2 = i18n.getString(_TL_('{{username}} sent the tracking tag below to you, so you can add it to their webpages. This tag will help them track customer actions on their website.'), { username: `{${senders[type]} ${i18n.getString(_TL_('username'))}}` });\r\n return (\r\n \r\n
\r\n );\r\n }, [type, i18n, classes.text]);\r\n\r\n const title = useMemo(() => _TL_('To add the tag to their website:'), []);\r\n const stepList = useMemo(() => [\r\n _TL_('Copy the tag below to your clipboard.'),\r\n _TL_('Open the HTML for each page on the website.'),\r\n _TL_('Paste the tracking tag anywhere in the head section of the pages\\' code (between the HTML \"\" and \"\" tags).'),\r\n _TL_('Make sure the tracking tag is in the code for every page of the website.'),\r\n _TL_('Save the changes to the webpages.'),\r\n ], []);\r\n const onRenderSteps = useMemo(() => map(stepList, (step, idx) => (\r\n \r\n {texts}\r\n
\r\n \r\n {texts2}\r\n
\r\n \r\n
\r\n ), [i18n, title, onRenderSteps, classes.instruction, classes.steps]);\r\n\r\n const onRenderTagDescriptions = useMemo(() => {\r\n const texts = i18n.getString(_TL_('For more information on adding tracking tags to webpages - including instructions for WordPress, Wix, Shopify, and BigCommerce - {0}.')).split('{0}');\r\n const texts2 = i18n.getString(_TL_('Please contact the {0} if you have any questions. Thank you for using Microsoft Advertising.')).split('{0}');\r\n\r\n return (\r\n \r\n {i18n.getString(title)}\r\n
\r\n - \r\n {onRenderSteps}\r\n
\r\n
\r\n );\r\n }, [i18n, classes.text, helpIds, type]);\r\n\r\n const onRenderAppreciation = useMemo(() => {\r\n const texts = i18n.getString(_TL_('The {{sender}} team'), { sender: senders[type] });\r\n return (\r\n \r\n {texts[0]}\r\n
\r\n \r\n {texts2[0]}\r\n \r\n {`${senders[type]} ${i18n.getString(_TL_('Support team'))}`}\r\n \r\n {texts2[1]}\r\n
\r\n \r\n
\r\n );\r\n }, [type, i18n, classes.text]);\r\n\r\n const templateStyle = useMemo(() => ({\r\n width: emailTemplateWidth[type],\r\n }), [type]);\r\n\r\n return (\r\n \r\n {i18n.getString(_TL_('Kind regards,'))}\r\n
\r\n \r\n {texts}\r\n
\r\n \r\n {onRenderDescriptions}\r\n {onRenderInstructions}\r\n
\r\n );\r\n};\r\n\r\nEmailTemplateUnstyled.propTypes = {\r\n tag: PropTypes.shape({\r\n id: PropTypes.number.isRequired,\r\n type: PropTypes.oneOf(['Container', 'UET']).isRequired,\r\n }).isRequired,\r\n classes: PropTypes.shape(mapObject(\r\n getEmailTemplateStyle(),\r\n constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n};\r\n\r\nexport const EmailTemplate = withDefaultStyles(\r\n EmailTemplateUnstyled,\r\n getEmailTemplateStyle\r\n);\r\n","import _ from 'underscore';\r\n\r\n// generates the key/value pairs needed to fill out the email templates\r\nexport function generateEmailContent({\r\n i18n,\r\n tagId,\r\n action,\r\n currencyCode,\r\n goalValueType,\r\n}) {\r\n const TagId = `${tagId}`;\r\n\r\n const isVariant = goalValueType === 'VariantValue';\r\n\r\n if (_.isString(action) || isVariant) {\r\n const eventPropertiesObj = isVariant ? { revenue_value: '$Variable_revenue_placeholder$', currency: currencyCode } : {};\r\n const stringifiedEventProperties = JSON.stringify(eventPropertiesObj);\r\n // $Variable_revenue_placeholder$ is replaced after stringyfing the object to avoid the quotes function name\r\n const eventProperties = stringifiedEventProperties.replace('\"$Variable_revenue_placeholder$\"', 'Replace_with_Variable_Revenue_Function()');\r\n\r\n // values for event tag code snippet, see UPTagAndEventTagInstructionsEmail template\r\n return {\r\n TagId,\r\n EventAction: action || '',\r\n EventProperties: eventProperties,\r\n };\r\n }\r\n\r\n // values for UET tag snippet, see UPTagEmail and SCTagEmail templates\r\n return {\r\n TagContent: i18n.getString(_TL_('Tag creation script')),\r\n TagId,\r\n };\r\n}\r\n","import { generateEmailContent } from './generate-email-content';\r\n\r\n// Container tag example: https://msasg.visualstudio.com/Bing_Ads/_git/AdsTracking_Core?path=/private/Container/TagContainerSnippet/Sample/tcs_prod.html\r\nexport function generateEventTag({\r\n action,\r\n currencyCode,\r\n goalValueType,\r\n i18n,\r\n tagType,\r\n uglify = false,\r\n}) {\r\n const emailContent = generateEmailContent({\r\n i18n,\r\n action,\r\n currencyCode,\r\n goalValueType,\r\n });\r\n\r\n const eventAction = emailContent.EventAction;\r\n const eventProperties = emailContent.EventProperties;\r\n\r\n let tag = null;\r\n\r\n if (tagType === 'UET') {\r\n tag = ``;\r\n } else if (tagType === 'UETPageLoad') {\r\n tag = ``;\r\n } else if (tagType === 'UETExample') {\r\n tag = `\r\n\r\n\r\n{{highlighted}}// ${i18n.getString(_TL_('UET tag goes here.'))}{{/highlighted}}\r\n{{highlighted}}// ${i18n.getString(_TL_('Copy and paste the event tag right after UET tag.'))}{{/highlighted}}\r\n \r\n\r\n\r\n\r\n{{highlighted}}// ${i18n.getString(_TL_('In the button code you want to track, call the function name from event tag.'))}{{/highlighted}}\r\n \r\n\r\n`;\r\n } else if (tagType === 'UETPageLoadExample') {\r\n tag = `\r\n\r\n\r\n{{highlighted}}// ${i18n.getString(_TL_('UET tag goes here.'))}{{/highlighted}}\r\n{{highlighted}}// ${i18n.getString(_TL_('Copy and paste the event tag right after UET tag.'))}{{/highlighted}}\r\n \r\n\r\n`;\r\n } else if (tagType === 'Container' || tagType === 'DMC') {\r\n tag = ``;\r\n } else if (tagType === 'ContainerPageLoad' || tagType === 'DMCPageLoad') {\r\n tag = ``;\r\n } else if (tagType === 'ContainerExample' || tagType === 'DMCExample') {\r\n tag = `\r\n\r\n\r\n{{highlighted}}// ${i18n.getString(_TL_('Base tag goes here.'))}{{/highlighted}}\r\n{{highlighted}}// ${i18n.getString(_TL_('Copy and paste the event tag right after base tag.'))}{{/highlighted}}\r\n \r\n\r\n\r\n\r\n{{highlighted}}// ${i18n.getString(_TL_('In the button code you want to track, call the function name from event tag.'))}{{/highlighted}}\r\n \r\n\r\n`;\r\n } else if (tagType === 'ContainerPageLoadExample' || tagType === 'DMCPageLoadExample') {\r\n tag = `\r\n\r\n\r\n{{highlighted}}// ${i18n.getString(_TL_('Base tag goes here.'))}{{/highlighted}}\r\n{{highlighted}}// ${i18n.getString(_TL_('Copy and paste the event tag right after base tag.'))}{{/highlighted}}\r\n \r\n\r\n`;\r\n } else {\r\n return null;\r\n }\r\n\r\n if (uglify) {\r\n // NOTE: not a true uglify, just removes newlines and leading spaces\r\n return tag.replace(/(^\\s+|\\n)/gm, '');\r\n }\r\n\r\n return tag;\r\n}\r\n","import { useCallback, useContext, useMemo } from 'react';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { ConversionDataContext, useInitConversionTagData } from '@bingads-webui-campaign-react/conversion-data';\r\n\r\nimport { generateEventTag } from './generate-event-tag';\r\n\r\nexport function useEventTag({\r\n action,\r\n currencyCode,\r\n goalValue,\r\n goalValueType,\r\n}) {\r\n const i18n = useContext(I18nContext);\r\n const { tagContext } = useContext(ConversionDataContext);\r\n useInitConversionTagData(tagContext);\r\n\r\n const { data: tag } = tagContext;\r\n const tagId = useMemo(() => tag && tag.id, [tag]);\r\n const tagType = useMemo(() => tag && tag.type, [tag]);\r\n const functionName = useMemo(() => (tagType === 'UET' ? 'uet_report_conversion' : 'report_conversion'), [tagType]);\r\n\r\n const generateEventTagParams = useMemo(() => ({\r\n action,\r\n currencyCode,\r\n goalValue,\r\n goalValueType,\r\n i18n,\r\n }), [action, currencyCode, goalValue, goalValueType, i18n]);\r\n\r\n const getEventTag = useCallback((isPageLoad = false) => {\r\n const newTagType = isPageLoad ? `${tagType}PageLoad` : tagType;\r\n return generateEventTag({ ...generateEventTagParams, tagType: newTagType });\r\n }, [generateEventTagParams, tagType]);\r\n\r\n const getExampleCodeSnippet = useCallback((isPageLoad = false) => {\r\n const exampleTagType = isPageLoad ? `${tagType}PageLoadExample` : `${tagType}Example`;\r\n return generateEventTag({ ...generateEventTagParams, tagType: exampleTagType });\r\n }, [generateEventTagParams, tagType]);\r\n\r\n return {\r\n functionName,\r\n getEventTag,\r\n getExampleCodeSnippet,\r\n tagId,\r\n tagType,\r\n };\r\n}\r\n","import React, { useContext, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { ReactTemplate } from '@bingads-webui-react/react-template';\r\n\r\nimport { senders } from '../utils/email-tag';\r\nimport { useEventTag } from '../utils/use-event-tag';\r\nimport { generateTag } from '../utils/tag-generator';\r\nimport { getEventTagEmailPreviewStyle } from '../styles/event-tag-email-preview-styles';\r\nimport { chromeExtURL, edgeExtURL } from '../utils/uet-tag-helper-install-urls';\r\n\r\n// displays the preview for the email that will be sent for custom event tag\r\n// See NotificationPlatform repo: UPTagAndEventTagInstructionsEmail_Transform.xslt and SCTagAndEventTagInstructionsEmail_Transform.xslt\r\nfunction EventTagEmailPreviewUnstyled(props) {\r\n const {\r\n action,\r\n classes,\r\n currencyCode,\r\n goalValue,\r\n goalValueType,\r\n } = props;\r\n const i18n = useContext(I18nContext);\r\n\r\n const {\r\n functionName,\r\n getEventTag,\r\n tagId,\r\n tagType,\r\n } = useEventTag({\r\n action,\r\n currencyCode,\r\n goalValue,\r\n goalValueType,\r\n });\r\n\r\n const baseTag = useMemo(() => generateTag(tagType, tagId, false), [tagType, tagId]);\r\n const eventTag = useMemo(() => getEventTag(), [getEventTag]);\r\n const eventTagForPageLoad = useMemo(() => getEventTag(true), [getEventTag]);\r\n\r\n const isUetTagHelperSupported = tagType === 'UET';\r\n const isUnifiedSmart = tagType === 'Container';\r\n\r\n const productName = tagType ? senders[tagType] : '';\r\n\r\n return (\r\n \r\n {i18n.getString(_TL_('Tracking tag:'))}\r\n
\r\n \r\n \r\n \r\n )}\r\n\r\n {!isUetTagHelperSupported && (\r\n
\r\n );\r\n}\r\n\r\nEventTagEmailPreviewUnstyled.propTypes = {\r\n action: PropTypes.string,\r\n classes: PropTypes.shape({ emailPreview: PropTypes.string }).isRequired,\r\n currencyCode: PropTypes.string,\r\n goalValue: PropTypes.string,\r\n goalValueType: PropTypes.oneOf(['FixedValue', 'VariantValue', 'NoValue']).isRequired,\r\n};\r\n\r\nEventTagEmailPreviewUnstyled.defaultProps = {\r\n action: undefined,\r\n currencyCode: undefined,\r\n goalValue: undefined,\r\n};\r\n\r\nexport const EventTagEmailPreview = withDefaultStyles(EventTagEmailPreviewUnstyled, getEventTagEmailPreviewStyle);\r\n","// Styles and classes copied from the email templates\r\n// See NotificationPlatform repo: UPTagAndEventTagInstructionsEmail_Transform.xslt and SCTagAndEventTagInstructionsEmail_Transform.xslt\r\nexport const getEventTagEmailPreviewStyle = () => ({\r\n emailPreview: {\r\n paddingBottom: '20px',\r\n\r\n '& .title': {\r\n fontWeight: 600,\r\n fontSize: '20px',\r\n lineHeight: '23px',\r\n marginBottom: '22px',\r\n },\r\n\r\n '& ul': {\r\n listStyle: 'none',\r\n marginLeft: 0,\r\n paddingLeft: 0,\r\n },\r\n\r\n '& .substep': {\r\n marginTop: '22px',\r\n fontWeight: 600,\r\n fontSize: '20px',\r\n lineHeight: '23px',\r\n },\r\n\r\n '& .EmailTemplate-instruction': {\r\n lineHeight: '24px',\r\n marginTop: '20px',\r\n marginBottom: '20px',\r\n },\r\n\r\n '& .EmailTemplate-text': {\r\n marginTop: '20px',\r\n marginBottom: '20px',\r\n },\r\n\r\n '& .text': {\r\n border: '1px solid #f3f2f1',\r\n fontWeight: 600,\r\n paddingTop: '5px',\r\n paddingBottom: '5px',\r\n paddingLeft: '25px',\r\n },\r\n\r\n '& .event-tag-wrapper': {\r\n paddingTop: '25px',\r\n paddingBottom: '25px',\r\n },\r\n\r\n '& .tag': {\r\n border: '1px solid #f3f2f1',\r\n paddingTop: '15px',\r\n paddingBottom: '15px',\r\n paddingLeft: '25px',\r\n paddingRight: '25px',\r\n whiteSpace: 'pre-wrap',\r\n },\r\n },\r\n});\r\n","export const getEmailTagViewStyle = () => ({\r\n container: {\r\n fontSize: '14px',\r\n marginLeft: 26,\r\n marginBottom: 12,\r\n '& .email-text-area': {\r\n width: 440,\r\n marginTop: 20,\r\n },\r\n '& .show-error': {\r\n color: 'red',\r\n },\r\n '& .send-email': {\r\n marginTop: 20,\r\n },\r\n '& .email-template-link': {\r\n marginLeft: 16,\r\n marginTop: 25,\r\n },\r\n '& .ms-Panel-commands': {\r\n marginBottom: 39,\r\n },\r\n },\r\n panel: {\r\n fontSize: '16px',\r\n },\r\n});\r\n\r\nexport const emailTagPanelStyles = {\r\n panel: {\r\n footerInner: { borderTop: '1px #EDEBE9 solid' },\r\n header: { paddingLeft: 16, paddingTop: 0, marginTop: '0 !important' },\r\n width: {\r\n Container: '480px',\r\n DMC: '480px',\r\n UET: '700px',\r\n },\r\n content: {\r\n paddingBottom: '80px',\r\n },\r\n },\r\n};\r\n","/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport { map, noop, mapObject, constant } from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport React, { useContext, useState, useCallback, useEffect, useMemo } from 'react';\r\nimport classNames from 'classnames';\r\n\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { notificationApi } from '@bingads-webui-react/notification-center';\r\nimport { conversionTagProp, withConversionTagData, ConversionDataContext, useInitConversionTagData, isDataReady } from '@bingads-webui-campaign-react/conversion-data';\r\nimport { SidePanel as Panel } from '@bingads-webui-campaign-react/side-panel';\r\nimport { TextField, DefaultButton, Link, PanelType } from '@fluentui/react';\r\n\r\nimport { EmailTemplate } from './email-template';\r\nimport { EventTagEmailPreview } from './event-tag-email-preview';\r\nimport { MAX_EMAIL_ADDRESSES_COUNT, splitEmailAddresses, genEmailAddresses, canSendEmail } from '../utils/email-tag';\r\nimport { getEmailTagViewStyle, emailTagPanelStyles } from '../styles/email-tag-view-styles';\r\nimport { generateEmailContent } from '../utils/generate-email-content';\r\n\r\nconst EmailTagViewUnstyled = (props) => {\r\n const {\r\n tagContext,\r\n onSendEmail,\r\n classes,\r\n action,\r\n currencyCode,\r\n goalValue,\r\n goalValueType,\r\n isEventGoal,\r\n } = props;\r\n const {\r\n data,\r\n emailStatus,\r\n emailInProgress,\r\n sendTagEmail,\r\n } = tagContext;\r\n const i18n = useContext(I18nContext);\r\n const { appContext: { isReadOnlyUser }, instrumentation } = useContext(ConversionDataContext);\r\n\r\n const [isFirstRendered, setIsFirstRendered] = useState(true);\r\n const [emailAddresses, setEmailAddresses] = useState(null);\r\n const [errorText, setErrorText] = useState(null);\r\n const [showEmailTemplate, setShowEmailTemplate] = useState(false);\r\n\r\n const genErrorMessage = useCallback((validEmailAddresses, invalidEmailAddresses) => {\r\n if (isFirstRendered) {\r\n setIsFirstRendered(false);\r\n return (null);\r\n }\r\n const exceedMaxValidMessage = i18n.getString(_TL_('You have reached the maximum of {0} email addresses. Remove at least 1 email address to send the message.')).split('{0}');\r\n\r\n return (\r\n {i18n.getString(_TL_('Setting up your conversion tracking'))}
\r\n \r\n
\r\n \r\n {i18n.getString(\r\n _TL_('{{productName}} user sent you a conversion tracking tag setup instructions, so you can add the tag to your website. To add this tag to your website, follow the instructions below.'),\r\n { productName }\r\n )}\r\n
\r\n {i18n.getString(_TL_('Step 1'))}
\r\n \r\n {i18n.getString(_TL_('Copy the tag and paste it in between the and tags of every page of your website. You only need to install the global site tag once on every page of your website, even if you are tracking multiple conversions.'))}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {i18n.getString(_TL_('Tracking tag'))}\r\n
\r\n \r\n {baseTag}\r\n
\r\n {i18n.getString(_TL_('Step 2'))}
\r\n - \r\n
- \r\n
{i18n.getString(_TL_('- To track event on page load'))}
\r\n \r\n \r\n {i18n.getString(_TL_('Copy the snippet below and paste it in between the and tags of the page(s) you\\'d like to track, right after the base tag. Replace the event properties as appropriate.'))}\r\n \r\n - \r\n
{i18n.getString(_TL_('- To track event on inline action:'))}
\r\n \r\n \r\n {i18n.getString(\r\n _TL_('Copy the snippet below and paste it in between the and tags of the page(s) you\\'d like to track, right after the base tag. Replace the event properties as appropriate. Then, call the function \"{{functionName}}\" when the specific action is taken i.e. button or URL is clicked.'),\r\n { functionName }\r\n )}\r\n \r\n
\r\n
\r\n \r\n {eventTagForPageLoad}\r\n
\r\n \r\n
\r\n \r\n {eventTag}\r\n
\r\n {i18n.getString(_TL_('Step 3'))}
\r\n \r\n
\r\n \r\n
\r\n \r\n {i18n.getString(_TL_('Next step to test your conversion goal:'))}\r\n
\r\n \r\n \r\n {text},\r\n chrome: text => {text},\r\n }}\r\n template={i18n.getString(_TL_('It can take up to 24 hours for us to verify your tags. In the meantime, you can check your tag status and test whether your conversion goals are set up correctly using the Tag Helper. You can install this browser extension on {{edge}}Microsoft Edge{{/edge}} or {{chrome}}Google Chrome{{/chrome}}.'))}\r\n />\r\n \r\n
\r\n \r\n {text},\r\n productName,\r\n }}\r\n template={i18n.getString(_TL_('Please contact the {{a}}Microsoft Advertising Support team{{/a}} if you have any questions. Thank you for using Microsoft Advertising.'))}\r\n />\r\n\r\n
\r\n \r\n
\r\n )}\r\n\r\n \r\n {isUnifiedSmart ? i18n.getString(_TL_('Unified Smart Support team')) : i18n.getString(_TL_('Digital Marketing Center Support team'))},\r\n }}\r\n template={i18n.getString(_TL_('Please contact the {{a}}Platform Support Team Placeholder{{/a}} if you have any questions. Thank you for using Microsoft Advertising.'))}\r\n />\r\n
\r\n \r\n
\r\n {i18n.getString(_TL_('Kind regards,'))}
\r\n {i18n.getString(_TL_('The {{productName}} team'), { productName })}
\r\n \r\n {validEmailAddresses.length > MAX_EMAIL_ADDRESSES_COUNT &&\r\n
\r\n );\r\n }, [isFirstRendered, i18n]);\r\n\r\n const onChangeEmailAddress = useCallback((textString) => {\r\n instrumentation.logTrace(`[EmailTagView] Email address change to ${textString}`);\r\n const userInputs = textString.split('\\n');\r\n const [validEmailAddresses, invalidEmailAddresses] = splitEmailAddresses(userInputs);\r\n setErrorText(genErrorMessage(validEmailAddresses, invalidEmailAddresses));\r\n setEmailAddresses(userInputs);\r\n }, [instrumentation, genErrorMessage]);\r\n\r\n // generate the key/value pairs needed by the email template\r\n const emailContent = useMemo(() => generateEmailContent({\r\n i18n,\r\n tagId: data && data.id,\r\n action,\r\n currencyCode,\r\n goalValueType,\r\n }), [\r\n i18n,\r\n data,\r\n action,\r\n currencyCode,\r\n goalValueType,\r\n ]);\r\n\r\n const sendEmail = useCallback(() => {\r\n const [validEmailAddresses, invalidEmailAddresses] = splitEmailAddresses(emailAddresses);\r\n if (canSendEmail(validEmailAddresses, invalidEmailAddresses)) {\r\n const targetEmailAddresses = genEmailAddresses(validEmailAddresses);\r\n instrumentation.logTrace(`[EmailTagView] Send email to ${targetEmailAddresses}, emailContent=${JSON.stringify(emailContent)}`);\r\n if (!emailInProgress) {\r\n sendTagEmail(emailContent, targetEmailAddresses);\r\n onSendEmail();\r\n }\r\n } else {\r\n if (validEmailAddresses.length > MAX_EMAIL_ADDRESSES_COUNT) {\r\n instrumentation.logTrace(`[EmailTagView] Find ${validEmailAddresses.length} valid email addresses. Reached the maximum of ${MAX_EMAIL_ADDRESSES_COUNT} email addresses.`);\r\n }\r\n if (validEmailAddresses.length === 0) {\r\n instrumentation.logTrace('[EmailTagView] Expect at least one valid email addresses.');\r\n }\r\n if (invalidEmailAddresses.length > 0) {\r\n instrumentation.logTrace(`[EmailTagView] Find invalid email address(es): ${invalidEmailAddresses.toString()}`);\r\n }\r\n }\r\n }, [emailContent, emailInProgress, sendTagEmail, emailAddresses, instrumentation, onSendEmail]);\r\n\r\n useEffect(() => {\r\n if (emailStatus === true) {\r\n notificationApi.showInfo(i18n.getString(_TL_('Email sent')));\r\n } else if (emailStatus === false) {\r\n notificationApi.showWarning(i18n.getString(_TL_('Oh, no! We weren\\'t able to send the email message. Please try again.')));\r\n }\r\n }, [emailStatus, i18n]);\r\n\r\n const onShowEmailTemplate = useCallback(() => {\r\n instrumentation.logTrace('[EmailTagView] Show email template');\r\n setShowEmailTemplate(true);\r\n }, [instrumentation]);\r\n\r\n const onCloseEmailTemplate = useCallback(() => {\r\n instrumentation.logTrace('[EmailTagView] Close email template');\r\n setShowEmailTemplate(false);\r\n }, [instrumentation]);\r\n\r\n const onRenderPanelFooter = useCallback(() => (\r\n \r\n {`${exceedMaxValidMessage[0]}${MAX_EMAIL_ADDRESSES_COUNT}${exceedMaxValidMessage[1]}`}\r\n
\r\n }\r\n {validEmailAddresses.length === 0 &&\r\n \r\n {i18n.getString(_TL_('Expect at least one valid email address.'))}\r\n
\r\n }\r\n {invalidEmailAddresses.length > 0 &&\r\n \r\n \r\n {address}\r\n \r\n ))}\r\n
\r\n }\r\n \r\n {i18n.getString(_TL_('Please correct these invalid email addresses:'))}\r\n
\r\n {map(invalidEmailAddresses, (address, idx) => (\r\n \r\n \r\n {i18n.getString(_TL_('View email template'))}\r\n \r\n\r\n {isDataReady(data) &&\r\n \r\n {!isEventGoal && (\r\n
\r\n );\r\n};\r\n\r\nEmailTagViewUnstyled.propTypes = {\r\n tagContext: conversionTagProp.isRequired,\r\n onSendEmail: PropTypes.func,\r\n classes: PropTypes.shape(mapObject(\r\n getEmailTagViewStyle(),\r\n constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n action: PropTypes.string,\r\n currencyCode: PropTypes.string,\r\n goalValue: PropTypes.string,\r\n goalValueType: PropTypes.oneOf(['FixedValue', 'VariantValue', 'NoValue']),\r\n isEventGoal: PropTypes.bool,\r\n};\r\n\r\nEmailTagViewUnstyled.defaultProps = {\r\n action: undefined,\r\n currencyCode: undefined,\r\n goalValue: undefined,\r\n goalValueType: undefined,\r\n isEventGoal: false,\r\n onSendEmail: noop,\r\n};\r\n\r\nexport const EmailTagView = withDefaultStyles(\r\n withConversionTagData(EmailTagViewUnstyled),\r\n getEmailTagViewStyle\r\n);\r\n","import { mapObject, constant } from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport React, { useContext, useMemo } from 'react';\r\n\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\n\r\nimport {\r\n Dialog,\r\n DialogType,\r\n} from '@fluentui/react';\r\n\r\nimport { EmailTagView } from './email-tag-view';\r\nimport { getEmailTagDialogStyle } from '../styles/email-tag-dialog-styles';\r\n\r\nconst EmailTagDialogUnstyled = (props) => {\r\n const {\r\n isHidden,\r\n onCloseEmailTagDialog,\r\n classes,\r\n } = props;\r\n const i18n = useContext(I18nContext);\r\n\r\n const dialogContentProps = useMemo(() => ({\r\n type: DialogType.normal,\r\n title: i18n.getString(_TL_('Send your tracking tag to someone else')),\r\n showCloseButton: true,\r\n subText: '',\r\n }), [i18n]);\r\n\r\n const modalProps = useMemo(() => ({\r\n className: classNames(classes.container, 'email-tag-dialog'),\r\n isBlocking: true,\r\n styles: {\r\n main: {\r\n minWidth: '755px !important',\r\n minHeight: '317px !important',\r\n },\r\n },\r\n }), [classes.container]);\r\n\r\n return (\r\n \r\n {i18n.getString(_TL_('Enter the email address for the person who will add the tracking tag to your website\\'s code. For more than one email address, enter one address per line. We\\'ll send instructions and the tracking tag to them, and you.'))}\r\n
\r\n {i18n.getString(_TL_('Learn more'))}
\r\n ) : (\r\n\r\n
\r\n )}\r\n\r\n \r\n {i18n.getString(_TL_('If you use a website platform, follow the instructions for that platform:'))}\r\n
\r\n - \r\n {_.map(platforms, (platformText, platformKey) => (\r\n
- \r\n
\r\n \r\n \r\n )}\r\n
\r\n );\r\n}\r\n\r\nCopyEventTagViewUnstyled.propTypes = {\r\n action: PropTypes.string,\r\n classes: PropTypes.shape({ copyEventTagView: PropTypes.string }).isRequired,\r\n currencyCode: PropTypes.string,\r\n goalValue: PropTypes.string,\r\n goalValueType: PropTypes.oneOf(['FixedValue', 'VariantValue', 'NoValue']).isRequired,\r\n onCopyToClipboardComplete: PropTypes.func,\r\n onViewEmailInstructionsClick: PropTypes.func.isRequired,\r\n};\r\n\r\nCopyEventTagViewUnstyled.defaultProps = {\r\n action: undefined,\r\n currencyCode: undefined,\r\n goalValue: undefined,\r\n onCopyToClipboardComplete: _.noop,\r\n};\r\n\r\nexport const CopyEventTagView = withDefaultStyles(CopyEventTagViewUnstyled, getCopyEventTagViewStyles);\r\n","export const getCopyEventTagViewStyles = () => ({\r\n copyEventTagView: {\r\n marginLeft: '26px',\r\n marginBottom: '12px',\r\n\r\n '& .event-tracking-dropdown': {\r\n marginBottom: 30,\r\n width: 250,\r\n },\r\n\r\n '& .event-tag-code': {\r\n background: '#fff4ce',\r\n border: 0,\r\n },\r\n\r\n '& .code-snippet': {\r\n minWidth: '560px',\r\n width: '720px',\r\n padding: '10px 12px',\r\n fontSize: '16px',\r\n lineHeight: '24px',\r\n },\r\n\r\n '& .event-tag-example': {\r\n marginLeft: 0,\r\n marginTop: '20px',\r\n\r\n '& .example-message': {\r\n marginLeft: '25px',\r\n },\r\n },\r\n },\r\n});\r\n","/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport React, { useContext, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { ReactTemplate } from '@bingads-webui-react/react-template';\r\nimport { LearnMoreLink } from '@bingads-webui-campaign-react/help';\r\nimport { Image, Link } from '@fluentui/react';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { withConversionTagData, useInitConversionTagData } from '@bingads-webui-campaign-react/conversion-data';\r\n\r\nimport { getDoneViewStyles } from '../styles/done-view-styles';\r\nimport extensionIconImage from '../../media/extPic.png';\r\nimport { chromeExtURL, edgeExtURL } from '../utils/uet-tag-helper-install-urls';\r\n\r\nfunction DoneViewUnstyled(props) {\r\n const {\r\n classes,\r\n tagContext,\r\n } = props;\r\n\r\n const i18n = useContext(I18nContext);\r\n useInitConversionTagData(tagContext);\r\n\r\n const { data: tag } = tagContext;\r\n const isTestGoalSupported = useMemo(() => {\r\n const tagType = tag && tag.type;\r\n return tagType === 'UET';\r\n }, [tag]);\r\n\r\n return (\r\n \r\n
{i18n.getString(_TL_('Event Tag'))}
\r\n\r\n{i18n.getString(_TL_('When do you want to track this event?'))}
\r\n{i18n.getString(_TL_('We will give you instructions for setting up the event tag based on what you select.'))}
\r\n{i18n.getString(_TL_('Instructions:'))}
\r\n\r\n\r\n {i18n.getString(eventTrackingMethod === 'PageLoad' ?\r\n _TL_('On each page where this event happens (for example, your order confirmation page or purchase completion page), copy this tag and paste it in between the
and tags right after the base tag.') :\r\n _TL_('Copy the snippet below and paste it in between the tags of the page(s) you\\'d like to track, right after the base UET tag. Then, call {{functionName}} when someone clicks on the chosen link or button.'), { functionName })}\r\n \r\n\r\n\r\n
\r\n
\r\n {isTestGoalSupported && (\r\n
\r\n );\r\n}\r\n\r\nDoneViewUnstyled.propTypes = {\r\n classes: PropTypes.shape({ doneView: PropTypes.string }).isRequired,\r\n tagContext: PropTypes.shape({\r\n data: PropTypes.shape({ type: PropTypes.string }),\r\n }).isRequired,\r\n};\r\n\r\nexport const DoneView = withDefaultStyles(withConversionTagData(DoneViewUnstyled), getDoneViewStyles);\r\n","export const getDoneViewStyles = () => ({\r\n doneView: {\r\n marginLeft: '26px',\r\n marginBottom: '12px',\r\n\r\n '& .browser-extension-icon': {\r\n marginTop: '20px',\r\n marginBottom: '20px',\r\n },\r\n },\r\n});\r\n","export const MENU_GOAL_CATEGORY_SECTION = {\r\n SALES: 'SALES',\r\n LEADS: 'Leads',\r\n OTHER: 'OTHER',\r\n};\r\n\r\nexport const ActionOperatorEnum = [\r\n 'NoExpression',\r\n 'EqualsTo',\r\n 'BeginsWith',\r\n 'RegularExpression',\r\n 'Contains',\r\n];\r\n\r\nexport const ValueOperatorEnum =\r\n[\r\n 'NoValue',\r\n 'EqualTo',\r\n 'LessThan',\r\n 'GreaterThan',\r\n];\r\n\r\nexport const LabelOperatorEnum = [\r\n 'NoExpression',\r\n 'EqualsTo',\r\n 'BeginsWith',\r\n 'RegularExpression',\r\n 'Contains',\r\n];\r\n\r\nexport const CategoryOperatorEnum = [\r\n 'NoExpression',\r\n 'EqualsTo',\r\n 'BeginsWith',\r\n 'RegularExpression',\r\n 'Contains',\r\n];\r\n\r\nexport const GoalValueTypeEnum = [\r\n 'FixedValue',\r\n 'VariantValue',\r\n 'NoValue',\r\n];\r\n\r\nexport const AttributionModelTypeEnum = [\r\n 'Default',\r\n 'External',\r\n 'LastTouch',\r\n];\r\n\r\nexport const ConversionCountTypeEnum = [\r\n 'All',\r\n 'Unique',\r\n];\r\n\r\nexport const GoalTypeEnum = [\r\n 'DestinationGoal',\r\n 'EventGoal',\r\n];\r\n\r\nexport const GoalStatusEnum = [\r\n 'Active',\r\n 'Paused',\r\n];\r\n\r\nexport const GOAL_CATEGORY = {\r\n PURCHASE: 'Purchase',\r\n ADD_TO_CART: 'AddToCart',\r\n BEGIN_CHECKOUT: 'BeginCheckout',\r\n SUBSCRIBE: 'Subcribe',\r\n SUBMIT_LEAD_FORM: 'SubmitLeadForm',\r\n BOOK_APPOINTMENT: 'BookAppointment',\r\n SIGNUP: 'Signup',\r\n REQUEST_QUOTE: 'RequestQuote',\r\n GET_DIRECTIONS: 'GetDirections',\r\n OUTBOUND_CLICK: 'OutboundClick',\r\n CONTACT: 'Contact',\r\n PAGE_VIEW: 'PageView',\r\n OTHER: 'Other',\r\n DOWNLOAD: 'Download',\r\n IN_STORE_VISIT: 'InStoreVisit',\r\n};\r\n\r\nexport const MenuCategoryMapping = {\r\n [MENU_GOAL_CATEGORY_SECTION.SALES]: [\r\n GOAL_CATEGORY.PURCHASE,\r\n GOAL_CATEGORY.ADD_TO_CART,\r\n GOAL_CATEGORY.BEGIN_CHECKOUT,\r\n GOAL_CATEGORY.SUBSCRIBE,\r\n ],\r\n [MENU_GOAL_CATEGORY_SECTION.LEADS]: [\r\n GOAL_CATEGORY.SUBMIT_LEAD_FORM,\r\n GOAL_CATEGORY.BOOK_APPOINTMENT,\r\n GOAL_CATEGORY.SIGNUP,\r\n GOAL_CATEGORY.REQUEST_QUOTE,\r\n GOAL_CATEGORY.GET_DIRECTIONS,\r\n GOAL_CATEGORY.OUTBOUND_CLICK,\r\n ],\r\n [MENU_GOAL_CATEGORY_SECTION.OTHER]: [\r\n GOAL_CATEGORY.CONTACT,\r\n GOAL_CATEGORY.PAGE_VIEW,\r\n GOAL_CATEGORY.DOWNLOAD,\r\n GOAL_CATEGORY.IN_STORE_VISIT,\r\n GOAL_CATEGORY.OTHER,\r\n ],\r\n};\r\n\r\nexport const GoalCategoriesConfig = {\r\n [GOAL_CATEGORY.PURCHASE]: {\r\n title: _TL_('Purchase'),\r\n description: _TL_('The completion of an order, usually signified by receiving an order/purchase confirmation.'),\r\n defaultAction: 'purchase',\r\n helpId: 'pop_BA_UET_AutoConversions_Purchase',\r\n },\r\n [GOAL_CATEGORY.ADD_TO_CART]: {\r\n title: _TL_('Add to cart'),\r\n description: _TL_('The addition of an item to the shopping cart (such as selecting the Add to cart button on the website).'),\r\n defaultAction: 'add_to_cart',\r\n helpId: 'pop_BA_UET_AutoConversions_AddToCart ',\r\n },\r\n [GOAL_CATEGORY.BEGIN_CHECKOUT]: {\r\n title: _TL_('Begin checkout'),\r\n description: _TL_('The start of the checkout process.'),\r\n defaultAction: 'begin_checkout',\r\n helpId: 'pop_BA_UET_AutoConversions_BeginCheckout',\r\n },\r\n [GOAL_CATEGORY.SUBSCRIBE]: {\r\n title: _TL_('Subscribe'),\r\n description: _TL_('The start of a paid subscription to a product or service you offer.'),\r\n defaultAction: 'subscribe',\r\n helpId: 'pop_BA_UET_AutoConversions_Subscribe',\r\n },\r\n [GOAL_CATEGORY.SUBMIT_LEAD_FORM]: {\r\n title: _TL_('Submit lead form'),\r\n description: _TL_('The submission of information by a potential customer for a product or service you offer'),\r\n defaultAction: 'submit_form',\r\n helpId: 'pop_BA_UET_AutoConversions_SubmitLeadForm',\r\n },\r\n [GOAL_CATEGORY.BOOK_APPOINTMENT]: {\r\n title: _TL_('Book appointment'),\r\n description: _TL_('The booking of an appointment with your business'),\r\n defaultAction: 'book_appointment',\r\n helpId: 'pop_BA_UET_AutoConversions_BookAppointment',\r\n },\r\n [GOAL_CATEGORY.SIGNUP]: {\r\n title: _TL_('Sign-up'),\r\n description: _TL_('The completion of a form to sign up for a service you offer (such as a newsletter)'),\r\n defaultAction: 'sign_up',\r\n helpId: 'pop_BA_UET_AutoConversions_SignUp',\r\n },\r\n [GOAL_CATEGORY.REQUEST_QUOTE]: {\r\n title: _TL_('Request quote'),\r\n description: _TL_('The request from a customer to get more details of the product or service you offer, along with pricing information'),\r\n defaultAction: 'request_quote',\r\n helpId: 'pop_BA_UET_AutoConversions_RequestQuote',\r\n },\r\n [GOAL_CATEGORY.GET_DIRECTIONS]: {\r\n title: _TL_('Get direction'),\r\n description: _TL_('When a person wants to find one of your locations with the intention of visiting'),\r\n defaultAction: 'look_at_directions',\r\n helpId: 'pop_BA_UET_AutoConversions_GetDirections',\r\n },\r\n [GOAL_CATEGORY.OUTBOUND_CLICK]: {\r\n title: _TL_('Outbound click'),\r\n description: _TL_('When a customer is redirected to an external website'),\r\n defaultAction: 'outbound_click',\r\n helpId: 'pop_BA_UET_AutoConversions_OutboundClick',\r\n },\r\n [GOAL_CATEGORY.CONTACT]: {\r\n title: _TL_('Contact'),\r\n description: _TL_('When a customer contacts your business via telephone/SMS, email, chat, or any other type of contact'),\r\n defaultAction: 'contact_us',\r\n helpId: 'pop_BA_UET_AutoConversions_Contact',\r\n },\r\n [GOAL_CATEGORY.PAGE_VIEW]: {\r\n title: _TL_('Page view'),\r\n description: _TL_('A visit to a webpage that you have identified as being important to your business, such as a product page or search result'),\r\n defaultAction: 'page_view',\r\n },\r\n [GOAL_CATEGORY.OTHER]: {\r\n title: _TL_('Other'),\r\n description: _TL_('Use this if the other categories don\\'t match the actions you are tracking as a conversion'),\r\n defaultAction: 'other',\r\n },\r\n [GOAL_CATEGORY.DOWNLOAD]: {\r\n title: _TL_('Download'),\r\n description: _TL_('Use this if the other categories don\\'t match the actions you are tracking as a conversion'),\r\n defaultAction: 'download',\r\n },\r\n [GOAL_CATEGORY.IN_STORE_VISIT]: {\r\n title: _TL_('Store visit'),\r\n },\r\n};\r\n\r\nexport const GoalMenuI18nKey2value = {\r\n /* submenu options */\r\n [MENU_GOAL_CATEGORY_SECTION.SALES]: _TL_('Sales'),\r\n [MENU_GOAL_CATEGORY_SECTION.LEADS]: _TL_('Leads'),\r\n [MENU_GOAL_CATEGORY_SECTION.OTHER]: _TL_('Other'),\r\n};\r\n","import { MenuCategoryMapping } from './constants';\r\n\r\nexport const getMenuByGoalCategory = (searchChild) => {\r\n const category = Object.keys(MenuCategoryMapping).find(key =>\r\n MenuCategoryMapping[key].includes(searchChild));\r\n return category;\r\n};\r\n","export const goalHelpIdMapping = {\r\n GoalCategory: 'pop_BA_ConversionGoal_GoalCategory',\r\n Type: 'pop_BA_UET_Type',\r\n Revenue: 'pop_BA_UET_RevenueValue',\r\n IsAccountLevel: 'pop_BA_UET_Scope',\r\n ConversionCountType: 'pop_BA_UET_Count',\r\n IsMainConversionGoal: 'pop_BA_ConversionGoal_CountAsConv',\r\n LookbackWindowInMinutes: 'pop_BA_UET_ConversionWindow',\r\n ViewThroughLookbackWindowinMinutes: 'pop_BA_UET_VTCWindow',\r\n Status: 'pop_BA_UET_Status',\r\n AttributionModelType: 'pop_BA_CampaignGrids_AttributionModelType',\r\n Tag: 'pop_BA_UET_UETTag',\r\n OptimizeCampaign: 'pop_BA_UET_AutoConversions_OptimizingCampaigns',\r\n EnhancedConversions: 'pop_BA_UET_AutoConversions_EnhancedConversions',\r\n};\r\n","const activities = [\r\n {\r\n name: 'selectGoalObjective',\r\n value: 'selectGoalObjective',\r\n },\r\n {\r\n name: 'selectGoalType',\r\n value: 'selectGoalType',\r\n },\r\n {\r\n name: 'editGoalDetails',\r\n value: 'editGoalDetails',\r\n },\r\n {\r\n name: 'editGoalDetails.normalGoal',\r\n value: 'editGoalDetails.normalGoal',\r\n },\r\n {\r\n name: 'editGoalDetails.smartGoal',\r\n value: 'editGoalDetails.smartGoal',\r\n },\r\n {\r\n name: 'setupTag',\r\n value: 'setupTag',\r\n },\r\n {\r\n name: 'setupTag.selectTag',\r\n value: 'setupTag.selectTag',\r\n },\r\n {\r\n name: 'setupTag.noTag',\r\n value: 'setupTag.noTag',\r\n },\r\n {\r\n name: 'setupTag.noTag.selectTagMethod',\r\n value: 'setupTag.noTag.selectTagMethod',\r\n },\r\n {\r\n name: 'setupTag.noTag.installTag',\r\n value: 'setupTag.noTag.installTag',\r\n },\r\n {\r\n name: 'setupTag.noTag.emailTag',\r\n value: 'setupTag.noTag.emailTag',\r\n },\r\n {\r\n name: 'setupTag.noTag.platformTag',\r\n value: 'setupTag.noTag.platformTag',\r\n },\r\n {\r\n name: 'setupTag.noTag.platformTagInstructions',\r\n value: 'setupTag.noTag.platformTagInstructions',\r\n },\r\n {\r\n name: 'setupTag.noTag.gtmTag',\r\n value: 'setupTag.noTag.gtmTag',\r\n },\r\n {\r\n name: 'setupTag.addEventTag',\r\n value: 'setupTag.addEventTag',\r\n },\r\n {\r\n name: 'setupTag.eventTagChoice',\r\n value: 'setupTag.eventTagChoice',\r\n },\r\n {\r\n name: 'setupTag.addEventTagWithClarity',\r\n value: 'setupTag.addEventTagWithClarity',\r\n },\r\n {\r\n name: 'endFlow',\r\n value: 'endFlow',\r\n },\r\n {\r\n name: 'createWizard',\r\n value: 'createWizard',\r\n },\r\n {\r\n name: 'editGoalDetails.enhancedConversions',\r\n value: 'editGoalDetails.enhancedConversions',\r\n },\r\n {\r\n name: 'setupTag.setupEnhancedConv',\r\n value: 'setupTag.setupEnhancedConv',\r\n },\r\n];\r\n\r\nexport const instrumentationSchema = {\r\n scenario: [\r\n // All activities must be under this scenario so that we can later use SceId to string together a session.\r\n {\r\n name: 'goalCreationWizard',\r\n value: 'goalCreationWizard',\r\n activity: activities,\r\n },\r\n ],\r\n};\r\n","/* eslint-disable quotes */\r\nexport const mockedTags = {\r\n '@odata.context': 'http://c1-si-odataapi.trafficmanager.net:8080/Advertiser/v2/$metadata#Tags',\r\n '@odata.count': 12,\r\n value: [\r\n {\r\n Id: 6302851,\r\n Name: 'xytestTag1',\r\n TrackingCode: '',\r\n IsPreferredTag: false,\r\n Owner: {\r\n Id: 257194955, Name: \"xytest\", Number: \"F10400ZC4Z\", Account: null,\r\n },\r\n },\r\n {\r\n Id: 1103231,\r\n Name: 'preferredTag',\r\n TrackingCode: '',\r\n IsPreferredTag: true,\r\n Owner: {\r\n Id: 257194955, Name: \"xytest\", Number: \"F10400ZC4Z\", Account: null,\r\n },\r\n },\r\n {\r\n Id: 104000491,\r\n Name: 'xytesttag111122',\r\n TrackingCode: '',\r\n IsPreferredTag: false,\r\n Owner: {\r\n Id: 257194955, Name: \"xytest\", Number: \"F10400ZC4Z\", Account: null,\r\n },\r\n },\r\n ],\r\n};\r\n","import _ from 'underscore';\r\nimport { edmCampaign } from '@bingads-webui/edm-campaign';\r\nimport { odata } from '@bingads-webui/http-util';\r\nimport { getMessageFromErrors } from '@bingads-webui-campaign-react/conversion-wizard-components';\r\nimport { mockedTags } from './mock-data';\r\n\r\nconst campaignEDM = edmCampaign.types.resolve('Model.Campaign');\r\nconst campaignResource = new campaignEDM.ResourceIdentifier();\r\nconst bulkUpdateCampaigns = campaignResource.bulkUpdate.bind(campaignResource);\r\n\r\nconst emailInfo = {\r\n UET: {\r\n EmailNotificationId: 388,\r\n EmailTemplateName: 'UetTagInstructionsEmail',\r\n },\r\n Event: {\r\n EmailNotificationId: 389,\r\n EmailTemplateName: 'UetTagAndEventTagInstructionsEmail',\r\n },\r\n UetTagInstructionsEmailV2: {\r\n EmailNotificationId: 589,\r\n EmailTemplateName: 'UetTagInstructionsEmailV2',\r\n },\r\n UetTagAndEventTagInstructionsEmailV2: {\r\n EmailNotificationId: 590,\r\n EmailTemplateName: 'UetTagAndEventTagInstructionsEmailV2',\r\n },\r\n};\r\n\r\nexport const getDefaultActionForGoalCategory = (goalCategory) => {\r\n if (_.isEmpty(goalCategory)) {\r\n return '';\r\n }\r\n // MT has a typo. Fix it before using it to generate event name.\r\n const fixedGoalCategory = goalCategory === 'Subcribe' ? 'Subscribe' : goalCategory;\r\n\r\n const lowerCaseCategory = fixedGoalCategory.toLowerCase();\r\n const outputWords = [];\r\n let startIdx = 0;\r\n Array.from(fixedGoalCategory).forEach((char, idx) => {\r\n if (char !== lowerCaseCategory[idx]) {\r\n outputWords.push(lowerCaseCategory.slice(startIdx, idx));\r\n startIdx = idx;\r\n }\r\n });\r\n outputWords.push(lowerCaseCategory.slice(startIdx, lowerCaseCategory.length));\r\n return _.reject(outputWords, word => _.isEmpty(word)).join('_');\r\n};\r\n\r\nexport const updateGoalObjectForClaritySetup = (existingGoal) => {\r\n const goal = { ...existingGoal };\r\n let isUpdateRequired = false;\r\n\r\n const nulledParameters = ['Category', 'Value'];\r\n nulledParameters.forEach((parameter) => {\r\n if (goal[parameter]) {\r\n goal[parameter] = null;\r\n isUpdateRequired = true;\r\n }\r\n });\r\n\r\n // If existing action, allow user to keep using it.\r\n if (!goal.Action || (goal.ActionOperator && goal.ActionOperator === 'RegularExpression')) {\r\n goal.Action = getDefaultActionForGoalCategory(goal.GoalCategory);\r\n goal.ActionOperator = 'EqualsTo';\r\n isUpdateRequired = true;\r\n }\r\n\r\n return { goal, isUpdateRequired };\r\n};\r\n\r\nexport const postEmail = (cid, aid, token, emailType, emailAddresses, emailContent) => {\r\n const { EmailNotificationId, EmailTemplateName } = emailInfo[emailType];\r\n\r\n const data = {\r\n EmailContent: Object.entries(emailContent).map(([k, v]) => ({ Key: k, Value: v })),\r\n EmailAddresses: emailAddresses,\r\n EmailTemplateName,\r\n EmailNotificationId,\r\n ToAdvertiser: true,\r\n };\r\n const url = aid ? `${window.location.origin}/ODataApi/Advertiser/V2/Customers(${cid})/Accounts(${aid})/SendEmail` :\r\n `${window.location.origin}/ODataApi/Advertiser/V2/Customers(${cid})/Accounts/SendEmail`;\r\n try {\r\n return odata.post({\r\n url,\r\n data,\r\n headers: {\r\n Authorization: `CCMTSmallToken ${token}`,\r\n },\r\n }).then((res) => {\r\n if (res && res.value) {\r\n return res;\r\n }\r\n return Promise.reject(res);\r\n });\r\n } catch (e) {\r\n return Promise.reject(e);\r\n }\r\n};\r\n\r\nexport const postClarityEventInfo = (cid, aid, goalId, token, clarityEventInfo) => {\r\n const data = {\r\n ClarityEventInfo: clarityEventInfo,\r\n };\r\n const url = `${window.location.origin}/ODataApi/Advertiser/V2/Customers(${cid})/Accounts(${aid})/Goals(${goalId})/Default.SetClarityEventInfo()`;\r\n try {\r\n return odata.post({\r\n url,\r\n data,\r\n headers: {\r\n Authorization: `CCMTSmallToken ${token}`,\r\n },\r\n }).then((res) => {\r\n if (res && res.value) {\r\n return res;\r\n }\r\n return Promise.reject(res);\r\n });\r\n } catch (e) {\r\n return Promise.reject(e);\r\n }\r\n};\r\n\r\nexport const getClarityEventInfo = (cid, aid, goalId, token) => {\r\n const url = `${window.location.origin}/ODataApi/Advertiser/V2/Customers(${cid})/Accounts(${aid})/Goals(${goalId})/Default.GetClarityEventInfo()`;\r\n return odata.get({\r\n url,\r\n headers: {\r\n Authorization: `CCMTSmallToken ${token}`,\r\n },\r\n });\r\n};\r\n\r\nconst makeid = () => {\r\n const idlength = 6;\r\n const result = [];\r\n const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';\r\n const charactersLength = characters.length;\r\n for (let i = 0; i < idlength; i += 1) {\r\n result.push(characters.charAt(Math.floor(Math.random() *\r\ncharactersLength)));\r\n }\r\n return result.join('');\r\n};\r\n\r\nconst postTagPromise = (cid, aid, isForMock = false) => edmCampaign\r\n .Customers.$withKey(cid)\r\n .Accounts.$withKey(aid)\r\n .Tags\r\n .post({\r\n Description: 'AutoCreated default tag',\r\n Name: `DefaultTag${isForMock ? makeid() : ''}`,\r\n }).toPromise().then((response) => {\r\n if (response && response.Id) {\r\n return [{ ...response, isAutoCreated: true }];\r\n }\r\n throw new Error('Could not create tag');\r\n });\r\n\r\nconst updateTag = (cid, aid, tagId, payload) => {\r\n const edmCustomer = edmCampaign.Customers.$withKey(cid);\r\n const edmHolder = aid ? edmCustomer.Accounts.$withKey(aid) : edmCustomer;\r\n return edmHolder.Tags.update(tagId, payload)\r\n .then((response) => {\r\n if (response.Id) {\r\n return response;\r\n }\r\n throw response;\r\n });\r\n};\r\n\r\nexport const enableClarityForTag = (scope, serverContext, tag) => {\r\n const { cid, aid } = (scope && scope.values) || {};\r\n let customerId = cid;\r\n if (_.isFinite(aid)) {\r\n // customer level Tag belongs to scope cid; account level tag should use advcid\r\n const { CurrentAccount: currentAccount } = serverContext;\r\n customerId = currentAccount.AdvertiserCustomerID;\r\n if (!customerId) {\r\n throw new Error('customer Id is undefined');\r\n }\r\n }\r\n\r\n return updateTag(customerId, aid, tag.Id, { Name: tag.Name, IsClarityTagEnabled: 1 });\r\n};\r\n\r\nexport const getTags = (cid, aid) => {\r\n if (cid && aid) {\r\n return edmCampaign\r\n .Customers.$withKey(cid)\r\n .Accounts.$withKey(aid)\r\n .Tags\r\n .get({\r\n top: 2000,\r\n select: ['Id', 'Name', 'Owner', 'TrackingCode', 'IsPreferredTag', 'IsClarityTagEnabled'],\r\n }).toPromise().then((tagResponse) => {\r\n if (tagResponse && tagResponse.value) {\r\n if (tagResponse.value.length > 0) {\r\n return tagResponse.value;\r\n }\r\n return postTagPromise(cid, aid);\r\n }\r\n\r\n throw new Error(`Could not fetch tags:${JSON.stringify(tagResponse)}`);\r\n });\r\n }\r\n return new Promise((resolve) => {\r\n resolve(mockedTags.value);\r\n });\r\n};\r\n\r\nexport const getExternalIntegrations = (cid, aid, tagId) => {\r\n if (cid && aid) {\r\n return edmCampaign\r\n .Customers.$withKey(cid)\r\n .Accounts.$withKey(aid)\r\n .Tags.$withKey(tagId)['Default.GetExternalIntegrations']\r\n .$makeCall({})\r\n .toPromise().then(response => ({ ...response, hasExternalIntegrations: response.NumberOfEntities > 0 }));\r\n }\r\n return new Promise((resolve) => {\r\n resolve(mockedTags.value);\r\n });\r\n};\r\n\r\nexport const getPreferredTag = tags => _.find(tags, item => item.IsPreferredTag) || _.find(tags, item => item.isAutoCreated);\r\n\r\nexport const findTagById = (tags, tagId) => _.find(tags, item => item.Id === tagId);\r\n\r\nexport const getGoal = (goalId, cid, aid) =>\r\n goalId && edmCampaign\r\n .Customers.$withKey(cid)\r\n .Accounts.$withKey(aid)\r\n .Goals.$withKey(goalId)\r\n .get({\r\n select: ['Tag', 'ServingExternalChannelInfos'],\r\n });\r\n\r\nconst createGoal = (payload, cid, aid) =>\r\n edmCampaign\r\n .Customers.$withKey(cid)\r\n .Accounts.$withKey(aid)\r\n .Goals.post(payload);\r\n\r\nconst updateGoal = (goalId, payload, cid, aid) =>\r\n edmCampaign\r\n .Customers.$withKey(cid)\r\n .Accounts.$withKey(aid)\r\n .Goals.update(goalId, payload);\r\n\r\nexport const saveLinkedInAssociations = (goalObj, wizardContext) => {\r\n const {\r\n permissions,\r\n associatedCampaigns: {\r\n current: currentAssociatedCampaigns,\r\n initial: initialAssociatedCampaigns,\r\n },\r\n } = wizardContext;\r\n\r\n const formatAssociation = (campaignId, goal, action) => ({\r\n Id: campaignId,\r\n CampaignConversionGoalAssociations: [{\r\n CampaignId: campaignId,\r\n Action: action,\r\n GoalId: Number(goal.Id),\r\n Name: goal.Name,\r\n SubType: 'Goal',\r\n }],\r\n });\r\n\r\n const currentIds = _.pluck(currentAssociatedCampaigns, 'Id');\r\n const initialIds = _.pluck(initialAssociatedCampaigns, 'Id');\r\n\r\n const idsToAdd = _.difference(currentIds, initialIds);\r\n const idsToRemove = _.difference(initialIds, currentIds);\r\n\r\n const dataToSave = [\r\n ...idsToAdd.map(campaignId => formatAssociation(campaignId, goalObj, 'Add')),\r\n ...idsToRemove.map(campaignId => formatAssociation(campaignId, goalObj, 'Delete')),\r\n ];\r\n\r\n const isLinkedInEnabled = _.get(permissions, ['dynamic', 'LinkedInCampaigns'], false);\r\n\r\n if (!isLinkedInEnabled || _.isEmpty(dataToSave)) {\r\n return Promise.resolve();\r\n }\r\n\r\n return bulkUpdateCampaigns(dataToSave);\r\n};\r\n\r\nexport const processPayload = (goalObject, permissions, deleteClarityEvent) => {\r\n const rawPayload = { ...goalObject };\r\n if (!_.isEmpty(goalObject.Tag)) {\r\n rawPayload.Tag = {\r\n Id: goalObject.Tag.Id,\r\n };\r\n }\r\n\r\n // delete invalid properties\r\n if (!_.isUndefined(rawPayload.Id)) {\r\n const invalidProps = ['CampaignAnalyticsGoalName', 'FlexTagScript', 'GoalPerformanceMetrics', 'TrackingStatus', '@odata.context'];\r\n _.each(invalidProps, (prop) => {\r\n delete rawPayload[prop];\r\n });\r\n }\r\n // convert legacy null duration to 0\r\n if (rawPayload.Duration === null) {\r\n rawPayload.Duration = 0;\r\n }\r\n // delete tags\r\n delete rawPayload.tags;\r\n const goalType = rawPayload.Type;\r\n // delete empty event params\r\n if (goalType === 'EventGoal') {\r\n const valueArray = ['Category', 'Action', 'Label', 'Value'];\r\n const operatorArray = ['CategoryOperator', 'ActionOperator', 'LabelOperator', 'ValueOperator'];\r\n _.each(valueArray, (value, index) => {\r\n if (_.isNull(rawPayload[value])) {\r\n delete rawPayload[value];\r\n delete rawPayload[operatorArray[index]];\r\n }\r\n });\r\n }\r\n // delete viewthroughconversion for ineligible goal types\r\n const nonVTGoalTypes = ['ApplicationInstallGoal', 'OfflineConversionGoal', 'InStoreTransactionGoal', 'InStoreVisitGoal'];\r\n if (nonVTGoalTypes.indexOf(goalType) > -1 || !permissions.IsViewThroughConversionEnabled || rawPayload.ViewThroughLookbackWindowinMinutes === 0) {\r\n delete rawPayload.ViewThroughLookbackWindowinMinutes;\r\n }\r\n // delete currency null code and value\r\n const goalTypesDisallowedCurrency = [\r\n 'DurationGoal',\r\n 'PageViewsPerVisitGoal',\r\n 'ApplicationInstallGoal',\r\n 'SmartGoal'];\r\n const goalValueType = rawPayload.GoalValueType;\r\n const goalValue = rawPayload.GoalValue;\r\n if (goalValueType === 'NoValue') {\r\n delete rawPayload.CurrencyCode;\r\n delete rawPayload.GoalValue;\r\n } else if (goalValueType === 'FixedValue' && goalTypesDisallowedCurrency.indexOf(goalType) > -1) {\r\n delete rawPayload.CurrencyCode;\r\n } else {\r\n rawPayload.GoalValue = _.isUndefined(goalValue) || _.isNull(goalValue) ? 1 : goalValue;\r\n rawPayload.CurrencyCode = rawPayload.CurrencyCode === null ? 'USD' : rawPayload.CurrencyCode;\r\n }\r\n if (deleteClarityEvent) {\r\n rawPayload.ClarityEventDefinitionId = null;\r\n rawPayload.ClarityEventDefinitionObject = null;\r\n }\r\n // add entity type\r\n rawPayload['@odata.type'] = `#Model.${goalType}`;\r\n return rawPayload;\r\n};\r\n\r\nexport const saveGoal = (payload, wizardContext) => {\r\n const {\r\n aid, cid, logGoalSaved, isDemo,\r\n } = wizardContext;\r\n\r\n if (isDemo) {\r\n return Promise.resolve({ Id: 1, ...payload });\r\n }\r\n\r\n const savePromise = _.isUndefined(payload.Id)\r\n ? createGoal(payload, cid, aid).toPromise()\r\n .then((response) => {\r\n if (_.isFinite(response.value)) {\r\n const goal = { ...payload, Id: response.value };\r\n logGoalSaved(goal);\r\n return goal;\r\n }\r\n throw response;\r\n })\r\n : updateGoal(payload.Id, payload, cid, aid)\r\n .then((response) => {\r\n if (response.value === 0) {\r\n logGoalSaved(payload);\r\n return payload;\r\n }\r\n throw response;\r\n });\r\n\r\n return savePromise.then(goalObj => saveLinkedInAssociations(goalObj, wizardContext).then(() => goalObj));\r\n};\r\n\r\nexport const getErrorMessage = (response, i18n) => {\r\n if (response && response.body) {\r\n const errorMessage = getMessageFromErrors(i18n, response.body.value);\r\n if (errorMessage) {\r\n return errorMessage;\r\n }\r\n }\r\n return i18n.getString(_TL_('We\\'ve encountered an error while saving this goal. Please try again or contact support for assistance.'));\r\n};\r\n\r\nexport const readPmaxCampaigns = (cid, aid) =>\r\n edmCampaign\r\n .Customers.$withKey(cid)\r\n .Accounts.$withKey(aid)\r\n .Campaigns\r\n .get({\r\n filter: {\r\n where: 'CampaignType eq \\'PerformanceMax\\'',\r\n },\r\n })\r\n .toPromise();\r\n\r\nexport const readLinkedInCampaigns = (cid, aid) =>\r\n edmCampaign\r\n .Customers.$withKey(cid)\r\n .Accounts.$withKey(aid)\r\n .Campaigns\r\n .get({\r\n select: ['Id', 'Name', 'DeliveryStatus'],\r\n filter: {\r\n where: 'CampaignType eq \\'LinkedIn\\'',\r\n },\r\n })\r\n .toPromise();\r\n\r\nexport const getAssociatedCampaignIds = goalObj =>\r\n _.chain(goalObj)\r\n .get(['ServingExternalChannelInfos', 'LinkedIn', 'CampaignConversionGoals'], [])\r\n .pluck('CampaignId')\r\n .value();\r\n\r\n\r\nexport const readAssociatedCampaigns = (cid, aid, goalObj) => {\r\n const cmpIds = getAssociatedCampaignIds(goalObj);\r\n\r\n const formattedCampaignIds = cmpIds.join(', ');\r\n\r\n return edmCampaign\r\n .Customers.$withKey(cid)\r\n .Accounts.$withKey(aid)\r\n .Campaigns\r\n .get({\r\n select: ['Id', 'Name', 'DeliveryStatus'],\r\n filter: { where: `Id in [${formattedCampaignIds}]` },\r\n })\r\n .toPromise();\r\n};\r\n\r\n","import _ from 'underscore';\r\n\r\nexport const input2Duration = timeObj => ((parseInt(timeObj.day, 10) * 24 * 60) + (parseInt(timeObj.hour, 10) * 60) + parseInt(timeObj.min, 10));\r\n\r\nexport const duration2Input = (timeInMin) => {\r\n const timeObj = {};\r\n timeObj.min = timeInMin % 60;\r\n const remainingHours = parseInt(timeInMin / 60, 10);\r\n timeObj.hour = remainingHours % 24;\r\n timeObj.day = parseInt(remainingHours / 24, 10);\r\n\r\n return timeObj;\r\n};\r\n\r\nexport const markTime = () => ({\r\n time: performance.now(),\r\n activeTime: _.result(performance, 'activeTime', NaN),\r\n});\r\n\r\nexport const startActivity = (activity) => {\r\n const { time, activeTime } = markTime();\r\n // eslint-disable-next-line no-param-reassign\r\n activity.properties = {\r\n startTime: time,\r\n activeStartTime: activeTime,\r\n };\r\n activity.trace(`startTime: ${time}, activeStartTime: ${activeTime}`);\r\n};\r\n\r\nexport const endActivity = (activity) => {\r\n const { time, activeTime } = markTime();\r\n const { activeStartTime, startTime } = activity.properties || {};\r\n const activeDuration = activeStartTime ? activeTime - activeStartTime : 0;\r\n const duration = startTime ? time - startTime : 0;\r\n activity.trace(`endTime: ${time}, activeEndTime: ${activeTime}, activeDuration: ${activeDuration}, duration: ${duration}`);\r\n};\r\n","import React from 'react';\r\n\r\nexport const GoalCreationWizardContext = React.createContext();\r\n","/**\r\n * Step hierarchy and the associated ids.\r\n */\r\nexport const STEP_PATHS = {\r\n goalObjective: { id: 'selectGoalObjective' },\r\n goalType: { id: 'selectGoalType' },\r\n goalDetails: {\r\n id: 'editGoalDetails',\r\n normalGoal: { id: 'editGoalDetails.normalGoal' },\r\n enhancedConversions: { id: 'editGoalDetails.enhancedConversions' },\r\n smartGoal: { id: 'editGoalDetails.smartGoal' },\r\n },\r\n tagSetup: {\r\n id: 'setupTag',\r\n selectTag: { id: 'setupTag.selectTag' },\r\n noTag: {\r\n id: 'setupTag.noTag',\r\n selectTagMethod: { id: 'setupTag.noTag.selectTagMethod' },\r\n installTag: { id: 'setupTag.noTag.installTag' },\r\n emailTag: { id: 'setupTag.noTag.emailTag' },\r\n platformTag: { id: 'setupTag.noTag.platformTag' },\r\n gtmTag: { id: 'setupTag.noTag.gtmTag' },\r\n platformTagInstructions: { id: 'setupTag.noTag.platformTagInstructions' },\r\n },\r\n addEventTag: { id: 'setupTag.addEventTag' },\r\n addEventTagWithClarity: { id: 'setupTag.addEventTagWithClarity' },\r\n eventTagChoice: { id: 'setupTag.eventTagChoice' },\r\n setupEnhancedConv: { id: 'setupTag.setupEnhancedConv' },\r\n },\r\n endFlow: {\r\n id: 'endFlow',\r\n },\r\n};\r\n","import _ from 'underscore';\r\nimport { getDefaultActionForGoalCategory } from './conversion-goals-repository';\r\nimport { STEP_PATHS } from './step-paths';\r\n\r\nexport const basicSteps = [\r\n STEP_PATHS.goalObjective,\r\n STEP_PATHS.goalType,\r\n STEP_PATHS.goalDetails.normalGoal,\r\n STEP_PATHS.tagSetup.noTag.selectTagMethod,\r\n STEP_PATHS.endFlow,\r\n];\r\n\r\nfunction goToNextStep(state, currentStep) {\r\n const stepRoot = currentStep.split('.').shift();\r\n const stepIndex = _.findIndex(basicSteps, step => step.id.split('.').shift() === stepRoot);\r\n\r\n return {\r\n ...state,\r\n steps: [...state.steps, currentStep],\r\n currentStep: basicSteps[stepIndex + 1].id,\r\n loggingSteps: [...state.steps, currentStep],\r\n };\r\n}\r\n\r\nfunction goToPreviousStep(state) {\r\n return {\r\n ...state,\r\n steps: state.steps.slice(0, -1),\r\n currentStep: state.steps[state.steps.length - 1],\r\n loggingSteps: [...state.steps, state.currentStep],\r\n };\r\n}\r\n\r\nfunction goToStep(state, currentStep, nextStep) {\r\n return {\r\n ...state,\r\n currentStep: nextStep,\r\n steps: [...state.steps, currentStep],\r\n loggingSteps: [...state.steps, currentStep],\r\n };\r\n}\r\n\r\nexport const WIZARD_ACTIONS = {\r\n WIZARD_NAVIGATE_BACK: 'WIZARD_NAVIGATE_BACK',\r\n WIZARD_NAVIGATE_NEXT: 'WIZARD_NAVIGATE_NEXT',\r\n SELECT_OBJECTIVE: 'SELECT_OBJECTIVE',\r\n SAVE_AND_NAVIGATE_DETAILS: 'SAVE_AND_NAVIGATE_DETAILS',\r\n WIZARD_SAVE_AND_NAVIGATE_TAG_SELECTION: 'WIZARD_SAVE_AND_NAVIGATE_TAG_SELECTION',\r\n NAVIGATE_WITH_TAGINSTALL_OPTIONS: 'NAVIGATE_WITH_TAGINSTALL_OPTIONS',\r\n SELECT_TAG_SETUP_METHOD: 'SELECT_TAG_SETUP_METHOD',\r\n EVENT_TAG_SETUP: 'EVENT_TAG_SETUP',\r\n NAVIGATE_WITH_TAG_INSTALL_INSTRUCTIONS: 'NAVIGATE_WITH_TAG_INSTALL_INSTRUCTIONS',\r\n GO_TO_EMAIL_DEVELOPER_STEP: 'GO_TO_EMAIL_DEVELOPER_STEP',\r\n NAVIGATE_WITH_PLATFORM: 'NAVIGATE_WITH_PLATFORM',\r\n WIZARD_UPDATE_GTM_SESSION_CONTEXT: 'WIZARD_UPDATE_GTM_SESSION_CONTEXT',\r\n UPDATE_ASSOCIATED_CAMPAIGNS_DATA: 'UPDATE_ASSOCIATED_CAMPAIGNS_DATA',\r\n NAVIGATE_TO_LAST_STEP: 'NAVIGATE_TO_LAST_STEP',\r\n NAVIGATE_TO_ENHANCED_CONV: 'NAVIGATE_TO_ENHANCED_CONV',\r\n NAVIGATE_TO_SETUP_ENHANCED_CONV: 'NAVIGATE_TO_SETUP_ENHANCED_CONV',\r\n};\r\n\r\n\r\nconst getDefaultCommonSettings = (state, goalType) => ({\r\n CurrencyCode: 'USD',\r\n GoalValue: state.permissions && state.permissions.dynamic && state.permissions.IsAmplifyEnabled && state.permissions.dynamic.BoostLTV ? 0.011 : 1,\r\n IsAccountLevel: !(goalType === 'InStoreVisitGoal' || goalType === 'InStoreTransactionGoal' || goalType === 'ApplicationInstallGoal'),\r\n ConversionCountType: goalType === 'InStoreVisitGoal' ? 'Unique' : 'All',\r\n IsMainConversionGoal: goalType !== 'InStoreVisitGoal',\r\n LookbackWindowInMinutes: goalType === 'InStoreVisitGoal' ? 1440 : 43200,\r\n ViewThroughLookbackWindowinMinutes: 1440,\r\n});\r\n\r\nconst getDefaultSpecificSettings = (goalType, goalCategory) => {\r\n switch (goalType) {\r\n case 'PageViewsPerVisitGoal':\r\n return {\r\n Operator: 'GreaterThan',\r\n PageViews: 0,\r\n };\r\n case 'DurationGoal':\r\n return {\r\n Operator: 'GreaterThan',\r\n Duration: 0,\r\n };\r\n case 'ApplicationInstallGoal':\r\n return {\r\n ApplicationPlatform: 'Windows Phone',\r\n ApplicationStoreId: '',\r\n };\r\n case 'DestinationGoal':\r\n return {\r\n Operator: null,\r\n UrlString: '',\r\n };\r\n case 'EventGoal':\r\n return {\r\n CategoryOperator: 'EqualsTo',\r\n Category: null,\r\n ActionOperator: 'EqualsTo',\r\n Action: getDefaultActionForGoalCategory(goalCategory),\r\n LabelOperator: 'EqualsTo',\r\n Label: null,\r\n ValueOperator: 'EqualTo',\r\n Value: null,\r\n };\r\n default:\r\n return {};\r\n }\r\n};\r\n\r\nconst allowEventTagSetupWithClarity = (state, goalType) => {\r\n const clarityTagSetupSupportedGoalTypes = ['EventGoal'];\r\n return state.permissions &&\r\n state.permissions.dynamic && state.permissions.dynamic.IsClarityTagSetupAllowed\r\n && clarityTagSetupSupportedGoalTypes.includes(goalType);\r\n};\r\n\r\nexport const goalCreationWizardReducer = (state, action) => {\r\n switch (action.type) {\r\n case WIZARD_ACTIONS.WIZARD_NAVIGATE_NEXT:\r\n return goToNextStep(state, state.currentStep);\r\n case WIZARD_ACTIONS.WIZARD_NAVIGATE_BACK:\r\n return goToPreviousStep(state);\r\n case WIZARD_ACTIONS.SELECT_TAG_SETUP_METHOD:\r\n return goToStep({\r\n ...state,\r\n ...action.data,\r\n }, state.currentStep, STEP_PATHS.tagSetup.noTag[action.data.selectedTagSetupMethod].id);\r\n case WIZARD_ACTIONS.EVENT_TAG_SETUP: {\r\n const goToClarityEventTagSetup = action.eventTagSetupMethod === 'clarity';\r\n return goToStep({\r\n ...state,\r\n goalObject: {\r\n ...state.goalObject,\r\n ...action.data,\r\n },\r\n }, state.currentStep, goToClarityEventTagSetup ?\r\n STEP_PATHS.tagSetup.addEventTagWithClarity.id : STEP_PATHS.tagSetup.addEventTag.id);\r\n }\r\n case WIZARD_ACTIONS.GO_TO_EMAIL_DEVELOPER_STEP:\r\n return goToStep(state, state.currentStep, STEP_PATHS.tagSetup.noTag.emailTag.id);\r\n case WIZARD_ACTIONS.NAVIGATE_WITH_PLATFORM:\r\n return goToStep({\r\n ...state,\r\n ...action.data,\r\n }, state.currentStep, STEP_PATHS.tagSetup.noTag.platformTagInstructions.id);\r\n case WIZARD_ACTIONS.SELECT_OBJECTIVE:\r\n return {\r\n ...state,\r\n selectedObjective: action.value,\r\n };\r\n case WIZARD_ACTIONS.SAVE_AND_NAVIGATE_DETAILS: {\r\n const defaultCommonSettings = getDefaultCommonSettings(state, action.data.Type);\r\n const defaultSpecificSettings = getDefaultSpecificSettings(action.data.Type, action.data.GoalCategory);\r\n const reservedProps = _.isUndefined(state.goalObject) || !state.goalObject.Id ? {\r\n Status: 'Active',\r\n } : {\r\n Id: state.goalObject.Id,\r\n Status: state.goalObject.Status,\r\n Name: state.goalObject.Name,\r\n IsAccountLevel: state.goalObject.IsAccountLevel,\r\n };\r\n const goalTypeChanged = !_.isUndefined(state.goalObject) && state.goalObject.Type !== action.data.Type;\r\n // reset goalObject on goal type change\r\n let updatedStates = _.isUndefined(state.goalObject) || goalTypeChanged\r\n || (!state.isEditScenario && state.goalObject.GoalCategory !== action.data.GoalCategory) ? {\r\n ...state,\r\n goalObject: {\r\n ...action.data,\r\n ...defaultCommonSettings,\r\n ...defaultSpecificSettings,\r\n ...reservedProps,\r\n },\r\n } : {\r\n ...state,\r\n goalObject: {\r\n ...state.goalObject,\r\n ...action.data,\r\n },\r\n };\r\n\r\n if (goalTypeChanged && state.goalObject.ClarityEventDefinitionId) {\r\n updatedStates = {\r\n ...updatedStates,\r\n deleteClarityEvent: true,\r\n };\r\n }\r\n\r\n // Reset LinkedIn settings if the goal type is changed\r\n if (goalTypeChanged) {\r\n updatedStates = {\r\n ...updatedStates,\r\n\r\n goalObject: {\r\n ...updatedStates.goalObject,\r\n SelectedNetwork: undefined,\r\n },\r\n\r\n associatedCampaigns: {\r\n ...state.associatedCampaigns,\r\n current: [],\r\n },\r\n };\r\n }\r\n\r\n return goToNextStep(updatedStates, state.currentStep);\r\n }\r\n case WIZARD_ACTIONS.WIZARD_SAVE_AND_NAVIGATE_TAG_SELECTION: {\r\n const updatedState = {\r\n ...state,\r\n goalObject: {\r\n ...state.goalObject,\r\n ...action.data,\r\n },\r\n };\r\n return goToStep(updatedState, state.currentStep, STEP_PATHS.tagSetup.selectTag.id);\r\n }\r\n case WIZARD_ACTIONS.NAVIGATE_WITH_TAG_INSTALL_INSTRUCTIONS: {\r\n return goToStep({\r\n ...state,\r\n ...action.data,\r\n }, state.currentStep, allowEventTagSetupWithClarity(state, state.goalObject.Type) ?\r\n STEP_PATHS.tagSetup.eventTagChoice.id : STEP_PATHS.tagSetup.addEventTag.id);\r\n }\r\n case WIZARD_ACTIONS.NAVIGATE_WITH_TAGINSTALL_OPTIONS: {\r\n const updatedState = {\r\n ...state,\r\n goalObject: {\r\n ...state.goalObject,\r\n ...action.data, // update selected tag id\r\n },\r\n tagInstallOption: action.tagInstallOption,\r\n isSaveDone: true,\r\n isEditScenario: state.isEditScenario || action.switchToEdit,\r\n goToSetUpEnhancedConversions: action.goToSetUpEnhancedConversions,\r\n };\r\n\r\n const { goToSetUpEnhancedConversions = false } = action;\r\n const showEventTagSetup = updatedState.goalObject.Type === 'EventGoal'\r\n || updatedState.goalObject.Type === 'ProductConversionGoal'\r\n || updatedState.goalObject.GoalValueType === 'VariantValue';\r\n\r\n if (action.tagInstallOption !== 'yes') {\r\n return goToStep(updatedState, state.currentStep, STEP_PATHS.tagSetup.noTag.selectTagMethod.id);\r\n }\r\n\r\n let nextStepIfTagInstalled = null;\r\n if (showEventTagSetup && allowEventTagSetupWithClarity(state, updatedState.goalObject.Type)) {\r\n if (goToSetUpEnhancedConversions) {\r\n nextStepIfTagInstalled = STEP_PATHS.tagSetup.setupEnhancedConv.id;\r\n } else {\r\n nextStepIfTagInstalled = STEP_PATHS.tagSetup.eventTagChoice.id;\r\n }\r\n } else if (showEventTagSetup) {\r\n if (goToSetUpEnhancedConversions) {\r\n nextStepIfTagInstalled = STEP_PATHS.tagSetup.setupEnhancedConv.id;\r\n } else {\r\n nextStepIfTagInstalled = STEP_PATHS.tagSetup.addEventTag.id;\r\n }\r\n } else if (goToSetUpEnhancedConversions) {\r\n nextStepIfTagInstalled = STEP_PATHS.tagSetup.setupEnhancedConv.id;\r\n } else {\r\n nextStepIfTagInstalled = STEP_PATHS.endFlow.id;\r\n }\r\n\r\n return goToStep(updatedState, state.currentStep, nextStepIfTagInstalled);\r\n }\r\n case WIZARD_ACTIONS.NAVIGATE_TO_LAST_STEP: {\r\n const updatedState = {\r\n ...state,\r\n goalObject: {\r\n ...state.goalObject,\r\n ...action.data,\r\n },\r\n isSaveDone: true,\r\n isEditScenario: state.isEditScenario || action.switchToEdit,\r\n };\r\n return goToStep(updatedState, state.currentStep, STEP_PATHS.endFlow.id);\r\n }\r\n case WIZARD_ACTIONS.NAVIGATE_TO_ENHANCED_CONV: {\r\n const updatedState = {\r\n ...state,\r\n goalObject: {\r\n ...state.goalObject,\r\n ...action.data,\r\n },\r\n isEditScenario: state.isEditScenario || action.switchToEdit,\r\n };\r\n return goToStep(updatedState, state.currentStep, STEP_PATHS.goalDetails.enhancedConversions.id);\r\n }\r\n case WIZARD_ACTIONS.NAVIGATE_TO_SETUP_ENHANCED_CONV: {\r\n const updatedState = {\r\n ...state,\r\n goalObject: {\r\n ...state.goalObject,\r\n ...action.data,\r\n },\r\n };\r\n return goToStep(updatedState, state.currentStep, STEP_PATHS.tagSetup.setupEnhancedConv.id);\r\n }\r\n case WIZARD_ACTIONS.WIZARD_UPDATE_GTM_SESSION_CONTEXT: {\r\n return {\r\n ...state,\r\n GTMContext: { ...action.GTMContext },\r\n };\r\n }\r\n case WIZARD_ACTIONS.UPDATE_ASSOCIATED_CAMPAIGNS_DATA: {\r\n return {\r\n ...state,\r\n associatedCampaigns: {\r\n ...state.associatedCampaigns,\r\n ...action.associatedCampaigns,\r\n },\r\n };\r\n }\r\n default:\r\n throw new Error('invalid goal creation wizard action');\r\n }\r\n};\r\n\r\n","export const getStyles = (components, { palette = {} } = {}) => {\r\n const color = {\r\n completedBorder: palette.blue,\r\n completedIcon: palette.blue,\r\n inProgressIcon: '#c0def6',\r\n incompleteBorder: '#ebebeb',\r\n incompleteIcon: palette.neutralLight,\r\n background: palette.white,\r\n stepContentBorder: palette.neutralQuaternaryAlt,\r\n stepFooterBorder: palette.neutralLight,\r\n };\r\n return ({\r\n conversionWizard: {\r\n flexDirection: 'column',\r\n float: '1 0 auto',\r\n height: '100%',\r\n width: '100%',\r\n display: 'flex',\r\n '& .react-block-ui, & .react-block-ui-none': { height: '100%', width: '100%' },\r\n '& .step-footer-buttons': {\r\n marginLeft: '-8px',\r\n },\r\n },\r\n\r\n // StepProgressList on left side\r\n wizardListContainer: {\r\n width: '228px',\r\n minWidth: '228px',\r\n borderRight: `1px solid ${color.stepContentBorder}`,\r\n paddingLeft: '32px',\r\n paddingTop: '32px',\r\n paddingBottom: '32px',\r\n overflow: 'hidden',\r\n minHeight: 450,\r\n\r\n '& ol': {\r\n margin: 0,\r\n padding: 0,\r\n listStyle: 'none',\r\n },\r\n\r\n // Styles for drawing the vertical line\r\n '& .step-progress-list-item': {\r\n borderLeft: `2px solid ${color.completedBorder}`,\r\n '&.step-progress-list-item-ahead': { borderLeftColor: color.incompleteBorder },\r\n },\r\n\r\n // top level list items\r\n '& ol.step-progress-list>.step-progress-list-item': {\r\n paddingTop: '24px',\r\n\r\n '&:first-child': { borderLeftColor: color.background, paddingTop: 0 },\r\n\r\n '&>.step-progress-list-item-glyphicon': {\r\n marginLeft: '-8px',\r\n marginRight: '8px',\r\n background: color.background,\r\n paddingTop: '5px',\r\n paddingBottom: '4px',\r\n },\r\n\r\n '&>.step-progress-list-item-glyphicon.iconba-RadioBullet2': {\r\n paddingTop: 0,\r\n paddingBottom: 0,\r\n transform: 'scale(1.52)',\r\n },\r\n },\r\n\r\n // nested list items\r\n '& ol.step-progress-list-item-list>.step-progress-list-item': {\r\n fontSize: '12px',\r\n lineHeight: '16px',\r\n paddingTop: '24px',\r\n marginLeft: '-2px',\r\n\r\n '&>.step-progress-list-item-glyphicon': {\r\n marginLeft: '-8px',\r\n marginRight: '12px',\r\n background: color.background,\r\n paddingBottom: '1px',\r\n },\r\n },\r\n\r\n '& .step-progress-list-item-selected, & .step-progress-list-item-contains-selected': { fontWeight: '600' },\r\n\r\n // glyphicon colors\r\n '& .step-progress-list-item-behind .step-progress-list-item-glyphicon': {\r\n color: color.completedIcon,\r\n },\r\n '& .step-progress-list-item-selected .step-progress-list-item-glyphicon, & .step-progress-list-item-contains-selected>.step-progress-list-item-glyphicon': {\r\n color: color.inProgressIcon,\r\n },\r\n '& .step-progress-list-item-ahead .step-progress-list-item-glyphicon': {\r\n color: color.incompleteIcon,\r\n },\r\n },\r\n\r\n // Content area on right side\r\n wizardContentContainer: {\r\n display: 'flex',\r\n minWidth: 550,\r\n height: '100%',\r\n\r\n '& .step-container, & .step, & .step>div': { height: '100%', width: '100%' },\r\n\r\n // validation errors\r\n '& .error': {\r\n fontSize: '12px',\r\n lineHeight: '16px',\r\n color: '#a80000',\r\n },\r\n },\r\n });\r\n};\r\n\r\n","\r\nimport _ from 'underscore';\r\nimport classNames from 'classnames';\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Button } from '@bingads-webui-react/primitive';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nimport { getFooterStyles } from './get-styles';\r\n\r\nconst StepFooterUnstyled = (props) => {\r\n const { config, classes } = props;\r\n\r\n const BS_BUTTON = {\r\n Primary: 'primary',\r\n 'Primary-Start': 'primary',\r\n Secondary: 'default',\r\n Cancel: 'default',\r\n Link: 'link',\r\n BasicLink: 'basiclink',\r\n };\r\n\r\n const getClasses = (type) => {\r\n if (type === 'Primary') {\r\n return classNames('btn-footer-primary', classes.primary);\r\n } else if (type === 'Primary-Start') {\r\n return classNames('btn-footer-primary', classes.start);\r\n } else if (type === 'Cancel') {\r\n return classNames('btn-footer-cancel', classes.cancel);\r\n } else if (type === 'Link') {\r\n return classNames('btn-footer-link', classes.link);\r\n } else if (type === 'BasicLink') {\r\n return classNames('btn-footer-basiclink', classes.basicLink);\r\n }\r\n return classNames('btn-footer-secondary', classes.secondary);\r\n };\r\n\r\n return (\r\n \r\n
\r\n )}\r\n\r\n {!isTestGoalSupported && (\r\n {i18n.getString(_TL_('Next step to test your conversion goal:'))}
\r\n\r\n\r\n
\r\n
\r\n )}\r\n \r\n
\r\n
\r\n );\r\n};\r\n\r\nexport const footerConfigProp = PropTypes.shape({\r\n error: PropTypes.string,\r\n buttons: PropTypes.arrayOf(PropTypes.shape({\r\n text: PropTypes.string.isRequired,\r\n type: PropTypes.oneOf(['Primary', 'Primary-Start', 'Secondary', 'Cancel', 'Link', 'BasicLink']),\r\n isEnabled: PropTypes.bool,\r\n onClick: PropTypes.func,\r\n })),\r\n});\r\n\r\nStepFooterUnstyled.propTypes = {\r\n config: footerConfigProp.isRequired,\r\n classes: PropTypes.shape(_.mapObject(getFooterStyles(), _.constant(PropTypes.string.isRequired)))\r\n .isRequired,\r\n};\r\n\r\nexport const StepFooter = withDefaultStyles(StepFooterUnstyled, getFooterStyles);\r\n","export const getStyles = (_, { palette = {} } = {}) => {\r\n const stepContainer = {\r\n display: 'flex',\r\n flexFlow: 'column',\r\n height: '100%',\r\n };\r\n\r\n const stepContent = {\r\n flex: 1,\r\n 'overflow-y': 'auto',\r\n 'overflow-x': 'hidden',\r\n };\r\n\r\n const title = {\r\n fontStyle: 'normal',\r\n fontWeight: 600,\r\n fontSize: '26px',\r\n lineHeight: '28px',\r\n color: palette.neutralPrimary,\r\n marginLeft: '26px',\r\n marginTop: '32px',\r\n marginBottom: '16px',\r\n };\r\n\r\n return {\r\n stepContainer,\r\n stepContent,\r\n title,\r\n };\r\n};\r\n\r\nexport const getFooterStyles = (_, { palette = {} } = {}) => {\r\n const footerContainer = {\r\n display: 'flex',\r\n flexFlow: 'column',\r\n padding: '16px 24px',\r\n borderTop: `1px solid ${palette.neutralLight}`,\r\n bottom: 0,\r\n };\r\n\r\n const footerButtons = {\r\n display: 'flex',\r\n flexFlow: 'row',\r\n };\r\n\r\n const cancel = {};\r\n\r\n const primary = {\r\n marginLeft: '8px',\r\n marginRight: '40px',\r\n };\r\n\r\n const start = {\r\n marginLeft: '8px',\r\n marginRight: '12px',\r\n };\r\n\r\n const secondary = {\r\n marginLeft: '8px',\r\n };\r\n\r\n const link = {\r\n marginLeft: '18px',\r\n color: '#0078d4',\r\n textDecoration: 'underline',\r\n backgroundColor: 'transparent',\r\n border: 'none',\r\n };\r\n\r\n const basicLink = {\r\n marginLeft: '18px',\r\n textDecoration: 'none',\r\n backgroundColor: 'transparent',\r\n border: 'none',\r\n color: '#0078d4',\r\n fontWeight: 200,\r\n };\r\n\r\n return {\r\n footerContainer,\r\n footerButtons,\r\n cancel,\r\n primary,\r\n start,\r\n secondary,\r\n link,\r\n basicLink,\r\n };\r\n};\r\n","import _ from 'underscore';\r\nimport React, { useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { UiBlocker } from '@bingads-webui-react/ui-blocker';\r\n\r\nimport { getStyles } from './get-styles';\r\nimport { footerConfigProp, StepFooter } from './step-footer';\r\n\r\nconst StepContainerUnstyled = (props) => {\r\n const {\r\n title,\r\n step,\r\n footerConfig,\r\n isLoading,\r\n children,\r\n classes,\r\n } = props;\r\n\r\n const i18n = useContext(I18nContext);\r\n\r\n return (\r\n \r\n {_.isEmpty(config.buttons) ? null : _.map(config.buttons, ({\r\n text,\r\n isEnabled,\r\n type,\r\n onClick,\r\n }) =>\r\n (\r\n \r\n \r\n {text}\r\n \r\n \r\n ))\r\n }\r\n {config.customContent}\r\n
\r\n {config.error &&\r\n \r\n {config.error}\r\n
\r\n }\r\n \r\n \r\n {children}\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\n\r\nStepContainerUnstyled.propTypes = {\r\n classes: PropTypes.shape(_.mapObject(getStyles(), _.constant(PropTypes.string.isRequired)))\r\n .isRequired,\r\n title: PropTypes.string.isRequired,\r\n step: PropTypes.string.isRequired,\r\n footerConfig: footerConfigProp.isRequired,\r\n isLoading: PropTypes.bool,\r\n children: PropTypes.oneOfType([\r\n PropTypes.arrayOf(PropTypes.node),\r\n PropTypes.node,\r\n ]).isRequired,\r\n};\r\n\r\nStepContainerUnstyled.defaultProps = {\r\n isLoading: false,\r\n};\r\n\r\nexport const StepContainer = withDefaultStyles(StepContainerUnstyled, getStyles);\r\n","import _ from 'underscore';\r\nimport { ChoiceGroup } from '@fluentui/react';\r\nimport React, { useContext, useState, useMemo, useCallback } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { withPerfMarker } from '@bingads-webui/performance-marker-react-wrapper';\r\nimport { getStepStyles } from '@bingads-webui-campaign-react/conversion-wizard-components';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { StepContainer } from '../step-container/step-container';\r\nimport { GoalCreationWizardContext } from '../../goal-creation-wizard-context';\r\nimport { WIZARD_ACTIONS } from '../../goal-creation-wizard-reducer';\r\n\r\nconst GoalObjectiveStepUnstyled = (props) => {\r\n const {\r\n classes,\r\n autoGoalBackHandlerFunc,\r\n } = props;\r\n const i18n = useContext(I18nContext);\r\n const wizardContext = useContext(GoalCreationWizardContext);\r\n const { logActivity } = wizardContext;\r\n const [selectedOption, setSelectedOption] = useState(wizardContext.selectedObjective);\r\n const [isNextButtonEnabled, setIsNextButtonEnabled] = useState(!_.isUndefined(selectedOption));\r\n const optionSet = [\r\n { key: 'website', text: i18n.getString(_TL_('Website')) },\r\n { key: 'appInstall', text: i18n.getString(_TL_('Mobile app install')) },\r\n { key: 'import', text: i18n.getString(_TL_('Offline')) },\r\n ];\r\n\r\n const handleStart = useCallback(() => {\r\n logActivity.trace(`Selected goal objective:${selectedOption}`);\r\n wizardContext.goToNext();\r\n }, [logActivity, selectedOption, wizardContext]);\r\n\r\n const onChangeOptions = useCallback((ev, options) => {\r\n setSelectedOption(options.key);\r\n logActivity.trace(`Clicked goal objective:${options.key}`);\r\n wizardContext.dispatch({\r\n type: WIZARD_ACTIONS.SELECT_OBJECTIVE,\r\n value: options.key,\r\n });\r\n setIsNextButtonEnabled(true);\r\n }, [logActivity, wizardContext]);\r\n\r\n const footerConfig = useMemo(() => {\r\n const buttons = [{\r\n type: 'Primary-Start',\r\n onClick: handleStart,\r\n isEnabled: isNextButtonEnabled,\r\n text: i18n.getString(_TL_('Next')),\r\n },\r\n {\r\n type: 'Cancel',\r\n onClick: wizardContext.cancel,\r\n isEnabled: true,\r\n text: i18n.getString(_TL_('Cancel')),\r\n },\r\n ];\r\n\r\n if (autoGoalBackHandlerFunc) {\r\n buttons.push({\r\n type: 'BasicLink',\r\n onClick: autoGoalBackHandlerFunc,\r\n isEnabled: true,\r\n text: i18n.getString(_TL_('Switch to simplified setup')),\r\n });\r\n }\r\n return { buttons };\r\n }, [handleStart, isNextButtonEnabled, i18n, wizardContext, autoGoalBackHandlerFunc]);\r\n\r\n return (\r\n \r\n {title}\r\n
\r\n\r\n
\r\n \r\n );\r\n};\r\n\r\nGoalObjectiveStepUnstyled.propTypes = {\r\n classes: PropTypes.shape(_.mapObject(getStepStyles(), _.constant(PropTypes.string.isRequired)))\r\n .isRequired,\r\n autoGoalBackHandlerFunc: PropTypes.func,\r\n};\r\n\r\nGoalObjectiveStepUnstyled.defaultProps = {\r\n autoGoalBackHandlerFunc: null,\r\n};\r\n\r\nexport const GoalObjectiveStep = withPerfMarker(withDefaultStyles(GoalObjectiveStepUnstyled, getStepStyles));\r\n","import _ from 'underscore';\r\n\r\nexport const getSubMenuConfig = (permissions) => {\r\n const subMenuConfig = {\r\n MenuSales: ['Purchase', 'AddToCart', 'BeginCheckout', 'Subcribe'],\r\n MenuLeads: ['SubmitLeadForm', 'BookAppointment', 'Signup', 'RequestQuote', 'GetDirections', 'OutboundClick'],\r\n MenuFurther: ['Contact', 'PageView', 'Download', 'Other'],\r\n };\r\n\r\n if (permissions.IsInStoreVisitGoalEnabled) {\r\n subMenuConfig.MenuFurther.splice(3, 0, 'InStoreVisit');\r\n }\r\n\r\n return subMenuConfig;\r\n};\r\n\r\nconst getGoalTypesForCategory = (goalCategory) => {\r\n const defaultGoalTypes = ['DestinationGoal', 'EventGoal', 'OfflineConversionGoal'];\r\n switch (goalCategory) {\r\n case 'Purchase':\r\n return [...defaultGoalTypes, 'InStoreTransactionGoal', 'ProductConversionGoal'];\r\n case 'Download':\r\n return ['ApplicationInstallGoal'];\r\n case 'InStoreVisit':\r\n return ['InStoreVisitGoal', 'OfflineConversionGoal'];\r\n case 'Other':\r\n return [...defaultGoalTypes, 'DurationGoal', 'PageViewsPerVisitGoal'];\r\n default:\r\n return defaultGoalTypes;\r\n }\r\n};\r\n\r\nconst objective2typeMap = {\r\n website: ['DestinationGoal', 'DurationGoal', 'EventGoal', 'PageViewsPerVisitGoal', 'ProductConversionGoal'],\r\n appInstall: ['ApplicationInstallGoal'],\r\n import: ['InStoreTransactionGoal', 'OfflineConversionGoal', 'InStoreVisitGoal'],\r\n phoneCall: [],\r\n};\r\n\r\nexport const getAvailableGoalTypes = (goalObjective, goalCategory, permissions) => {\r\n const typesForObjective = objective2typeMap[goalObjective];\r\n const typesForCategory = getGoalTypesForCategory(goalCategory);\r\n const availableTypes = [];\r\n\r\n typesForCategory.forEach(x => typesForObjective.includes(x) && availableTypes.push(x));\r\n\r\n // filter out unsupported goal type (product conversion, instore transaction)\r\n const isProductConversionGoalEnabled = permissions && permissions.IsProductConversionsSupported\r\n && (permissions.IsEnhancedShoppingCampaignAllowed || permissions.IsAIMCampaignEnabled || permissions.IsAIMUKEnabled);\r\n const isIntoreTransactionEnabled = permissions && permissions.IsInStoreTransactionAttributionSupported;\r\n\r\n const filteredTypes = availableTypes.filter(x => !((x === 'ProductConversionGoal' && !isProductConversionGoalEnabled) || (x === 'InStoreTransactionGoal' && !isIntoreTransactionEnabled)));\r\n return filteredTypes;\r\n};\r\n\r\nexport const getObjectiveByGoalType = (goalType) => {\r\n let objective = null;\r\n _.each(Object.keys(objective2typeMap), (objectiveKey) => {\r\n if (objective2typeMap[objectiveKey].includes(goalType)) {\r\n objective = objectiveKey;\r\n }\r\n });\r\n return objective;\r\n};\r\n","import _ from 'underscore';\r\n\r\nconst i18nKey2value = {\r\n /* submenu options */\r\n MenuSales: _TL_('Sales categories'),\r\n Purchase: _TL_('Purchase'),\r\n AddToCart: _TL_('Add to cart'),\r\n BeginCheckout: _TL_('Begin checkout'),\r\n Subcribe: _TL_('Subscribe'),\r\n MenuLeads: _TL_('Leads categories'),\r\n SubmitLeadForm: _TL_('Submit lead form'),\r\n BookAppointment: _TL_('Book appointment'),\r\n Signup: _TL_('Sign - up'),\r\n RequestQuote: _TL_('Request quote'),\r\n GetDirections: _TL_('Get directions'),\r\n OutboundClick: _TL_('Outbound click'),\r\n MenuFurther: _TL_('Other categories'),\r\n Contact: _TL_('Contact'),\r\n PageView: _TL_('Page view'),\r\n Other: _TL_('Other'),\r\n Download: _TL_('Download'),\r\n InStoreVisit: _TL_('Store visit'),\r\n /* goal settings */\r\n Event_Goal_Settings_Custom_Event: _TL_('Custom event parameters'),\r\n Learn_More: _TL_('Learn more'),\r\n Event_Goal_Settings_Event_Param_Instruction: _TL_('Select the parameters you\\'d like to send with your event. The parameters shown below are just an example. You can change or add parameters you\\'d like to send with your event. You can also use variables to send dynamic data.'),\r\n /* finish step */\r\n ApplicationInstallGoal: _TL_('mobile app install goal'),\r\n InStoreTransactionGoal: _TL_('instore transaction goal'),\r\n InStoreVisitGoal: _TL_('Store visits goal'),\r\n};\r\n\r\nexport const getSubmenuCalloutOptions = i18n => ({\r\n /* submenu callout options */\r\n Purchase: { title: i18n.getString(_TL_('Purchase')), description: i18n.getString(_TL_('The completion of an order, usually signified by receiving an order/purchase confirmation. ')) },\r\n AddToCart: { title: i18n.getString(_TL_('Add to cart')), description: i18n.getString(_TL_('The addition of an item to the shopping cart(such as selecting the Add to cart button on the website).')) },\r\n BeginCheckout: { title: i18n.getString(_TL_('Begin checkout')), description: i18n.getString(_TL_('The start of the checkout process. ')) },\r\n Subcribe: { title: i18n.getString(_TL_('Subscribe')), description: i18n.getString(_TL_('The start of a paid subscription to a product or service you offer. ')) },\r\n SubmitLeadForm: { title: i18n.getString(_TL_('Submit lead form')), description: i18n.getString(_TL_('The submission of information by a potential customer for a product or service you offer. ')) },\r\n BookAppointment: { title: i18n.getString(_TL_('Book appointment')), description: i18n.getString(_TL_('The booking of an appointment with your business.')) },\r\n Signup: { title: i18n.getString(_TL_('Sign - up')), description: i18n.getString(_TL_('The completion of a form to sign up for a service you offer (such as a newsletter).')) },\r\n RequestQuote: { title: i18n.getString(_TL_('Request quote')), description: i18n.getString(_TL_('The request from a customer to get more details of the product or service you offer, along with pricing information.')) },\r\n GetDirections: { title: i18n.getString(_TL_('Get directions')), description: i18n.getString(_TL_('When a person wants to find one of your locations with the intention of visiting. ')) },\r\n OutboundClick: { title: i18n.getString(_TL_('Outbound click')), description: i18n.getString(_TL_('When a customer is redirected to an external website.')) },\r\n Contact: { title: i18n.getString(_TL_('Contact')), description: i18n.getString(_TL_('When a customer contacts your business via telephone/SMS, email, chat, or any other type of contact.')) },\r\n PageView: { title: i18n.getString(_TL_('Page view')), description: i18n.getString(_TL_('A visit to a webpage that you have identified as being important to your business, such as a product page or search results. ')) },\r\n Other: { title: i18n.getString(_TL_('Other')), description: i18n.getString(_TL_('Use this if the other categories don’t match the actions you are tracking as a conversion.')) },\r\n Download: { title: i18n.getString(_TL_('Download')), description: i18n.getString(_TL_('Download')) },\r\n InStoreVisit: { title: i18n.getString(_TL_('Store visit')), description: i18n.getString(_TL_('When a customer visits one of your store locations.')) },\r\n});\r\n\r\nexport const eventTrackingMethods = {\r\n InlineAction: { key: 'InlineAction', text: _TL_('Track event on inline action.'), ariaLabel: _TL_('Track event on inline action.') },\r\n PageLoad: { key: 'PageLoad', text: _TL_('Track event on page load.'), ariaLabel: _TL_('Track event on page load.') },\r\n};\r\n\r\nexport const eventTagSetupTemplates = {\r\n [eventTrackingMethods.InlineAction.key]: 'InlineEventSnippet',\r\n [eventTrackingMethods.PageLoad.key]: 'PageLoadEventSnippet',\r\n};\r\n\r\nexport const tagSetupExampleTemplates = {\r\n [eventTrackingMethods.InlineAction.key]: 'InlineActionEventTagExample',\r\n [eventTrackingMethods.PageLoad.key]: 'PageLoadEventTagExample',\r\n UET: 'UETExample',\r\n};\r\n\r\nconst goalTypeContents = [\r\n {\r\n id: 'DestinationGoal',\r\n title: _TL_('Destination URL'),\r\n description: _TL_('Track every time someone visits a web page as a conversion.'),\r\n iconName: 'Link',\r\n },\r\n {\r\n id: 'DurationGoal',\r\n title: _TL_('Duration'),\r\n description: _TL_('Track every time someone stays on a website for longer than a certain amount of time as a conversion.'),\r\n iconName: 'Clock',\r\n },\r\n {\r\n id: 'EventGoal',\r\n title: _TL_('Event'),\r\n description: _TL_('Track every time someone completes a specific action such as, subscribing to newsletter or downloading whitepaper, as a conversion.'),\r\n glyphIconName: 'ba-Click',\r\n },\r\n {\r\n id: 'PageViewsPerVisitGoal',\r\n title: _TL_('Pages viewed per visit'),\r\n description: _TL_('Track every time someone visits more than a specified number of pages on your website as a conversion.'),\r\n glyphIconName: 'ba-AdUnitChannel',\r\n },\r\n {\r\n id: 'ApplicationInstallGoal',\r\n title: _TL_('Mobile app install'),\r\n description: _TL_('Track every time someone installs your app as a conversion.'),\r\n iconName: 'CellPhone',\r\n },\r\n {\r\n id: 'ProductConversionGoal',\r\n title: _TL_('Product'),\r\n description: _TL_('Track product purchases back to the ads that led to them.'),\r\n iconName: 'Product',\r\n },\r\n {\r\n id: 'InStoreTransactionGoal',\r\n title: _TL_('In-store transaction'),\r\n description: _TL_('Add in-store transaction conversions to Microsoft Advertising.'),\r\n iconName: 'Shop',\r\n },\r\n {\r\n id: 'OfflineConversionGoal',\r\n title: _TL_('Offline conversions'),\r\n description: _TL_('Add offline conversions to Microsoft Advertising.'),\r\n iconName: 'Upload',\r\n },\r\n {\r\n id: 'InStoreVisitGoal',\r\n title: _TL_('Store visits'),\r\n description: _TL_('Add Store visit conversions to Microsoft Advertising.'),\r\n glyphIconName: 'ba-PedometerSteps',\r\n },\r\n];\r\n\r\nconst stepTitles = {\r\n create: {\r\n DestinationGoal: _TL_('Create a destination goal'),\r\n DurationGoal: _TL_('Create a duration goal'),\r\n EventGoal: _TL_('Create an event goal'),\r\n PageViewsPerVisitGoal: _TL_('Create a page view goal'),\r\n ApplicationInstallGoal: _TL_('Create a mobile app install goal'),\r\n ProductConversionGoal: _TL_('Create a product conversion goal'),\r\n InStoreTransactionGoal: _TL_('Create an instore transaction goal'),\r\n InStoreVisitGoal: _TL_('Create an Store visits goal'),\r\n OfflineConversionGoal: _TL_('Create an offline conversion goal'),\r\n },\r\n edit: {\r\n DestinationGoal: _TL_('Edit destination goal'),\r\n DurationGoal: _TL_('Edit duration goal'),\r\n EventGoal: _TL_('Edit event goal'),\r\n PageViewsPerVisitGoal: _TL_('Edit page view goal'),\r\n ApplicationInstallGoal: _TL_('Edit mobile app install goal'),\r\n ProductConversionGoal: _TL_('Edit product conversion goal'),\r\n InStoreTransactionGoal: _TL_('Edit instore transaction goal'),\r\n InStoreVisitGoal: _TL_('Edit Store visits goal'),\r\n OfflineConversionGoal: _TL_('Edit offline conversion goal'),\r\n ClarityEventGoal: _TL_('Create an event goal'),\r\n },\r\n};\r\n\r\nexport const cali18n = key => (i18nKey2value[key]);\r\n\r\nexport const getTitleByGoalType = (isEdit, goalType) => (isEdit ? stepTitles.edit[goalType] : stepTitles.create[goalType]);\r\n\r\nconst disallowedEditGoals = ['ProductConversionGoal', 'InStoreTransactionGoal', 'OfflineConversionGoal', 'InStoreVisitGoal'];\r\n\r\n// currentGoalType only exists in edit scenario. disallowedEditGoals should be mutual exclusive on isDisabled against other types.\r\nexport const getGoalTypeContents = (availableTypes, i18n, isEditScenario, currentGoalType) => {\r\n const contents = [];\r\n const isOriginalDisallowedEdit = disallowedEditGoals.indexOf(currentGoalType) > -1;\r\n _.each(goalTypeContents, (content) => {\r\n if (availableTypes.indexOf(content.id) > -1) {\r\n const isDisallowedEditGoal = disallowedEditGoals.indexOf(content.id) > -1;\r\n contents.push(Object.assign({}, content, {\r\n title: i18n.getString(content.title),\r\n description: i18n.getString(content.description),\r\n isDisabled: isEditScenario && ((!isOriginalDisallowedEdit && isDisallowedEditGoal) || (isOriginalDisallowedEdit && content.id !== currentGoalType)),\r\n }));\r\n }\r\n });\r\n return contents;\r\n};\r\n\r\nexport const isUetBasedGoal = (goal) => {\r\n switch (goal.Type) {\r\n case 'DestinationGoal':\r\n case 'DurationGoal':\r\n case 'PageViewsPerVisitGoal':\r\n case 'EventGoal':\r\n case 'ProductConversionGoal':\r\n case 'SmartGoal':\r\n case 'ClarityEventGoal':\r\n return true;\r\n default:\r\n return false;\r\n }\r\n};\r\n\r\nexport const isTypeIncluedForEnhancedConversions = ({ goalType, goalValueType }) => {\r\n const varientValue = goalValueType === 'VariantValue';\r\n const IncludedGoalTypes = ['EventGoal', 'DestinationGoal', 'DurationGoal', 'PageViewsPerVisitGoal', 'OfflineConversionGoal'];\r\n return IncludedGoalTypes.includes(goalType) || varientValue;\r\n};\r\n","import React, { useState, useCallback } from 'react';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport PropTypes from 'prop-types';\r\nimport { HoverCard, DirectionalHint, Text, HoverCardType } from '@fluentui/react';\r\n\r\nconst GoalTypeDropdownOptionUnstyled = (props) => {\r\n const [contentRendered, setContentRendered] = useState(false);\r\n\r\n const { option: { text, calloutOption }, classes } = props;\r\n const renderCallout = useCallback(() => (\r\n \r\n
), [classes, calloutOption]);\r\n const plainCardProps = {\r\n directionalHint: DirectionalHint.rightCenter,\r\n onRenderPlainCard: renderCallout,\r\n renderData: calloutOption,\r\n gapSpace: 16,\r\n calloutProps: {\r\n isBeakVisible: true,\r\n },\r\n };\r\n React.useEffect(() => setContentRendered(true), []);\r\n\r\n const targetElementRef = React.useRef();\r\n return (\r\n \r\n \r\n {calloutOption.title}\r\n \r\n
\r\n \r\n {calloutOption.description} \r\n
\r\n \r\n {text}\r\n {calloutOption && contentRendered &&\r\n
\r\n );\r\n};\r\n\r\nGoalTypeDropdownOptionUnstyled.propTypes = {\r\n option: PropTypes.shape({\r\n text: PropTypes.string.isRequired,\r\n description: PropTypes.string,\r\n }).isRequired,\r\n classes: PropTypes.shape({}).isRequired,\r\n};\r\n\r\nexport const GoalTypeDropdownOption = withDefaultStyles(GoalTypeDropdownOptionUnstyled, () => ({\r\n goalTypeOption: { width: '100%', height: '100%' },\r\n goalTypeText: { paddingLeft: '16px', paddingRight: '16px' },\r\n goalTypeCallout: { minWidth: '300px', minHeight: '100px' },\r\n title: {\r\n fontWeight: 600,\r\n display: 'inline-block',\r\n fontSize: 14,\r\n margin: 0,\r\n },\r\n header: {\r\n padding: '18px 24px 12px',\r\n },\r\n inner: {\r\n height: '100%',\r\n padding: '0 24px 20px',\r\n },\r\n}));\r\n","import React, { useContext, useState, useCallback, useMemo, useEffect } from 'react';\r\nimport _ from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { Dropdown, DropdownMenuItemType } from '@fluentui/react';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { SelectableCardList, getStepStyles } from '@bingads-webui-campaign-react/conversion-wizard-components';\r\nimport { HelpButton } from '@bingads-webui-react/help-popup';\r\nimport { LearnMoreLink } from '@bingads-webui-campaign-react/help';\r\nimport { GoalCreationWizardContext } from '../../goal-creation-wizard-context';\r\nimport { getAvailableGoalTypes, getSubMenuConfig } from '../../shared/config';\r\nimport { cali18n, getGoalTypeContents, getSubmenuCalloutOptions } from '../../shared/contants';\r\nimport { GoalTypeDropdownOption } from './goal-type-dropdown-option';\r\n\r\nconst ALERT_TYPE = {\r\n NO_ALERT: 0,\r\n SWITCH_TO_DESTINATION_FROM_EVENT: 1,\r\n SWITCH_TO_EVENT_FROM_DESTINATION: 2,\r\n};\r\n\r\nconst GoalTypeViewUnstyled = (props) => {\r\n const {\r\n selectedObjective,\r\n updateGoalSelection,\r\n classes,\r\n permissions,\r\n } = props;\r\n const i18n = useContext(I18nContext);\r\n const wizardContext = useContext(GoalCreationWizardContext);\r\n const { isEditScenario } = wizardContext;\r\n const [selectedCategory, setSelectedCategory] = useState(wizardContext.goalContext ? wizardContext.goalContext.GoalCategory : undefined);\r\n const [selectedGoalType, setSelectedGoalType] = useState(wizardContext.goalContext ? wizardContext.goalContext.Type : undefined);\r\n const defaultGoalTypes = selectedCategory ? getAvailableGoalTypes(selectedObjective, selectedCategory, wizardContext.permissions) : [];\r\n const subMenuConfig = getSubMenuConfig(wizardContext.permissions);\r\n const [availableTypes, setAvailableTypes] = useState(defaultGoalTypes);\r\n const submenuCalloutOptions = useMemo(() => getSubmenuCalloutOptions(i18n), [i18n]);\r\n const [alertType, setAlertType] = useState(ALERT_TYPE.NO_ALERT);\r\n\r\n const dropdownOptions = useMemo(() => {\r\n const options = [];\r\n // Build a multi-section menu from each item in the config.\r\n _.each(Object.keys(subMenuConfig), (headerKey, index) => {\r\n let addedOptionToSection = false;\r\n options.push({ key: headerKey, text: i18n.getString(cali18n(headerKey)), itemType: DropdownMenuItemType.Header });\r\n _.each(subMenuConfig[headerKey], (optionKey) => {\r\n const goalTypeList = getAvailableGoalTypes(selectedObjective, optionKey, wizardContext.permissions);\r\n if (isEditScenario && (selectedObjective === 'import' || selectedGoalType === 'ProductConversionGoal')) {\r\n if (goalTypeList.indexOf(selectedGoalType) > -1) {\r\n // Only add an option if current goal type is in available types.\r\n const keyText = i18n.getString(cali18n(optionKey));\r\n options.push({\r\n key: optionKey, text: keyText, ariaLabel: keyText, title: '', calloutOption: submenuCalloutOptions[optionKey],\r\n });\r\n addedOptionToSection = true;\r\n }\r\n } else if (goalTypeList.length > 0) {\r\n // Only add an option if it has at least one goal type for this objective.\r\n const keyText = i18n.getString(cali18n(optionKey));\r\n options.push({\r\n key: optionKey, text: keyText, ariaLabel: keyText, title: '', calloutOption: submenuCalloutOptions[optionKey],\r\n });\r\n addedOptionToSection = true;\r\n }\r\n });\r\n if (addedOptionToSection) {\r\n // Add a divider at the end of the section\r\n options.push({\r\n key: `divider_${index}`, ariaLabel: 'divider', text: '-', title: '', itemType: DropdownMenuItemType.Divider,\r\n });\r\n } else {\r\n options.pop(); // Remove the header if the section is empty\r\n }\r\n });\r\n options.pop(); // Remove trailing divider\r\n return options;\r\n }, [subMenuConfig, i18n, selectedObjective, wizardContext.permissions, isEditScenario, selectedGoalType, submenuCalloutOptions]);\r\n\r\n const onChangeCategory = useCallback((ev, option) => {\r\n setSelectedCategory(option.key);\r\n\r\n const updatedAvailableTypes = getAvailableGoalTypes(selectedObjective, option.key, wizardContext.permissions);\r\n setAvailableTypes(updatedAvailableTypes);\r\n // goal type should update after goal category is changed to not applicable categories\r\n updateGoalSelection({ GoalCategory: option.key, Type: selectedGoalType && updatedAvailableTypes.indexOf(selectedGoalType) < 0 ? undefined : selectedGoalType });\r\n }, [selectedGoalType, selectedObjective, updateGoalSelection, wizardContext.permissions]);\r\n\r\n const setAlertTypeIfClarityEventIsDefined = useCallback(() => {\r\n const isClarityTagSetupAllowed = permissions && _.result(permissions.dynamic, 'IsClarityTagSetupAllowed');\r\n if (!isClarityTagSetupAllowed || !wizardContext.goalData.ClarityEventDefinitionId) {\r\n return;\r\n }\r\n if (wizardContext.goalData.Type === 'EventGoal' && selectedGoalType === 'DestinationGoal') {\r\n setAlertType(ALERT_TYPE.SWITCH_TO_DESTINATION_FROM_EVENT);\r\n } else if (wizardContext.goalData.Type === 'DestinationGoal' && selectedGoalType === 'EventGoal') {\r\n setAlertType(ALERT_TYPE.SWITCH_TO_EVENT_FROM_DESTINATION);\r\n } else {\r\n setAlertType(ALERT_TYPE.NO_ALERT);\r\n }\r\n }, [permissions, selectedGoalType, wizardContext.goalData.ClarityEventDefinitionId, wizardContext.goalData.Type]);\r\n\r\n useEffect(() => {\r\n setAlertTypeIfClarityEventIsDefined();\r\n }, [selectedGoalType, setAlertTypeIfClarityEventIsDefined]);\r\n\r\n const onChangeType = useCallback((id) => {\r\n setSelectedGoalType(id);\r\n updateGoalSelection({ Type: id });\r\n }, [updateGoalSelection]);\r\n\r\n const goalTypeContents = useMemo(() => getGoalTypeContents(availableTypes, i18n, isEditScenario, selectedGoalType), [availableTypes, i18n, isEditScenario, selectedGoalType]);\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nGoalTypeViewUnstyled.propTypes = {\r\n selectedObjective: PropTypes.string.isRequired,\r\n updateGoalSelection: PropTypes.func.isRequired,\r\n permissions: PropTypes.shape({}).isRequired,\r\n classes: PropTypes.shape(_.mapObject(\r\n getStepStyles(),\r\n _.constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n};\r\n\r\nexport const GoalTypeView = withDefaultStyles(GoalTypeViewUnstyled, getStepStyles);\r\n","import React, { useContext, useState, useMemo, useCallback } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { getStepStyles } from '@bingads-webui-campaign-react/conversion-wizard-components';\r\nimport { withPerfMarker } from '@bingads-webui/performance-marker-react-wrapper';\r\nimport { StepContainer } from '../step-container/step-container';\r\nimport { GoalCreationWizardContext } from '../../goal-creation-wizard-context';\r\nimport { WIZARD_ACTIONS } from '../../goal-creation-wizard-reducer';\r\nimport { GoalTypeView } from './goal-type-view';\r\nimport { endActivity } from '../../shared/util';\r\n\r\nconst GoalTypeSelectionUnstyled = (props) => {\r\n const {\r\n selectedObjective,\r\n classes,\r\n permissions,\r\n autoGoalBackHandlerFunc,\r\n autoGoalSelectedObjective,\r\n } = props;\r\n const i18n = useContext(I18nContext);\r\n const wizardContext = useContext(GoalCreationWizardContext);\r\n const { logActivity } = wizardContext;\r\n const { GoalCategory, Type } = wizardContext.goalContext; // undefined if it is a new goal\r\n const [goalSelection, setGoalSelection] = useState({ GoalCategory, Type });\r\n\r\n const updateGoalSelection = useCallback((data) => {\r\n setGoalSelection({\r\n ...goalSelection,\r\n ...data,\r\n });\r\n }, [goalSelection]);\r\n\r\n const handleNext = useCallback(() => {\r\n logActivity.trace(`Selected goal type:${JSON.stringify(goalSelection)}`);\r\n endActivity(logActivity);\r\n wizardContext.dispatch({\r\n type: WIZARD_ACTIONS.SAVE_AND_NAVIGATE_DETAILS,\r\n data: { ...goalSelection },\r\n });\r\n }, [logActivity, goalSelection, wizardContext]);\r\n\r\n const footerConfig = useMemo(() => {\r\n const buttons = [\r\n {\r\n type: 'Primary',\r\n onClick: handleNext,\r\n isEnabled: !_.isUndefined(goalSelection.GoalCategory) && goalSelection.GoalCategory !== 'None' && !_.isUndefined(goalSelection.Type),\r\n text: i18n.getString(_TL_('Next')),\r\n },\r\n {\r\n type: 'Cancel',\r\n onClick: wizardContext.cancel,\r\n isEnabled: true,\r\n text: i18n.getString(_TL_('Cancel')),\r\n }];\r\n\r\n if (!autoGoalSelectedObjective) {\r\n buttons.unshift({\r\n type: 'Secondary',\r\n onClick: wizardContext.goBack,\r\n isEnabled: !wizardContext.isEditScenario,\r\n text: i18n.getString(_TL_('Back')),\r\n });\r\n }\r\n\r\n if (autoGoalBackHandlerFunc) {\r\n buttons.push({\r\n type: 'BasicLink',\r\n onClick: autoGoalBackHandlerFunc,\r\n isEnabled: true,\r\n text: i18n.getString(_TL_('Switch to simplified setup')),\r\n });\r\n }\r\n return { buttons };\r\n }, [autoGoalBackHandlerFunc, autoGoalSelectedObjective, goalSelection.GoalCategory, goalSelection.Type, handleNext, i18n, wizardContext.cancel, wizardContext.goBack, wizardContext.isEditScenario]);\r\n return (\r\n \r\n
\r\n\r\n {!_.isEmpty(selectedCategory) &&\r\n \r\n {i18n.getString(_TL_('Goal Category'))}\r\n
\r\n {i18n.getString(_TL_('You can use these categories to segment your performance data.'))}
\r\n\r\n
\r\n )}\r\n {i18n.getString(_TL_('Select a goal category to continue. This is a new, required setting.'))}
\r\n\r\n
}\r\n {alertType === ALERT_TYPE.SWITCH_TO_EVENT_FROM_DESTINATION &&\r\n {i18n.getString(_TL_('Goal Type'))}
\r\n{i18n.getString(_TL_('Select the type of interaction you would like to track with this goal.'))}
\r\n\r\n \r\n \r\n {i18n.getString(_TL_('You\\'ll need to customize your UET tag tracking code if you change your goal type to Custom event.'))}\r\n \r\n
\r\n }\r\n {alertType === ALERT_TYPE.SWITCH_TO_DESTINATION_FROM_EVENT &&\r\n \r\n \r\n \r\n {i18n.getString(_TL_('We\\'ve removed the event tracking you previously set up because your goal type is Destination URL.'))}\r\n
\r\n }\r\n \r\n
\r\n \r\n\r\n );\r\n};\r\n\r\nGoalTypeSelectionUnstyled.propTypes = {\r\n selectedObjective: PropTypes.string.isRequired,\r\n permissions: PropTypes.shape({}).isRequired,\r\n classes: PropTypes.shape(_.mapObject(\r\n getStepStyles(),\r\n _.constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n autoGoalBackHandlerFunc: PropTypes.func,\r\n autoGoalSelectedObjective: PropTypes.string,\r\n};\r\n\r\nGoalTypeSelectionUnstyled.defaultProps = {\r\n autoGoalBackHandlerFunc: null,\r\n autoGoalSelectedObjective: null,\r\n};\r\nexport const GoalTypeStep = withPerfMarker(withDefaultStyles(GoalTypeSelectionUnstyled, getStepStyles));\r\n","export const getExpressionOperatorOptions = i18n => [\r\n {\r\n key: 'EqualsTo',\r\n text: i18n.getString(_TL_('Equals to')),\r\n title: i18n.getString(_TL_('Equals to')),\r\n description: i18n.getString(_TL_('Only visits to this exact URL would be considered conversions. For example: If the web page URL you choose is https://www.contoso.com, a visit to https://www.contoso.com will count as a conversion.')),\r\n link: 'https://help.bingads.microsoft.com/#apex/3/en/56689/2',\r\n ariaLabel: i18n.getString(_TL_('Equals to')),\r\n },\r\n {\r\n key: 'BeginsWith',\r\n text: i18n.getString(_TL_('Begins with')),\r\n title: i18n.getString(_TL_('Begins with')),\r\n description: i18n.getString(_TL_('Visits to any web pages that contains the beginning of the URL you select would be considered a conversion. For example: If the web page URL you choose is www.contoso.com, www.contoso.com/home will count as a conversion.')),\r\n link: 'https://help.bingads.microsoft.com/#apex/3/en/56689/2',\r\n ariaLabel: i18n.getString(_TL_('Begins with')),\r\n },\r\n {\r\n key: 'Contains',\r\n text: i18n.getString(_TL_('Contains')),\r\n title: i18n.getString(_TL_('Contains')),\r\n description: i18n.getString(_TL_('Visits to any web pages that contain part of the text you input would be considered a conversion. For example: If the text you input is “confirmation,” visits to www.contoso.com/confirmation or www.adatum.com/confirmation will count as a conversion.')),\r\n link: 'https://help.bingads.microsoft.com/#apex/3/en/56689/2',\r\n ariaLabel: i18n.getString(_TL_('Contains')),\r\n },\r\n {\r\n key: 'RegularExpression',\r\n text: i18n.getString(_TL_('Regular expression')),\r\n title: i18n.getString(_TL_('Regular expression')),\r\n description: i18n.getString(_TL_('Customize your own rules using regular expressions.')),\r\n link: 'https://help.bingads.microsoft.com/#apex/3/en/56715/2',\r\n ariaLabel: i18n.getString(_TL_('Regular expression')),\r\n },\r\n];\r\n\r\nexport const getValueOperatorOptions = i18n => [\r\n {\r\n key: 'EqualTo',\r\n text: i18n.getString(_TL_('Equals to')),\r\n title: i18n.getString(_TL_('Equals to')),\r\n ariaLabel: i18n.getString(_TL_('Equals to')),\r\n },\r\n {\r\n key: 'LessThan',\r\n text: i18n.getString(_TL_('Less than')),\r\n title: i18n.getString(_TL_('Less than')),\r\n ariaLabel: i18n.getString(_TL_('Less than')),\r\n },\r\n {\r\n key: 'GreaterThan',\r\n text: i18n.getString(_TL_('Greater than')),\r\n title: i18n.getString(_TL_('Greater than')),\r\n ariaLabel: i18n.getString(_TL_('Greater than')),\r\n },\r\n];\r\n\r\nexport const getAppPlatformOptions = i18n => [\r\n {\r\n key: 'Windows Phone',\r\n text: i18n.getString(_TL_('Windows Phone')),\r\n placeholder: '12345678-9abc-1234-1',\r\n ariaLabel: i18n.getString(_TL_('Windows Phone')),\r\n },\r\n {\r\n key: 'Android',\r\n text: i18n.getString(_TL_('Android')),\r\n placeholder: 'com.example.app',\r\n ariaLabel: i18n.getString(_TL_('Android')),\r\n },\r\n {\r\n key: 'iOS',\r\n text: i18n.getString(_TL_('iOS')),\r\n placeholder: '123456789',\r\n ariaLabel: i18n.getString(_TL_('iOS')),\r\n },\r\n {\r\n key: 'Windows',\r\n text: i18n.getString(_TL_('Windows')),\r\n placeholder: '12345678-9abc-1234-1',\r\n ariaLabel: i18n.getString(_TL_('Windows')),\r\n },\r\n];\r\n\r\nexport const getRevenueOptions = i18n => [\r\n {\r\n key: 'FixedValue',\r\n text: i18n.getString(_TL_('Each conversion action has the same value')),\r\n ariaLabel: i18n.getString(_TL_('Each conversion action has the same value')),\r\n },\r\n {\r\n key: 'VariantValue',\r\n text: i18n.getString(_TL_('Conversion action value may vary (for example, by purchase price)')),\r\n ariaLabel: i18n.getString(_TL_('Conversion action value may vary (for example, by purchase price)')),\r\n },\r\n {\r\n key: 'NoValue',\r\n text: i18n.getString(_TL_('Don\\'t assign a value')),\r\n ariaLabel: i18n.getString(_TL_('Don\\'t assign a value')),\r\n },\r\n];\r\n\r\nexport const getBoostRevenueOptions = i18n => [\r\n {\r\n key: 'FixedValue',\r\n text: i18n.getString(_TL_('Each conversion action has the same value')),\r\n ariaLabel: i18n.getString(_TL_('Each conversion action has the same value')),\r\n },\r\n];\r\n","import _ from 'underscore';\r\n\r\nexport const validateNumeric = (value) => {\r\n const regex = /^[0-9]+$/;\r\n return String(value).match(regex);\r\n};\r\n\r\nexport const validateDecimal = (value) => {\r\n const regex = /^\\d{0,12}(\\.\\d{1,4})?$/;\r\n return String(value).match(regex);\r\n};\r\n\r\nexport const validateProtocol = (value) => {\r\n const regex = /^http(s)?:\\/\\//;\r\n return value && value.toLowerCase().trim().match(regex);\r\n};\r\n\r\nexport const validateString = value => (_.isString(value) && !(/<[^>]*>/).exec(value));\r\n\r\nconst timeRangeSchema = {\r\n day: {\r\n lowerBound: 0,\r\n upperBound: 90, // upper bound for conversion window\r\n },\r\n hour: {\r\n lowerBound: 0,\r\n upperBound: 23,\r\n },\r\n min: {\r\n lowerBound: 0,\r\n upperBound: 59,\r\n },\r\n sec: {\r\n lowerBound: 0,\r\n upperBound: 59,\r\n },\r\n};\r\n\r\nexport const validateRange = (timeKey, timeValue) => {\r\n const { lowerBound, upperBound } = timeRangeSchema[timeKey];\r\n\r\n return timeValue >= lowerBound && timeValue <= upperBound;\r\n};\r\n\r\nexport const validateRangeObj = (timeObj) => {\r\n let validationResult = true;\r\n _.each(Object.keys(timeObj), (timeKey) => {\r\n const isValid = validateRange(timeKey, timeObj[timeKey]);\r\n if (!isValid) {\r\n validationResult = false;\r\n }\r\n });\r\n return validationResult;\r\n};\r\n\r\nexport const validateSpecificView = (goalObject) => {\r\n const goalType = goalObject.Type;\r\n switch (goalType) {\r\n case 'DestinationGoal':\r\n return goalObject.Operator && goalObject.UrlString && ((goalObject.Operator !== 'EqualsTo' && goalObject.Operator !== 'BeginsWith') || validateProtocol(goalObject.UrlString));\r\n case 'ApplicationInstallGoal':\r\n return !!goalObject.ApplicationStoreId;\r\n case 'PageViewsPerVisitGoal':\r\n return !_.isUndefined(goalObject.PageViews) && goalObject.PageViews <= 9999;\r\n case 'DurationGoal':\r\n return !_.isUndefined(goalObject.Duration);\r\n case 'EventGoal': {\r\n let isStringValid = true;\r\n if (goalObject.Category) {\r\n isStringValid = isStringValid && validateString(goalObject.Category);\r\n }\r\n if (goalObject.Action) {\r\n isStringValid = isStringValid && validateString(goalObject.Action);\r\n }\r\n if (goalObject.Label) {\r\n isStringValid = isStringValid && validateString(goalObject.Label);\r\n }\r\n return isStringValid && (!!goalObject.Category || !!goalObject.Action || !!goalObject.Label || !!goalObject.Value);\r\n }\r\n default:\r\n return true;\r\n }\r\n};\r\n","/* eslint-disable react/jsx-no-target-blank */\r\nimport React, { useContext, useState, useCallback, useEffect, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport { Dropdown, TextField } from '@fluentui/react';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { HelpButton } from '@bingads-webui-react/help-popup';\r\nimport { GoalCreationWizardContext } from '../goal-creation-wizard-context';\r\nimport { getStepStyles } from '../../../conversion-wizard-components/src/shared-styles/shared-content-style';\r\nimport { getExpressionOperatorOptions } from './goal-creation-options';\r\nimport { validateString, validateProtocol } from '../shared/validation-util';\r\n\r\nconst DestinationUrlSettingUnstyled = (props) => {\r\n const {\r\n classes,\r\n updateGoalProps,\r\n showError,\r\n resetShowError,\r\n } = props;\r\n const i18n = useContext(I18nContext);\r\n const wizardContext = useContext(GoalCreationWizardContext);\r\n const [selectedOperator, setSelectedOperator] = useState(wizardContext.goalContext.Operator);\r\n const [inputUrl, setInputUrl] = useState(wizardContext.goalContext.UrlString);\r\n const expressionOperatorOptions = useMemo(() => getExpressionOperatorOptions(i18n), [i18n]);\r\n\r\n const [urlErrorMessage, setUrlErrorMessage] = useState('');\r\n const [operatorErrorMessage, setOperatorErrorMesage] = useState('');\r\n\r\n const getOperatorErrorMessage = useCallback((op) => {\r\n if (!op) {\r\n return i18n.getString(_TL_('Select a conversion tracking scenario.'));\r\n }\r\n return '';\r\n }, [i18n]);\r\n\r\n const getUrlErrorMesssage = useCallback((op, url) => {\r\n if (url.trim().length === 0) {\r\n return i18n.getString(_TL_('Enter a destination.'));\r\n } else if (!validateString(url)) {\r\n return i18n.getString(_TL_('Enter a valid URL string.'));\r\n } else if (url.trim().length > 10000) {\r\n return i18n.getString(_TL_('URL length should not exceed 10000.'));\r\n } else if ((op === 'EqualsTo' || op === 'BeginsWith') && !validateProtocol(url)) {\r\n return i18n.getString(_TL_('URL should start with protocol. For example: https://'));\r\n }\r\n return '';\r\n }, [i18n]);\r\n\r\n useEffect(() => {\r\n if (showError) {\r\n setOperatorErrorMesage(getOperatorErrorMessage(selectedOperator));\r\n setUrlErrorMessage(getUrlErrorMesssage(selectedOperator, inputUrl));\r\n resetShowError();\r\n }\r\n }, [getOperatorErrorMessage, getUrlErrorMesssage, inputUrl, resetShowError, selectedOperator, showError]);\r\n\r\n const onChangeOperator = useCallback((event, value) => {\r\n setSelectedOperator(value.key);\r\n setOperatorErrorMesage('');\r\n setUrlErrorMessage(getUrlErrorMesssage(value.key, inputUrl));\r\n updateGoalProps({ Operator: value.key, UrlString: inputUrl });\r\n }, [getUrlErrorMesssage, inputUrl, updateGoalProps]);\r\n\r\n const onChangeUrl = useCallback((event, value) => {\r\n setInputUrl(value);\r\n const errorMessage = getUrlErrorMesssage(selectedOperator, value);\r\n setUrlErrorMessage(errorMessage);\r\n updateGoalProps({ UrlString: _.isEmpty(errorMessage) ? value.trim() : undefined });\r\n }, [getUrlErrorMesssage, selectedOperator, updateGoalProps]);\r\n\r\n const title = i18n.getString(_TL_('Destination URL'));\r\n\r\n const operatorMessage = useMemo(() => {\r\n const map = {};\r\n _.each(expressionOperatorOptions, (item) => {\r\n map[item.key] = { description: item.description, helpLink: item.link };\r\n });\r\n\r\n return map;\r\n }, [expressionOperatorOptions]);\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nDestinationUrlSettingUnstyled.propTypes = {\r\n classes: PropTypes.shape(_.mapObject(\r\n getStepStyles(),\r\n _.constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n updateGoalProps: PropTypes.func.isRequired,\r\n showError: PropTypes.bool.isRequired,\r\n resetShowError: PropTypes.func.isRequired,\r\n};\r\n\r\nexport const DestinationUrlSetting = withDefaultStyles(DestinationUrlSettingUnstyled, getStepStyles);\r\n","/* eslint-disable no-unused-vars */\r\nimport React, { useContext, useState, useCallback, useMemo, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport _ from 'underscore';\r\nimport { Dropdown, TextField, FontIcon } from '@fluentui/react';\r\nimport { I18nContext, withI18nConsumer } from '@bingads-webui-react/i18n-context';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { HelpButton } from '@bingads-webui-react/help-popup';\r\nimport { GoalCreationWizardContext } from '../goal-creation-wizard-context';\r\nimport { getStepStyles } from '../../../conversion-wizard-components/src/shared-styles/shared-content-style';\r\nimport { cali18n } from '../shared/contants';\r\nimport { getExpressionOperatorOptions, getValueOperatorOptions } from './goal-creation-options';\r\nimport { validateNumeric, validateString } from '../shared/validation-util';\r\n\r\nconst EventParamSettingUnstyled = (props) => {\r\n const {\r\n classes,\r\n goalObj,\r\n updateGoalProps,\r\n showError,\r\n resetShowError,\r\n } = props;\r\n const i18n = useContext(I18nContext);\r\n const wizardContext = useContext(GoalCreationWizardContext);\r\n const {\r\n CategoryOperator,\r\n Category,\r\n ActionOperator,\r\n Action,\r\n LabelOperator,\r\n Label,\r\n ValueOperator,\r\n Value,\r\n } = goalObj;\r\n const [categoryOperator, setCategoryOperator] = useState(CategoryOperator === 'NoExpression' ? 'EqualsTo' : CategoryOperator);\r\n const [categoryValue, setCategoryValue] = useState(_.isNull(Category) ? '' : Category);\r\n const [actionOperator, setActionOperator] = useState(ActionOperator === 'NoExpression' ? 'EqualsTo' : ActionOperator);\r\n const [actionValue, setActionValue] = useState(_.isNull(Action) ? '' : Action);\r\n const [labelOperator, setLabelOperator] = useState(LabelOperator === 'NoExpression' ? 'EqualsTo' : LabelOperator);\r\n const [labelValue, setLabelValue] = useState(_.isNull(Label) ? '' : Label);\r\n const [valueOperator, setValueOperator] = useState(ValueOperator === 'NoValue' ? 'EqualTo' : ValueOperator);\r\n const [valueValue, setValueValue] = useState(_.isNull(Value) ? '' : Value.toString());\r\n const expressionOperatorOptions = useMemo(() => getExpressionOperatorOptions(i18n), [i18n]);\r\n const valueOperatorOptions = useMemo(() => getValueOperatorOptions(i18n), [i18n]);\r\n\r\n const [inputVisibleStates, setInputVisibleStates] = useState({\r\n Action: !_.isEmpty(actionValue) || (_.isEmpty(valueValue) && _.isEmpty(labelValue) && _.isEmpty(categoryValue)),\r\n Value: !_.isEmpty(valueValue),\r\n Label: !_.isEmpty(labelValue),\r\n Category: !_.isEmpty(categoryValue),\r\n });\r\n\r\n const [errorMsg, setErrorMsg] = useState('');\r\n const [categoryErrMessage, setCategoryErrMessage] = useState('');\r\n const [actionErrMessage, setActionErrMessage] = useState('');\r\n const [labelErrMessage, setLabelErrMessage] = useState('');\r\n const [valueErrMessage, setValueErrMessage] = useState('');\r\n\r\n const getErrorMessage = useCallback(() => {\r\n if (!Category && !Action && !Label && !Value) {\r\n return i18n.getString(_TL_('Enter at least one parameter to create an event goal.'));\r\n }\r\n return '';\r\n }, [Action, Category, Label, Value, i18n]);\r\n\r\n const getStringErrorMessage = useCallback((value) => {\r\n if (!validateString(value)) {\r\n return i18n.getString(_TL_('Field contains invalid characters'));\r\n }\r\n return '';\r\n }, [i18n]);\r\n\r\n const getValueErrorMessage = useCallback((value) => {\r\n const parsedValue = parseInt(value, 10);\r\n if (!_.isNaN(parsedValue) && parsedValue > 9.22e14) {\r\n return i18n.getString(_TL_('Enter a valid value'));\r\n }\r\n return '';\r\n }, [i18n]);\r\n\r\n useEffect(() => {\r\n if (showError) {\r\n setErrorMsg(getErrorMessage);\r\n resetShowError();\r\n }\r\n }, [getErrorMessage, resetShowError, showError]);\r\n\r\n const onChangeCategoryOperator = useCallback((event, option) => {\r\n setCategoryOperator(option.key);\r\n updateGoalProps({ CategoryOperator: option.key });\r\n }, [updateGoalProps]);\r\n\r\n const onChangeCategoryValue = useCallback((event, value) => {\r\n setCategoryValue(value);\r\n setCategoryErrMessage(getStringErrorMessage(value));\r\n updateGoalProps({ CategoryOperator: categoryOperator, Category: value.trim().length > 0 ? value.trim() : null });\r\n }, [categoryOperator, getStringErrorMessage, updateGoalProps]);\r\n\r\n const onChangeActionOperator = useCallback((event, option) => {\r\n setActionOperator(option.key);\r\n updateGoalProps({ ActionOperator: option.key });\r\n }, [updateGoalProps]);\r\n\r\n const onChangeActionValue = useCallback((event, value) => {\r\n setActionValue(value);\r\n setActionErrMessage(getStringErrorMessage(value));\r\n updateGoalProps({ ActionOperator: actionOperator, Action: value.trim().length > 0 ? value.trim() : null });\r\n }, [actionOperator, getStringErrorMessage, updateGoalProps]);\r\n\r\n const onChangeLabelOperator = useCallback((event, option) => {\r\n setLabelOperator(option.key);\r\n updateGoalProps({ LabelOperator: option.key });\r\n }, [updateGoalProps]);\r\n\r\n const onChangeLabelValue = useCallback((event, value) => {\r\n setLabelValue(value);\r\n setLabelErrMessage(getStringErrorMessage(value));\r\n updateGoalProps({ LabelOperator: labelOperator, Label: value.trim().length > 0 ? value.trim() : null });\r\n }, [getStringErrorMessage, labelOperator, updateGoalProps]);\r\n\r\n const onChangeValueOperator = useCallback((event, option) => {\r\n setValueOperator(option.key);\r\n updateGoalProps({ ValueOperator: option.key });\r\n }, [updateGoalProps]);\r\n\r\n const onChangeValueValue = useCallback((event, value) => {\r\n if ((validateNumeric(value) || value.length === 0) && value.length <= 15) {\r\n setValueValue(value);\r\n setValueErrMessage(getValueErrorMessage(value));\r\n const parsedValue = parseInt(value, 10);\r\n updateGoalProps({ ValueOperator: valueOperator, Value: _.isNaN(parsedValue) || parsedValue > 9.22e14 ? null : parsedValue });\r\n }\r\n }, [getValueErrorMessage, updateGoalProps, valueOperator]);\r\n\r\n const onClearActionParam = useCallback((event) => {\r\n setActionOperator('EqualsTo');\r\n setActionValue('');\r\n setActionErrMessage('');\r\n setInputVisibleStates({ ...inputVisibleStates, Action: false });\r\n updateGoalProps({ ActionOperator: 'NoExpression', Action: null });\r\n }, [inputVisibleStates, updateGoalProps]);\r\n\r\n const onClearCategoryParam = useCallback((event) => {\r\n setCategoryOperator('EqualsTo');\r\n setCategoryValue('');\r\n setCategoryErrMessage('');\r\n setInputVisibleStates({ ...inputVisibleStates, Category: false });\r\n updateGoalProps({ CategoryOperator: 'NoExpression', Category: null });\r\n }, [inputVisibleStates, updateGoalProps]);\r\n\r\n const onClearLabelParam = useCallback((event) => {\r\n setLabelOperator('EqualsTo');\r\n setLabelValue('');\r\n setLabelErrMessage('');\r\n setInputVisibleStates({ ...inputVisibleStates, Label: false });\r\n updateGoalProps({ LabelOperator: 'NoExpression', Label: null });\r\n }, [inputVisibleStates, updateGoalProps]);\r\n\r\n const onClearValueParam = useCallback((event) => {\r\n setValueOperator('EqualTo');\r\n setValueValue('');\r\n setValueErrMessage('');\r\n setInputVisibleStates({ ...inputVisibleStates, Value: false });\r\n updateGoalProps({ ValueOperator: 'NoValue', Value: null });\r\n }, [inputVisibleStates, updateGoalProps]);\r\n\r\n const onChangeDropdownValue = useCallback((event, option) => {\r\n setInputVisibleStates({ ...inputVisibleStates, [option.key]: true });\r\n }, [inputVisibleStates]);\r\n\r\n const onKeyEnter = useCallback(callback => (event) => {\r\n if (event.key === 'Enter') {\r\n callback(event);\r\n }\r\n }, []);\r\n\r\n const addAnotherParamOptions = useMemo(() => _.filter([\r\n { key: 'Action', text: i18n.getString(_TL_(('Action'))) },\r\n { key: 'Label', text: i18n.getString(_TL_(('Label'))) },\r\n { key: 'Value', text: i18n.getString(_TL_(('Value'))) },\r\n { key: 'Category', text: i18n.getString(_TL_(('Category'))) },\r\n ], option => !inputVisibleStates[option.key]), [i18n, inputVisibleStates]);\r\n\r\n const onRenderTitleForAddOperator = () => (\r\n \r\n {title}\r\n
\r\n \r\n
\r\n {/* operator explanation */}\r\n {!_.isEmpty(selectedOperator) && (\r\n \r\n
\r\n \r\n
}\r\n {operatorErrorMessage}
\r\n\r\n
\r\n \r\n
\r\n )}\r\n {urlErrorMessage}
\r\n\r\n \r\n {operatorMessage[selectedOperator].description} {i18n.getString(_TL_('Learn more'))}\r\n \r\n
\r\n )}\r\n \r\n
\r\n );\r\n};\r\n\r\nEventParamSettingUnstyled.propTypes = {\r\n classes: PropTypes.shape(_.mapObject(\r\n getStepStyles(),\r\n _.constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n goalObj: PropTypes.shape({}).isRequired,\r\n updateGoalProps: PropTypes.func.isRequired,\r\n showError: PropTypes.bool.isRequired,\r\n resetShowError: PropTypes.func.isRequired,\r\n};\r\n\r\nexport const EventParamSetting = withDefaultStyles(EventParamSettingUnstyled, getStepStyles);\r\n","import React, { useContext, useState, useCallback, useEffect, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport { ChoiceGroup, TextField } from '@fluentui/react';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { GoalCreationWizardContext } from '../goal-creation-wizard-context';\r\nimport { getStepStyles } from '../../../conversion-wizard-components/src/shared-styles/shared-content-style';\r\nimport { getAppPlatformOptions } from './goal-creation-options';\r\nimport { validateString } from '../shared/validation-util';\r\n\r\nconst AppInstallSettingUnstyled = (props) => {\r\n const {\r\n classes,\r\n updateGoalProps,\r\n showError,\r\n resetShowError,\r\n } = props;\r\n const i18n = useContext(I18nContext);\r\n const wizardContext = useContext(GoalCreationWizardContext);\r\n const [appPlatform, setAppPlatform] = useState(wizardContext.goalContext.ApplicationPlatform);\r\n const [appId, setAppId] = useState(wizardContext.goalContext.ApplicationStoreId);\r\n const [appIdErrorMessage, setAppIdErrorMessage] = useState('');\r\n\r\n const title = useMemo(() => (appPlatform === 'Android' ? i18n.getString(_TL_('Package Name')) : i18n.getString(_TL_('App ID'))), [appPlatform, i18n]);\r\n const appPlatformOptions = useMemo(() => getAppPlatformOptions(i18n), [i18n]);\r\n\r\n const appIdPlaceholders = useMemo(() => {\r\n const map = {};\r\n _.each(appPlatformOptions, (item) => {\r\n map[item.key] = item.placeholder;\r\n });\r\n return map;\r\n }, [appPlatformOptions]);\r\n\r\n const getAppIdErrorMessage = useCallback((value) => {\r\n if (_.isEmpty(value) || !validateString(value)) {\r\n return i18n.getString(_TL_('Enter a valid app ID or package name.'));\r\n }\r\n return '';\r\n }, [i18n]);\r\n\r\n useEffect(() => {\r\n if (showError) {\r\n setAppIdErrorMessage(getAppIdErrorMessage(appId));\r\n resetShowError();\r\n }\r\n }, [appId, getAppIdErrorMessage, resetShowError, showError]);\r\n\r\n const onChangeAppPlatformSelection = useCallback((event, option) => {\r\n setAppPlatform(option.key);\r\n updateGoalProps({ ApplicationPlatform: option.key });\r\n }, [updateGoalProps]);\r\n\r\n const onChangeAppId = useCallback((event, value) => {\r\n setAppId(value);\r\n setAppIdErrorMessage(getAppIdErrorMessage(value));\r\n updateGoalProps({ ApplicationStoreId: _.isEmpty(appIdErrorMessage) ? value : undefined });\r\n }, [appIdErrorMessage, getAppIdErrorMessage, updateGoalProps]);\r\n\r\n return (\r\n \r\n {i18n.getString(cali18n('Event_Goal_Settings_Custom_Event'))}\r\n
\r\n {i18n.getString(cali18n('Event_Goal_Settings_Event_Param_Instruction'))}\r\n
\r\n {i18n.getString(_TL_('Action'))}\r\n
\r\n \r\n
}\r\n {actionErrMessage}
\r\n\r\n {i18n.getString(_TL_('Category'))}\r\n
\r\n \r\n
}\r\n {categoryErrMessage}
\r\n\r\n {i18n.getString(_TL_('Label'))}\r\n
\r\n \r\n
}\r\n {labelErrMessage}
\r\n\r\n {i18n.getString(_TL_('Value'))}\r\n
\r\n {addAnotherParamOptions.length > 0 && \r\n
}\r\n {valueErrMessage}
\r\n\r\n
}\r\n {errorMsg}
\r\n\r\n
\r\n );\r\n};\r\n\r\nAppInstallSettingUnstyled.propTypes = {\r\n classes: PropTypes.shape(_.mapObject(\r\n getStepStyles(),\r\n _.constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n updateGoalProps: PropTypes.func.isRequired,\r\n showError: PropTypes.bool.isRequired,\r\n resetShowError: PropTypes.func.isRequired,\r\n};\r\n\r\nexport const AppInstallSetting = withDefaultStyles(AppInstallSettingUnstyled, getStepStyles);\r\n","import React, { useContext, useState, useCallback, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport { TextField } from '@fluentui/react';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { HelpButton } from '@bingads-webui-react/help-popup';\r\nimport { GoalCreationWizardContext } from '../goal-creation-wizard-context';\r\nimport { getStepStyles } from '../../../conversion-wizard-components/src/shared-styles/shared-content-style';\r\nimport { validateNumeric, validateRange } from '../shared/validation-util';\r\n\r\nconst input2Duration = timeObj => ((parseInt(timeObj.hour, 10) * 60) + (parseInt(timeObj.min, 10) * 60) + parseInt(timeObj.sec, 10));\r\n\r\nconst duration2Input = (timeInSec) => {\r\n const timeObj = {};\r\n timeObj.sec = timeInSec % 60;\r\n const remainingMin = parseInt(timeInSec / 60, 10);\r\n timeObj.min = remainingMin % 60;\r\n timeObj.hour = parseInt(remainingMin / 60, 10);\r\n\r\n return timeObj;\r\n};\r\n\r\nconst DurationSettingUnstyled = (props) => {\r\n const {\r\n classes,\r\n updateGoalProps,\r\n showError,\r\n resetShowError,\r\n } = props;\r\n const i18n = useContext(I18nContext);\r\n const wizardContext = useContext(GoalCreationWizardContext);\r\n const [timeObj, setTimeObj] = useState(duration2Input(_.isUndefined(wizardContext.goalContext.Duration) ? 0 : wizardContext.goalContext.Duration));\r\n const [shouldShowError, setShouldShowError] = useState(false);\r\n\r\n useEffect(() => {\r\n if (showError) {\r\n resetShowError();\r\n }\r\n }, [resetShowError, showError]);\r\n\r\n const onChangeTimeInput = useCallback((event) => {\r\n const timeKey = event.target.title;\r\n const inputValue = event.target.value;\r\n\r\n if (validateNumeric(inputValue) || inputValue.length === 0) {\r\n const timeValue = parseInt(inputValue, 10);\r\n const updatedObj = { [timeKey]: timeValue };\r\n\r\n setTimeObj({ ...timeObj, ...updatedObj });\r\n\r\n const updatedTime = input2Duration({ ...timeObj, ...updatedObj });\r\n if (validateRange(timeKey, timeValue)) {\r\n setShouldShowError(false);\r\n updateGoalProps({ Duration: updatedTime });\r\n } else {\r\n setShouldShowError(true);\r\n updateGoalProps({ Duration: undefined });\r\n }\r\n }\r\n }, [timeObj, updateGoalProps]);\r\n\r\n return (\r\n \r\n {i18n.getString(_TL_('App platform'))}\r\n
\r\n \r\n
\r\n \r\n {title}\r\n
\r\n \r\n
\r\n {!_.isEmpty(appIdErrorMessage) && (\r\n \r\n
\r\n )}\r\n {appIdErrorMessage}
\r\n\r\n
\r\n );\r\n};\r\n\r\nDurationSettingUnstyled.propTypes = {\r\n classes: PropTypes.shape(_.mapObject(\r\n getStepStyles(),\r\n _.constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n updateGoalProps: PropTypes.func.isRequired,\r\n showError: PropTypes.bool.isRequired,\r\n resetShowError: PropTypes.func.isRequired,\r\n};\r\n\r\nexport const DurationSetting = withDefaultStyles(DurationSettingUnstyled, getStepStyles);\r\n","import React, { useCallback, useContext, useState, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport { TextField } from '@fluentui/react';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { HelpButton } from '@bingads-webui-react/help-popup';\r\nimport { GoalCreationWizardContext } from '../goal-creation-wizard-context';\r\nimport { getStepStyles } from '../../../conversion-wizard-components/src/shared-styles/shared-content-style';\r\nimport { validateNumeric } from '../shared/validation-util';\r\n\r\nconst PageViewSettingUnstyled = (props) => {\r\n const {\r\n classes,\r\n updateGoalProps,\r\n showError,\r\n resetShowError,\r\n } = props;\r\n const i18n = useContext(I18nContext);\r\n const wizardContext = useContext(GoalCreationWizardContext);\r\n const [pageviewCount, setPageviewCount] = useState(wizardContext.goalContext.PageViews);\r\n const [pageviewErrorMsg, setPageviewErrorMsg] = useState('');\r\n\r\n const getErrorMessage = useCallback((value) => {\r\n if (_.isUndefined(value) || value.length === 0) {\r\n return i18n.getString(_TL_('Enter a page number'));\r\n }\r\n const parsedValue = parseInt(value, 10);\r\n if (_.isNaN(parsedValue) || parsedValue > 9999) {\r\n return i18n.getString(_TL_('Enter a valid page number between 0 and 9999'));\r\n }\r\n return '';\r\n }, [i18n]);\r\n\r\n const onChangePageViewCount = useCallback((event, value) => {\r\n if (validateNumeric(value) || value.length === 0) {\r\n setPageviewCount(value);\r\n setPageviewErrorMsg(getErrorMessage(value));\r\n const parsedValue = parseInt(value, 10);\r\n updateGoalProps({ PageViews: _.isNaN(parsedValue) ? undefined : parsedValue });\r\n }\r\n }, [getErrorMessage, updateGoalProps]);\r\n\r\n useEffect(() => {\r\n if (showError) {\r\n setPageviewErrorMsg(getErrorMessage(pageviewCount));\r\n resetShowError();\r\n }\r\n }, [getErrorMessage, pageviewCount, resetShowError, showError]);\r\n\r\n return (\r\n \r\n {i18n.getString(_TL_('Duration'))}\r\n
\r\n {i18n.getString(_TL_('Greater than'))}
\r\n\r\n
\r\n {shouldShowError &&\r\n \r\n
\r\n \r\n
\r\n {i18n.getString(_TL_('Hour'))}
\r\n \r\n
\r\n {i18n.getString(_TL_('Min'))}
\r\n \r\n
\r\n {i18n.getString(_TL_('Sec'))}
\r\n \r\n
}\r\n {i18n.getString(_TL_('Enter a valid duration period.'))}
\r\n\r\n
\r\n );\r\n};\r\n\r\nPageViewSettingUnstyled.propTypes = {\r\n classes: PropTypes.shape(_.mapObject(\r\n getStepStyles(),\r\n _.constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n updateGoalProps: PropTypes.func.isRequired,\r\n showError: PropTypes.bool.isRequired,\r\n resetShowError: PropTypes.func.isRequired,\r\n};\r\n\r\nexport const PageViewSetting = withDefaultStyles(PageViewSettingUnstyled, getStepStyles);\r\n","import React, { useState, useCallback, useContext, useMemo, useRef, useEffect } from 'react';\r\nimport { TextField, DefaultButton } from '@fluentui/react';\r\nimport PropTypes from 'prop-types';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { ReactTemplate } from '@bingads-webui-react/react-template';\r\nimport { LearnMoreLink } from '@bingads-webui-campaign-react/help';\r\nimport { withScope } from '@bingads-webui-react/scope-service';\r\nimport { withPermissions } from '@bingads-webui-react/hoc-with-permissions';\r\nimport _ from 'underscore';\r\nimport { v4 as generateGuid } from 'uuid';\r\nimport classNames from 'classnames';\r\nimport { getCurrencyOptions } from '@bingads-webui-campaign-react/conversion-utils';\r\nimport { getStepStyles } from '../../../conversion-wizard-components/src/shared-styles/shared-content-style';\r\nimport { Badge } from '../../../conversion-wizard-components/src/clarity-event-setup/badge';\r\n\r\nconst styles = (components, { palette = {} }) => ({\r\n eventTrackingContainer: {\r\n display: 'flex',\r\n marginBottom: 20,\r\n marginTop: 20,\r\n },\r\n eventTrackingViewContainer: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n marginTop: 6,\r\n },\r\n websiteUrlText: {\r\n fontSize: '12px',\r\n },\r\n websiteURLTextField: {\r\n width: '418px',\r\n },\r\n redoTrackingViewContainer: {\r\n width: '418px',\r\n },\r\n badgesContainer: {\r\n display: 'flex',\r\n width: '235px',\r\n justifyContent: 'space-between',\r\n marginTop: '5px',\r\n },\r\n eventTrackingButton: {\r\n marginLeft: '5px',\r\n },\r\n skipForNowContainer: {\r\n alignSelf: 'center',\r\n marginLeft: '18px',\r\n },\r\n clarityEventSetup: {\r\n '& .btn-link': {\r\n color: palette.themePrimary,\r\n },\r\n },\r\n eventTrackingDescription: {\r\n marginBottom: 12,\r\n },\r\n});\r\nconst MESSAGES = {\r\n INIT: 'INIT_CLARITY_EVENT_SETUP',\r\n ACK: 'ACK_INIT_CLARITY_EVENT_SETUP',\r\n SAVE_EVENT: 'SAVE_EVENT_DEFINITION',\r\n ACK_SAVE_EVENT: 'ACK_SAVE_EVENT_DEFINITION',\r\n REINIT: 'REINIT_CLARITY_EVENT_SETUP',\r\n ACK_REINIT: 'ACK_REINIT_CLARITY_EVENT_SETUP',\r\n END_SESSION: 'END_CLARITY_EVENT_SETUP_SESSION',\r\n};\r\nconst validateUrl = (url) => {\r\n if (!url || url.trim().length === 0) {\r\n return false;\r\n }\r\n let parsedUrl;\r\n try {\r\n parsedUrl = new URL(url);\r\n } catch (ex) {\r\n return false;\r\n }\r\n return parsedUrl.protocol.toLowerCase() === 'http:' || parsedUrl.protocol.toLowerCase() === 'https:';\r\n};\r\nexport const STAGES = {\r\n NOTCONNECTED: 0,\r\n STARTINIT: 1,\r\n WAITINGFORACK: 2,\r\n CONNECTED: 3,\r\n SYNCINGEVENTS: 4,\r\n TRACKINGEVENT: 5,\r\n};\r\nconst validateProp = (props, dependency, expectedProperties) => {\r\n const dep = props[dependency];\r\n expectedProperties.forEach((key) => {\r\n if (!dep[key]) {\r\n throw new Error(`Expected parameter ${key} is not present in dependency ${dependency}`);\r\n }\r\n });\r\n};\r\n\r\nconst getUrlObjectWithDebugParameter = (url) => {\r\n const urlObj = new URL(url);\r\n urlObj.searchParams.set('bat_debug', new Date().getTime());\r\n return urlObj;\r\n};\r\n\r\nconst extractButtonDefinition = (clarityEventInfo) => {\r\n if (clarityEventInfo.Trigger.EventType === 'click') {\r\n return clarityEventInfo.Trigger.EventTarget;\r\n }\r\n return null;\r\n};\r\n\r\nconst extractRevenueDefinition = (clarityEventInfo) => {\r\n const event = _.find(clarityEventInfo.Data, e => e.Name === 'value');\r\n if (event) {\r\n return event.Value;\r\n }\r\n return null;\r\n};\r\n\r\nconst UnstyledClarityEventSetting = (props) => {\r\n const {\r\n classes, scope, wizardContext, updateGoalProps,\r\n } = props;\r\n\r\n const [currentStage, setCurrentStage] = useState(STAGES.TRACKINGEVENT);\r\n\r\n // Validate shared prop between ESC and Expert mode here.\r\n validateProp(props, 'wizardContext', ['cid', 'aid', 'goalContext', 'logActivity']);\r\n\r\n const i18n = useContext(I18nContext);\r\n const useMockListener = scope && scope.values && scope.values.useMockListener;\r\n const { goalContext, logActivity } = wizardContext;\r\n const [websiteUrl, setWebsiteUrl] = useState(goalContext.ClarityEventInfo.SetupUrl);\r\n const [errorMsg, setErrorMsg] = useState(null);\r\n // need ref to read the state value in add event listener callback (need to check if there is a cleaner solution)\r\n const currentTimer = useRef(-1);\r\n const closeTimer = useRef(-1);\r\n const connectionTimeout = useRef(-1);\r\n const currentAbortController = useRef(null);\r\n const sessionId = useRef('');\r\n\r\n const [currentTab, setCurrentTab] = useState(null);\r\n const tagName = goalContext.TagName;\r\n const tagId = goalContext.ClarityEventInfo.UetTagId;\r\n const receivedACK = useRef(false);\r\n\r\n // single object since we should have one event per goal\r\n const [pageEvent, setPageEvent] = useState({\r\n RevenueDefinition: extractRevenueDefinition(goalContext.ClarityEventInfo),\r\n ButtonDefinition: extractButtonDefinition(goalContext.ClarityEventInfo),\r\n });\r\n const messageParams = {\r\n TagId: tagId,\r\n Goal: {\r\n Name: goalContext.Name,\r\n Type: 'EventGoal',\r\n ValueType: goalContext.GoalValueType,\r\n Operator: goalContext.Operator,\r\n UrlString: goalContext.UrlString,\r\n },\r\n CurrencyCode: goalContext.CurrencyCode,\r\n CurrencyOptions: getCurrencyOptions(i18n),\r\n aid: wizardContext.aid.toString(),\r\n cid: wizardContext.cid.toString(),\r\n PageTrackingId: wizardContext.serverContext.PageTrackingId.toString(),\r\n UserId: wizardContext.serverContext.CurrentUser.Id.toString(),\r\n };\r\n const tagNameModel = { tagName: () => ({tagName}), bold: text => ({text}) };\r\n\r\n const errorMessages = useMemo(() => ({\r\n InvalidUrl: i18n.getString(_TL_('Please input a valid URL starting with http:// or https://')),\r\n NewTabError: i18n.getString(_TL_('Could not open new page.')),\r\n CannotDetectTagError: (\r\n \r\n {i18n.getString(_TL_('Pages per visit'))}\r\n
\r\n {i18n.getString(_TL_('Greater than'))}
\r\n\r\n
\r\n )}\r\n {pageviewErrorMsg}
\r\n\r\n
\r\n Your event tracking is all set up!\r\n
\r\n );\r\n }, [classes, i18n, pageEvent, websiteUrl]);\r\n\r\n const eventTrackingView = useCallback(() => {\r\n if (currentStage === STAGES.TRACKINGEVENT) {\r\n return (\r\n {websiteUrl}
\r\n\r\n {eventTracking}\r\n {revenueTracking}\r\n
\r\n\r\n \r\n
\r\n );\r\n};\r\nUnstyledClarityEventSetting.propTypes = {\r\n classes: PropTypes.shape(_.mapObject(\r\n getStepStyles(),\r\n _.constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n scope: PropTypes.shape({\r\n values: PropTypes.shape({ useMockListener: PropTypes.string }).isRequired,\r\n }).isRequired,\r\n wizardContext: PropTypes.shape({\r\n cid: PropTypes.string.isRequired,\r\n aid: PropTypes.string.isRequired,\r\n goalContext: PropTypes.shape({\r\n tags: PropTypes.arrayOf(PropTypes.shape({ Id: PropTypes.string })).isRequired,\r\n Tag: PropTypes.shape({ Id: PropTypes.string }).isRequired,\r\n Name: PropTypes.string,\r\n Type: PropTypes.string,\r\n ValueType: PropTypes.string,\r\n Operator: PropTypes.string,\r\n UrlString: PropTypes.string,\r\n CurrencyCode: PropTypes.string,\r\n Action: PropTypes.string,\r\n Id: PropTypes.string,\r\n GoalValueType: PropTypes.string,\r\n ClarityEventInfo: PropTypes.shape({\r\n SetupUrl: PropTypes.string,\r\n UetTagId: PropTypes.string,\r\n }),\r\n TagName: PropTypes.string,\r\n }),\r\n logActivity: PropTypes.func.isRequired,\r\n serverContext: PropTypes.shape({\r\n PageTrackingId: PropTypes.string.isRequired,\r\n CurrentUser: PropTypes.shape({ Id: PropTypes.string.isRequired }).isRequired,\r\n }).isRequired,\r\n }).isRequired,\r\n updateGoalProps: PropTypes.func.isRequired,\r\n};\r\n\r\nexport const ClarityEventSetting = withPermissions(withScope(withDefaultStyles(UnstyledClarityEventSetting, styles)));\r\n","import { DestinationUrlSetting } from './destination-url-setting';\r\nimport { EventParamSetting } from './event-param-setting';\r\nimport { AppInstallSetting } from './app-install-setting';\r\nimport { DurationSetting } from './duration-setting';\r\nimport { PageViewSetting } from './pageview-setting';\r\nimport { ClarityEventSetting } from './clarity-event-setting';\r\n\r\nconst noViewGoals = ['InStoreTransactionGoal', 'OfflineConversionGoal', 'ProductConversionGoal', 'InStoreVisitGoal'];\r\nconst claritySetupHiddenSettingsGoals = ['EventGoal'];\r\nconst specificViewGoals = {\r\n DestinationGoal: DestinationUrlSetting,\r\n EventGoal: EventParamSetting,\r\n ApplicationInstallGoal: AppInstallSetting,\r\n DurationGoal: DurationSetting,\r\n PageViewsPerVisitGoal: PageViewSetting,\r\n ClarityEventGoal: ClarityEventSetting,\r\n};\r\n\r\nconst EmptyReactView = () => null;\r\n\r\nexport const getSpecificGoalSettings = (goalType, isClaritySetupEnabled) => {\r\n if (noViewGoals.indexOf(goalType) > -1) {\r\n return EmptyReactView;\r\n }\r\n if (isClaritySetupEnabled && claritySetupHiddenSettingsGoals.indexOf(goalType) > -1) {\r\n return EmptyReactView;\r\n }\r\n\r\n return specificViewGoals[goalType];\r\n};\r\n","/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\r\n/* eslint-disable react/jsx-no-target-blank */\r\nimport React, { useContext, useState, useCallback, useMemo, useEffect, useRef } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport _ from 'underscore';\r\nimport { Dropdown, TextField } from '@fluentui/react';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { HelpButton } from '@bingads-webui-react/help-popup';\r\nimport { getCurrencyOptions } from '@bingads-webui-campaign-react/conversion-utils';\r\n\r\n\r\nimport { getStepStyles } from '@bingads-webui-campaign-react/conversion-wizard-components';\r\nimport { getSpecificGoalSettings } from '../../components/component-util';\r\nimport { getRevenueOptions, getBoostRevenueOptions } from '../../components/goal-creation-options';\r\nimport { validateDecimal, validateString } from '../../shared/validation-util';\r\nimport { LearnMore } from '../../../../conversion-wizard-components/src/learn-more/learn-more';\r\nimport { GoalCreationWizardContext } from '../../goal-creation-wizard-context';\r\n\r\nconst SpecificGoalSettingsViewUnstyled = (props) => {\r\n const {\r\n classes,\r\n goalObj,\r\n updateGoalContext,\r\n selectedGoalType,\r\n showError,\r\n resetShowError,\r\n permissions,\r\n } = props;\r\n\r\n const variantRevenueGoalTypes = ['DestinationGoal', 'EventGoal', 'ProductConversionGoal', 'InStoreTransactionGoal', 'OfflineConversionGoal', 'ClarityEventGoal'];\r\n\r\n const i18n = useContext(I18nContext);\r\n const wizardContext = useContext(GoalCreationWizardContext);\r\n const {\r\n Name,\r\n GoalValueType,\r\n CurrencyCode,\r\n GoalValue,\r\n } = goalObj;\r\n\r\n const currencyOptions = useMemo(() => getCurrencyOptions(i18n), [i18n]);\r\n const revenueOptions = useMemo(() => getRevenueOptions(i18n), [i18n]);\r\n const boostRevenueOptions = useMemo(() => getBoostRevenueOptions(i18n), [i18n]);\r\n // Name, Revenue are required.\r\n const [goalName, setGoalName] = useState(Name);\r\n const [revenue, setRevenue] = useState(_.isUndefined(GoalValueType) ? undefined : GoalValueType);\r\n // CurrencyCode, GoalValue are required if !NoValue\r\n const [isValueAvailable, setIsValueAvailable] = useState(GoalValueType === 'VariantValue' || GoalValueType === 'FixedValue');\r\n const [displayCurrency, setDisplayCurrency] = useState(!CurrencyCode ? 'USD' : CurrencyCode);\r\n const [goalValue, setGoalValue] = useState(_.isUndefined(GoalValue) || _.isNull(GoalValue) ? 1 : GoalValue); // GoalValue is 0 when editing a previously NoValue goal.\r\n\r\n const variantRevenueWarning = _TL_('You\\'ll need to customize your UET tag tracking code to report variable revenue.');\r\n const clarityEventWarning = _TL_('Since this revenue type does not need extra code for configuration, we\\'ll remove the revenue values that you previously set up in code-free mode.');\r\n const noValueWarning = _TL_('Use a conversion value if you want to track and optimize your revenue.');\r\n\r\n // error message control\r\n const [nameErrorMsg, setNameErrorMsg] = useState('');\r\n const [revenueErrorMsg, setRevenueErrorMsg] = useState('');\r\n const [valueErrorMsg, setValueErrorMsg] = useState('');\r\n\r\n const [clarityEventWarningMsg, setClarityEventWarningMsg] = useState('');\r\n\r\n const getNameErrorMessage = useCallback((value) => {\r\n if (_.isUndefined(value) || value.trim().length === 0 || !validateString(value)) {\r\n return i18n.getString(_TL_('Enter a valid goal name.'));\r\n }\r\n if (value.trim().length >= 100) {\r\n return i18n.getString(_TL_('Input value length must be less than 100.'));\r\n }\r\n return '';\r\n }, [i18n]);\r\n\r\n const getRevenueErrorMessage = useCallback((revenueOption) => {\r\n if (_.isUndefined(revenueOption)) {\r\n return i18n.getString(_TL_('Select an option for revenue value.'));\r\n }\r\n return '';\r\n }, [i18n]);\r\n\r\n const getValueErrorMessage = useCallback((value) => {\r\n if (_.isUndefined(value) || value.length === 0) {\r\n return i18n.getString(_TL_('Enter a goal value'));\r\n } else if (!validateDecimal(value)) {\r\n return i18n.getString(_TL_('Enter a valid goal value'));\r\n }\r\n return '';\r\n }, [i18n]);\r\n\r\n const getClarityEventWarningMessage = useCallback((revenueOption) => {\r\n const isClarityTagSetupAllowed = wizardContext.permissions && _.result(wizardContext.permissions.dynamic, 'IsClarityTagSetupAllowed');\r\n const isClarityEventDefined = isClarityTagSetupAllowed && goalObj.ClarityEventDefinitionId;\r\n if (isClarityEventDefined && wizardContext.goalData.GoalValueType === 'VariantValue' && revenueOption !== 'VariantValue') {\r\n return clarityEventWarning;\r\n }\r\n return '';\r\n }, [clarityEventWarning, goalObj.ClarityEventDefinitionId, wizardContext.goalData.GoalValueType, wizardContext.permissions]);\r\n\r\n const nameErrorRef = useRef(null);\r\n const revenueErrorRef = useRef(null);\r\n const valueErrorRef = useRef(null);\r\n const clarityEventWarningRef = useRef(null);\r\n\r\n useEffect(() => {\r\n if (showError) {\r\n setNameErrorMsg(getNameErrorMessage(goalName));\r\n setRevenueErrorMsg(getRevenueErrorMessage(revenue));\r\n setValueErrorMsg(getValueErrorMessage(goalValue));\r\n }\r\n setClarityEventWarningMsg(getClarityEventWarningMessage(revenue));\r\n\r\n // Set focus to the first error message if it exists\r\n if (!_.isEmpty(nameErrorMsg)) {\r\n nameErrorRef.current.focus();\r\n } else if (!_.isEmpty(revenueErrorMsg)) {\r\n revenueErrorRef.current.focus();\r\n } else if (!_.isEmpty(valueErrorMsg)) {\r\n valueErrorRef.current.focus();\r\n } else if (!_.isEmpty(clarityEventWarningMsg)) {\r\n clarityEventWarningRef.current.focus();\r\n }\r\n }, [clarityEventWarningMsg, getClarityEventWarningMessage, getNameErrorMessage, getRevenueErrorMessage, getValueErrorMessage, goalName, goalValue, nameErrorMsg, resetShowError, revenue, revenueErrorMsg, showError, valueErrorMsg]);\r\n\r\n const onChangeNameInput = useCallback((event, value) => {\r\n // Replace tabs in the goal name with spaces. Tabs are not supported and will throw GoalNameHasInvalidCharacters error on MT.\r\n const nameValue = value.replace(/\\t/g, ' ');\r\n setGoalName(nameValue);\r\n\r\n const errorMessage = getNameErrorMessage(nameValue);\r\n setNameErrorMsg(errorMessage);\r\n updateGoalContext({ Name: _.isEmpty(errorMessage) ? nameValue.trim() : undefined });\r\n }, [updateGoalContext, getNameErrorMessage]);\r\n\r\n // validate numeric range, not empty\r\n const onChangeGoalValueInput = useCallback((event, value) => {\r\n setGoalValue(value);\r\n setValueErrorMsg(getValueErrorMessage(value));\r\n const updatedValue = parseFloat(value);\r\n updateGoalContext({ GoalValue: _.isNaN(updatedValue) || !validateDecimal(value) ? undefined : updatedValue });\r\n }, [getValueErrorMessage, updateGoalContext]);\r\n\r\n const onChangeRevenueSelection = useCallback((event, option) => {\r\n setRevenue(option.key);\r\n setRevenueErrorMsg('');\r\n const currentGoalValue = parseFloat(goalValue);\r\n updateGoalContext({ GoalValue: _.isNaN(currentGoalValue) || !_.isEmpty(valueErrorMsg) ? undefined : currentGoalValue, CurrencyCode: displayCurrency, GoalValueType: option.key }); // submit goal value, currecy code along with value type\r\n if (option.key === 'FixedValue' || option.key === 'VariantValue') {\r\n setIsValueAvailable(true);\r\n } else {\r\n setIsValueAvailable(false);\r\n }\r\n }, [displayCurrency, goalValue, updateGoalContext, valueErrorMsg]);\r\n\r\n const onChangeCurrencySelection = useCallback((event, option) => {\r\n setDisplayCurrency(option.key);\r\n updateGoalContext({ CurrencyCode: option.key });\r\n }, [updateGoalContext]);\r\n\r\n const onUpdateGoalProps = useCallback((updatedProp) => {\r\n updateGoalContext(updatedProp);\r\n }, [updateGoalContext]);\r\n\r\n const isClaritySetupEnabled = permissions && _.result(permissions.dynamic, 'IsClarityTagSetupAllowed');\r\n const SpecificSettingView = getSpecificGoalSettings(selectedGoalType, isClaritySetupEnabled);\r\n const isBoostLTVEnabled = permissions && _.result(permissions, 'IsAmplifyEnabled') && _.result(permissions.dynamic, 'BoostLTV');\r\n\r\n const revenueDropdownOptions = useMemo(() => {\r\n const options = [];\r\n _.each(revenueOptions, (item) => {\r\n if (item.key !== 'VariantValue') {\r\n options.push(item);\r\n } else if (variantRevenueGoalTypes.indexOf(selectedGoalType) > -1) {\r\n options.push(item);\r\n }\r\n });\r\n\r\n if (isBoostLTVEnabled) {\r\n return boostRevenueOptions;\r\n }\r\n return options;\r\n }, [revenueOptions, isBoostLTVEnabled, variantRevenueGoalTypes, selectedGoalType, boostRevenueOptions]);\r\n\r\n const isCurrencyAvailable = useMemo(() => (\r\n variantRevenueGoalTypes.indexOf(selectedGoalType) > -1 &&\r\n !isBoostLTVEnabled\r\n ), [isBoostLTVEnabled, selectedGoalType, variantRevenueGoalTypes]);\r\n\r\n return (\r\n \r\n
\r\n {errorMsg &&\r\n \r\n \r\n {i18n.getString(_TL_('Tracked Event'))}\r\n \r\n
\r\n \r\n
\r\n {currentStage !== STAGES.TRACKINGEVENT &&\r\n \r\n {i18n.getString(_TL_('Enter the URL of the website you want to track'))}\r\n \r\n }\r\n \r\n {eventTrackingView()}\r\n
\r\n \r\n \r\n \r\n {errorMsg}\r\n \r\n
}\r\n \r\n
\r\n );\r\n};\r\n\r\nSpecificGoalSettingsViewUnstyled.propTypes = {\r\n classes: PropTypes.shape(_.mapObject(\r\n getStepStyles(),\r\n _.constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n goalObj: PropTypes.shape({}).isRequired,\r\n updateGoalContext: PropTypes.func.isRequired,\r\n selectedGoalType: PropTypes.string.isRequired,\r\n showError: PropTypes.bool.isRequired,\r\n resetShowError: PropTypes.func.isRequired,\r\n permissions: PropTypes.shape({\r\n dynamic: PropTypes.shape({}),\r\n }).isRequired,\r\n};\r\n\r\nexport const SpecificGoalSettingsView = withDefaultStyles(SpecificGoalSettingsViewUnstyled, getStepStyles);\r\n","export const DialogTexts = {\r\n Title: _TL_('Opting out may impact your auto-bidding performance'),\r\n Body: _TL_('If you use an auto-bidding strategy, opting out will result in these conversions no longer factoring into your bid strategy’s calculations. The conversion data for this goal will now only appear in the All conv. columns in the data table.'),\r\n LearnMore: _TL_('Learn more'),\r\n Primary: _TL_('Okay'),\r\n Secondary: _TL_('Cancel'),\r\n};\r\n","import PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport React, { useCallback } from 'react';\r\nimport { withI18nConsumer } from '@bingads-webui-react/i18n-context';\r\nimport { Link, PrimaryButton, DefaultButton, Dialog, DialogType, DialogFooter } from '@fluentui/react';\r\nimport { DialogTexts } from './text';\r\n\r\nfunction DialogContent(props) {\r\n const {\r\n primaryButtonCallback,\r\n secondaryButtonCallback,\r\n i18n,\r\n } = props;\r\n\r\n const titleText = i18n.getString(DialogTexts.Title);\r\n const bodyText = i18n.getString(DialogTexts.Body);\r\n const learnMoreText = i18n.getString(DialogTexts.LearnMore);\r\n const primaryText = i18n.getString(DialogTexts.Primary);\r\n const secondaryText = i18n.getString(DialogTexts.Secondary);\r\n\r\n const onPrimaryButtonClick = useCallback(() => primaryButtonCallback(), [primaryButtonCallback]);\r\n const onSecondaryButtonClick = useCallback(() => secondaryButtonCallback(), [secondaryButtonCallback]);\r\n\r\n return (\r\n {i18n.getString(_TL_('Goal settings'))}
\r\n {`${i18n.getString(_TL_('Name'))} *`}\r\n \r\n
\r\n \r\n {!_.isEmpty(nameErrorMsg) &&\r\n
\r\n \r\n {nameErrorMsg}\r\n
}\r\n\r\n {isBoostLTVEnabled ?\r\n (\r\n
\r\n {!_.isEmpty(clarityEventWarningMsg) && (\r\n \r\n {`${i18n.getString(_TL_('LTV'))} *`}\r\n
) :\r\n (\r\n \r\n {`${i18n.getString(_TL_('Revenue'))} *`}\r\n
\r\n )\r\n }\r\n \r\n
\r\n {isValueAvailable && (\r\n \r\n
\r\n )}\r\n {isValueAvailable && !_.isEmpty(valueErrorMsg) && (\r\n \r\n
\r\n )}\r\n {valueErrorMsg}
\r\n\r\n {!_.isEmpty(revenueErrorMsg) &&
\r\n {revenueErrorMsg}
}\r\n\r\n \r\n \r\n {i18n.getString(clarityEventWarningMsg)}\r\n \r\n
\r\n )}\r\n {revenue === 'VariantValue' && (\r\n \r\n \r\n \r\n \r\n {i18n.getString(variantRevenueWarning)}\r\n \r\n \r\n {i18n.getString(_TL_('See examples'))}\r\n \r\n \r\n
\r\n )}\r\n {_.isEmpty(clarityEventWarningMsg) && revenue === 'NoValue' && (\r\n \r\n \r\n \r\n {i18n.getString(noValueWarning)}\r\n \r\n
\r\n )}\r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nDialogContent.defaultProps = {\r\n primaryButtonCallback: _.noop,\r\n secondaryButtonCallback: _.noop,\r\n};\r\nDialogContent.propTypes = {\r\n primaryButtonCallback: PropTypes.func,\r\n secondaryButtonCallback: PropTypes.func,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n};\r\n\r\n// a blocking non-draggable fabric dialog to confirm user choice for not including conversion dialog\r\nfunction UncheckConversionDialogRaw(props) {\r\n const {\r\n i18n,\r\n shouldShowDialog,\r\n checkIncludeCallback,\r\n uncheckIncludeCallback,\r\n } = props;\r\n\r\n const onDismiss = useCallback(() => {\r\n uncheckIncludeCallback();\r\n }, [uncheckIncludeCallback]);\r\n\r\n const primaryButtonCallback = useCallback(() => {\r\n checkIncludeCallback();\r\n }, [checkIncludeCallback]);\r\n\r\n const secondaryButtonCallback = useCallback(() => {\r\n uncheckIncludeCallback();\r\n }, [uncheckIncludeCallback]);\r\n\r\n return (\r\n \r\n
\r\n {titleText}
\r\n\r\n {`${bodyText} `}\r\n {learnMoreText}\r\n
\r\n \r\n
\r\n );\r\n }, [hideHourMinute, timeObj.hour, timeObj.min, onChangeTimeInput, label, i18n]);\r\n\r\n return (\r\n \r\n
\r\n {i18n.getString(_TL_('Hour'))}
\r\n \r\n
\r\n {i18n.getString(_TL_('Min'))}
\r\n \r\n
\r\n );\r\n};\r\n\r\nConversionWindowUnstyled.propTypes = {\r\n classes: PropTypes.shape(_.mapObject(\r\n getStepStyles(),\r\n _.constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n updateWindowProp: PropTypes.func.isRequired,\r\n conversionWindowInMin: PropTypes.number,\r\n defaultValue: PropTypes.number.isRequired,\r\n maxWindowInMin: PropTypes.number.isRequired,\r\n minWindowInMin: PropTypes.number,\r\n hideHourMinute: PropTypes.bool,\r\n label: PropTypes.string,\r\n logActivity: PropTypes.func,\r\n};\r\n\r\nConversionWindowUnstyled.defaultProps = {\r\n conversionWindowInMin: undefined,\r\n minWindowInMin: 0, // conversion window and viewthrough conversion window should larger than 0\r\n hideHourMinute: false,\r\n label: '',\r\n logActivity: {\r\n trace: _.noop,\r\n error: _.noop,\r\n },\r\n};\r\n\r\nexport const ConversionWindow = withDefaultStyles(ConversionWindowUnstyled, getStepStyles);\r\n","import React, { useCallback, useContext, useMemo, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Button, Dialog, DialogActions, DialogBody, DialogContent, DialogSurface, DialogTitle, DialogTrigger, Image, Text, makeStyles, mergeClasses, shorthands, typographyStyles, useArrowNavigationGroup } from '@fluentui/react-components';\r\nimport { Dismiss24Regular } from '@fluentui/react-icons';\r\n\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { SelectableCard } from '@bingads-webui-fluent-component/selectable-card';\r\n\r\nimport microsoft from '../assets/microsoft.png';\r\nimport linkedin from '../assets/linkedin.png';\r\n\r\nconst useNetworkCardsStyles = makeStyles({\r\n root: {\r\n display: 'flex',\r\n marginBottom: '16px',\r\n ...shorthands.gap('16px'),\r\n },\r\n card: {\r\n width: '305px',\r\n height: '126px',\r\n },\r\n content: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n ...shorthands.gap('8px'),\r\n },\r\n title: {\r\n display: 'block',\r\n ...typographyStyles.body1Strong,\r\n },\r\n description: {\r\n display: 'block',\r\n ...typographyStyles.caption1,\r\n },\r\n icon: {\r\n width: '24px',\r\n height: '24px',\r\n },\r\n});\r\n\r\nconst Networks = [\r\n {\r\n id: 'microsoft',\r\n title: _TL_('Microsoft Advertising Network'),\r\n description: _TL_('Set up a conversion goal as you typically would.'),\r\n icon: microsoft,\r\n },\r\n {\r\n id: 'linkedin',\r\n title: _TL_('Compatible with LinkedIn'),\r\n description: _TL_('Configure a conversion goal that is compatible with LinkedIn campaigns.'),\r\n icon: linkedin,\r\n },\r\n];\r\n\r\nconst ConfirmationDialogStrings = {\r\n create: {\r\n title: _TL_('Are you sure you want to change your settings?'),\r\n content: _TL_('Do you want to change the way you set up your conversion goal? Some of your conversion goal’s settings will be overwritten.'),\r\n confirm: _TL_('Change'),\r\n cancel: _TL_('Cancel'),\r\n },\r\n edit: {\r\n title: _TL_('Are you sure you want to make this conversion goal compatible with LinkedIn?'),\r\n content: _TL_('Please note that by making this conversion goal compatible with LinkedIn you will lose any conversion goal settings that are incompatible.'),\r\n confirm: _TL_('Yes'),\r\n cancel: _TL_('No'),\r\n },\r\n};\r\n\r\nexport const LinkedInConfirmationDialog = ({\r\n open, scenario, onDismiss, onConfirm,\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n\r\n const {\r\n title,\r\n content,\r\n confirm,\r\n cancel,\r\n } = useMemo(() => ConfirmationDialogStrings[scenario], [scenario]);\r\n\r\n return (\r\n \r\n
\r\n\r\n {shouldShowError && (\r\n \r\n
\r\n \r\n
\r\n {HourAndMinutes}\r\n {i18n.getString(_TL_('Day'))}
\r\n \r\n
\r\n )}\r\n \r\n {i18n.getString(_TL_('Enter a valid conversion period.'))}\r\n
\r\n\r\n {Networks.map(({\r\n id, title, description, icon,\r\n }) => (\r\n onSelect(id)}\r\n >\r\n
\r\n );\r\n};\r\n\r\nNetworkCards.propTypes = {\r\n scenario: PropTypes.oneOf(['create', 'edit']).isRequired,\r\n selected: PropTypes.string.isRequired,\r\n disabled: PropTypes.bool.isRequired,\r\n onChange: PropTypes.func.isRequired,\r\n};\r\n","import React, { useContext } from 'react';\r\nimport { Button, makeStyles, shorthands, Text, tokens, typographyStyles } from '@fluentui/react-components';\r\nimport PropTypes from 'prop-types';\r\nimport { DeleteRegular } from '@fluentui/react-icons';\r\n\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { ResultsCount, SelectAllButton } from '@bingads-webui-fluent-component/entity-selector';\r\nimport { CampaignSelectorInline } from '@bingads-webui-campaign-react/campaign-adgroup-selector-v2';\r\n\r\nconst useLinkedInCampaignAssociationSelectorStyles = makeStyles({\r\n descriptionContainer: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n marginBottom: '16px',\r\n },\r\n description: {\r\n marginRight: '16px',\r\n },\r\n popoverHeader: {\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n ...shorthands.padding('8px', '16px'),\r\n },\r\n resultsCount: {\r\n ...typographyStyles.caption1Strong,\r\n color: tokens.colorNeutralForeground3,\r\n },\r\n selectAllButton: {\r\n color: tokens.colorBrandForegroundLink,\r\n fontWeight: tokens.fontWeightRegular,\r\n },\r\n});\r\n\r\nconst LinkedInCampaignAssociationHeader = () => {\r\n const i18n = useContext(I18nContext);\r\n const classes = useLinkedInCampaignAssociationSelectorStyles();\r\n\r\n return (\r\n \r\n \r\n {i18n.getString(title)}\r\n \r\n \r\n {i18n.getString(description)}\r\n \r\n
\r\n \r\n ))}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport const LinkedInCampaignAssociationSelector = ({\r\n cid, aid, associatedCampaigns, onAssociatedCampaignsChange,\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n const classes = useLinkedInCampaignAssociationSelectorStyles();\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nLinkedInCampaignAssociationSelector.propTypes = {\r\n cid: PropTypes.number.isRequired,\r\n aid: PropTypes.number.isRequired,\r\n associatedCampaigns: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\r\n onAssociatedCampaignsChange: PropTypes.func.isRequired,\r\n};\r\n","import React, { useContext, useState, useCallback, useEffect, useMemo } from 'react';\r\nimport _ from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\nimport { ChoiceGroup, Checkbox, Dropdown } from '@fluentui/react';\r\nimport { Tooltip } from '@fluentui/react-components';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { AccordionHeader, getStepStyles } from '@bingads-webui-campaign-react/conversion-wizard-components';\r\nimport { GoalCreationWizardContext } from '../../goal-creation-wizard-context';\r\nimport { UncheckConversionDialog } from '../components/uncheck-include-conversion-dialog/uncheck-conversion-dialog';\r\nimport { ConversionWindow } from '../../components/index';\r\nimport { LearnMore } from '../../../../conversion-wizard-components/src/learn-more/learn-more';\r\nimport { duration2Input } from '../../shared/util';\r\nimport { NetworkCards } from './network-cards';\r\nimport { LinkedInCampaignAssociationSelector } from '../components/linkedin-campaign-selector';\r\n\r\nconst fullTimeTemplate = (obj, i18n) => `${obj.day} ${i18n.getString(_TL_('days,'))} ${obj.hour} ${i18n.getString(_TL_('hours, and'))} ${obj.min} ${i18n.getString(_TL_('minutes'))}`;\r\nconst dayTemplate = (obj, i18n) => `${obj.day} ${i18n.getString(_TL_('days'))}`;\r\n\r\nconst mappingChoiceText = (config, keyName) => {\r\n const index = _.indexOf(_.pluck(config, 'key'), keyName);\r\n return config[index].text;\r\n};\r\n\r\nconst AdvancedGoalSettingsViewUnstyled = (props) => {\r\n const {\r\n classes,\r\n selectedGoalType,\r\n updateGoalContext,\r\n expandError,\r\n resetExpandError,\r\n isConversionGoalAttributionModelEnabled = false,\r\n setAdvSettingHasError,\r\n showLinkedInCards,\r\n goalHasAssociatedCampaigns,\r\n associatedCampaigns,\r\n onAssociatedCampaignsChange,\r\n } = props;\r\n const i18n = useContext(I18nContext);\r\n const wizardContext = useContext(GoalCreationWizardContext);\r\n const { logActivity, isEditScenario } = wizardContext;\r\n const { Title: accountName } = wizardContext.serverContext.CurrentAccount;\r\n const {\r\n IsAccountLevel,\r\n ConversionCountType,\r\n IsMainConversionGoal,\r\n LookbackWindowInMinutes,\r\n ViewThroughLookbackWindowinMinutes,\r\n AttributionModelType,\r\n SelectedNetwork,\r\n } = wizardContext.goalContext;\r\n\r\n const IsViewThroughConversionWindowVisible = useMemo(() => {\r\n const isViewthroughConversionEnabled = wizardContext.permissions && wizardContext.permissions.IsViewThroughConversionEnabled;\r\n const nonVTGoalTypes = ['ApplicationInstallGoal', 'OfflineConversionGoal', 'InStoreTransactionGoal', 'InStoreVisitGoal'];\r\n if (nonVTGoalTypes.indexOf(wizardContext.goalContext.Type) > -1) {\r\n return false;\r\n }\r\n return isViewthroughConversionEnabled;\r\n }, [wizardContext.goalContext.Type, wizardContext.permissions]);\r\n\r\n const IsAmplifyEnabled = useMemo(() =>\r\n wizardContext.permissions && wizardContext.permissions.IsAmplifyEnabled, [wizardContext.permissions]);\r\n\r\n const {\r\n CurrentAccount: { Id: aid },\r\n CurrentCustomer: { Id: cid },\r\n } = wizardContext.serverContext;\r\n\r\n const enableGoalLevelChange = useMemo(() => {\r\n const { permissions } = wizardContext;\r\n return permissions && permissions.dynamic && permissions.dynamic.EnableGoalLevelChange;\r\n }, [wizardContext]);\r\n\r\n const initiallySelectedNetwork = useMemo(() => {\r\n if (SelectedNetwork) {\r\n return SelectedNetwork;\r\n }\r\n\r\n if (goalHasAssociatedCampaigns) {\r\n return 'linkedin';\r\n }\r\n\r\n return 'microsoft';\r\n }, [SelectedNetwork, goalHasAssociatedCampaigns]);\r\n\r\n const acrossAllAccountsGoals = ['InStoreVisitGoal', 'ApplicationInstallGoal', 'InStoreTransactionGoal'];\r\n const isInStoreVisit = selectedGoalType === 'InStoreVisitGoal';\r\n const isAppInstallGoal = selectedGoalType === 'ApplicationInstallGoal';\r\n const lookBackWindowDefault = isInStoreVisit ? 1440 : 43200;\r\n const vtWindowDefault = 1440;\r\n const timeTemplate = isInStoreVisit ? dayTemplate : fullTimeTemplate;\r\n const timeErrorSummary = i18n.getString(_TL_('Expand to correct invalid input'));\r\n const [selectedScope, setSelectedScope] = useState(IsAccountLevel ? 'accountLevel' : 'customerLevel');\r\n const [selectedCount, setSelectedCount] = useState(ConversionCountType);\r\n // const [selectedNetwork, setSelectedNetwork] = useState(goalHasAssociatedCampaigns ? 'linkedin' : 'microsoft');\r\n const [selectedNetwork, setSelectedNetwork] = useState(initiallySelectedNetwork);\r\n const [isMainGoalSelectionChecked, setIsMainGoalSelectionChecked] = useState(IsMainConversionGoal);\r\n const [showUncheckConversionDialog, setShowUncheckConversionDialog] = useState(false);\r\n // conversion window and viewthrough window could be set to undefined as goal props updated\r\n const conversionWindowValue = _.isUndefined(LookbackWindowInMinutes) ? lookBackWindowDefault : LookbackWindowInMinutes;\r\n const initialCWObj = duration2Input(conversionWindowValue);\r\n const [conversionWindowSummary, setConversionWindowSummary] = useState(timeTemplate(initialCWObj, i18n));\r\n const [cwErrorStatus, setCwErrorStatus] = useState(LookbackWindowInMinutes === 0);\r\n const vtConverionWindowValue = _.isUndefined(ViewThroughLookbackWindowinMinutes) ? vtWindowDefault : ViewThroughLookbackWindowinMinutes;\r\n const initialVTCWObj = duration2Input(vtConverionWindowValue);\r\n const [vtConversionWindowSummary, setVTConversionWindowSummary] = useState(timeTemplate(initialVTCWObj, i18n));\r\n const [vtcwErrorStatus, setVtcwErrorStatus] = useState(ViewThroughLookbackWindowinMinutes === 0);\r\n const [attribute, setAttribute] = useState(AttributionModelType);\r\n const [expandStates, setExpandStates] = useState({\r\n scope: false,\r\n countType: false,\r\n conversionWindow: false,\r\n viewThroughWindow: false,\r\n mainGoal: false,\r\n linkedInAssociations: selectedNetwork === 'linkedin',\r\n });\r\n\r\n const LinkedInTooltip = useCallback(({ children }) => {\r\n if (selectedNetwork !== 'linkedin') { return children; }\r\n\r\n const tooltipContent = i18n.getString(_TL_('Select Microsoft Advertising Network if you want to set up a conversion goal as you typically would.'));\r\n\r\n return (\r\n \r\n \r\n {i18n.getString(_TL_('Check the associated LinkedIn campaigns that you want to track the performance.'))}\r\n \r\n
\r\n \r\n {children}\r\n
\r\n \r\n );\r\n }, [i18n, selectedNetwork]);\r\n\r\n const renderWithLinkedInTooltip = useCallback((fieldProps, render) => (\r\n
\r\n );\r\n};\r\n\r\nAdvancedGoalSettingsViewUnstyled.propTypes = {\r\n classes: PropTypes.shape(_.mapObject(\r\n getStepStyles(),\r\n _.constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n updateGoalContext: PropTypes.func.isRequired,\r\n selectedGoalType: PropTypes.string.isRequired,\r\n expandError: PropTypes.bool.isRequired,\r\n isConversionGoalAttributionModelEnabled: PropTypes.bool,\r\n resetExpandError: PropTypes.func.isRequired,\r\n setAdvSettingHasError: PropTypes.func,\r\n showLinkedInCards: PropTypes.bool.isRequired,\r\n goalHasAssociatedCampaigns: PropTypes.bool.isRequired,\r\n associatedCampaigns: PropTypes.arrayOf(PropTypes.shape({\r\n })).isRequired,\r\n onAssociatedCampaignsChange: PropTypes.func.isRequired,\r\n};\r\n\r\nAdvancedGoalSettingsViewUnstyled.defaultProps = {\r\n isConversionGoalAttributionModelEnabled: false,\r\n setAdvSettingHasError: _.noop,\r\n};\r\n\r\nexport const AdvancedGoalSettingsView = withDefaultStyles(AdvancedGoalSettingsViewUnstyled, getStepStyles);\r\n","import React, { useContext, useState, useMemo, useCallback, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport { withPerfMarker } from '@bingads-webui/performance-marker-react-wrapper';\r\nimport { notificationApi } from '@bingads-webui-react/notification-center';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { getStepStyles } from '@bingads-webui-campaign-react/conversion-wizard-components';\r\nimport { StepContainer } from '../step-container/step-container';\r\nimport { GoalCreationWizardContext } from '../../goal-creation-wizard-context';\r\nimport { WIZARD_ACTIONS } from '../../goal-creation-wizard-reducer';\r\nimport { getTitleByGoalType, isUetBasedGoal, isTypeIncluedForEnhancedConversions } from '../../shared/contants';\r\nimport { SpecificGoalSettingsView } from './specific-goal-settings';\r\nimport { AdvancedGoalSettingsView } from './advanced-goal-settings';\r\nimport { getErrorMessage, getPreferredTag, processPayload, saveGoal } from '../../conversion-goals-repository';\r\nimport { validateSpecificView } from '../../shared/validation-util';\r\nimport { LearnMore } from '../../../../conversion-wizard-components/src/learn-more/learn-more';\r\nimport { endActivity } from '../../shared/util';\r\n\r\nconst GoalDetailStepUnstyled = (props) => {\r\n const {\r\n classes,\r\n exportUpdatedGoalObject,\r\n showNetworkCards,\r\n } = props;\r\n const noTagGoalTypes = ['ApplicationInstallGoal', 'InStoreTransactionGoal', 'OfflineConversionGoal', 'InStoreVisitGoal'];\r\n const i18n = useContext(I18nContext);\r\n const wizardContext = useContext(GoalCreationWizardContext);\r\n const { logActivity } = wizardContext;\r\n const selectedGoalType = wizardContext.goalContext.Type;\r\n\r\n const isConversionGoalAttributionModelEnabled = isUetBasedGoal(wizardContext.goalContext);\r\n const { IsAmplifyEnabled } = wizardContext.permissions;\r\n\r\n if (isConversionGoalAttributionModelEnabled &&\r\n _.isUndefined(wizardContext.goalContext.AttributionModelType)) {\r\n if (IsAmplifyEnabled) {\r\n wizardContext.goalContext.AttributionModelType = 'LastTouch';\r\n } else {\r\n wizardContext.goalContext.AttributionModelType = 'Default';\r\n }\r\n }\r\n\r\n const [goalObj, setGoalObj] = useState(wizardContext.goalContext);\r\n const [associatedCampaigns, setAssociatedCampaigns] = useState(wizardContext && wizardContext.associatedCampaigns && wizardContext.associatedCampaigns.current);\r\n const [expandError, setExpandError] = useState(false);\r\n const [showError, setShowError] = useState(false);\r\n const [notificationError, setNotificationError] = useState(null);\r\n const [footerEnabled, setFooterEnabled] = useState(true);\r\n const alertMessage = _TL_('We will turn auto-tagging of Microsoft Click ID on, as it is required for UET conversion goals. This will help to improve the accuracy of conversion tracking.');\r\n\r\n const showLinkedInCards = useMemo(() => showNetworkCards(selectedGoalType), [selectedGoalType, showNetworkCards]);\r\n\r\n const saveAssociatedCampaigns = useCallback(() => {\r\n wizardContext.dispatch({\r\n type: WIZARD_ACTIONS.UPDATE_ASSOCIATED_CAMPAIGNS_DATA,\r\n associatedCampaigns: {\r\n current: associatedCampaigns,\r\n },\r\n });\r\n }, [wizardContext, associatedCampaigns]);\r\n\r\n const allowEnhancedConversions = useMemo(() => {\r\n const { permissions } = wizardContext;\r\n const enhancedConversionType = isTypeIncluedForEnhancedConversions({\r\n goalType: selectedGoalType,\r\n goalValueType: goalObj.GoalValueType,\r\n });\r\n return permissions && permissions.dynamic && permissions.dynamic.EnhancedConversions && enhancedConversionType;\r\n }, [goalObj.GoalValueType, selectedGoalType, wizardContext]);\r\n\r\n const updateSpecificSettings = useCallback((updatedProps) => {\r\n setGoalObj({\r\n ...goalObj,\r\n ...updatedProps,\r\n });\r\n }, [goalObj]);\r\n\r\n const updateAdvancedSettings = useCallback((updatedProps) => {\r\n setGoalObj({\r\n ...goalObj,\r\n ...updatedProps,\r\n });\r\n }, [goalObj]);\r\n\r\n useEffect(() => {\r\n let notificationId;\r\n if (!_.isEmpty(notificationError)) {\r\n notificationId = notificationApi.showWarning(notificationError);\r\n }\r\n return () => notificationId && notificationApi.dismiss(notificationId);\r\n }, [notificationError]);\r\n\r\n const validateLookbackWindow = useCallback(val => !_.isNaN(val) && val > 0, []);\r\n\r\n const validateAdvancedSettings = useCallback(\r\n () => validateLookbackWindow(goalObj.LookbackWindowInMinutes) && (validateLookbackWindow(goalObj.ViewThroughLookbackWindowinMinutes) || goalObj.ViewThroughLookbackWindowinMinutes === null),\r\n [goalObj.LookbackWindowInMinutes, goalObj.ViewThroughLookbackWindowinMinutes, validateLookbackWindow]\r\n );\r\n\r\n const validateSpecificSettings = useCallback(() => {\r\n // Name, GoalValueType, GoalValue, CurrencyCode\r\n if (_.isUndefined(goalObj.Name)) {\r\n return false;\r\n }\r\n if (_.isUndefined(goalObj.GoalValueType)) {\r\n return false;\r\n }\r\n if (goalObj.GoalValueType !== 'NoValue' && _.isUndefined(goalObj.GoalValue)) {\r\n return false;\r\n }\r\n // specific view\r\n return validateSpecificView(goalObj);\r\n }, [goalObj]);\r\n\r\n useMemo(() => {\r\n if (exportUpdatedGoalObject !== _.noop) {\r\n exportUpdatedGoalObject(goalObj, validateAdvancedSettings() && validateSpecificSettings());\r\n }\r\n }, [exportUpdatedGoalObject, goalObj, validateAdvancedSettings, validateSpecificSettings]);\r\n\r\n const skipTagSelectionStep = wizardContext.goalContext.Type && noTagGoalTypes.indexOf(wizardContext.goalContext.Type) > -1;\r\n\r\n const [advSettingHasError, setAdvSettingHasError] = useState(false);\r\n const allowNext = useMemo(() => {\r\n if (expandError || showError || advSettingHasError) {\r\n return false;\r\n }\r\n if (_.isUndefined(goalObj.Name)) {\r\n return false;\r\n }\r\n if (_.isUndefined(goalObj.GoalValue)) {\r\n return false;\r\n }\r\n if (_.isUndefined(goalObj.CurrencyCode)) {\r\n return false;\r\n }\r\n if (_.isUndefined(goalObj.GoalValueType)) {\r\n return false;\r\n }\r\n return true;\r\n }, [goalObj.Name, goalObj.GoalValue, goalObj.CurrencyCode, goalObj.GoalValueType, advSettingHasError, expandError, showError]);\r\n\r\n\r\n const saveAndNext = useCallback(() => {\r\n const validateAdvancedResult = validateAdvancedSettings();\r\n if (!validateAdvancedResult) {\r\n setExpandError(true);\r\n }\r\n const validateSpecificResult = validateSpecificSettings();\r\n if (!validateSpecificResult) {\r\n setShowError(true);\r\n }\r\n\r\n if (!validateAdvancedResult || !validateSpecificResult) {\r\n return;\r\n }\r\n\r\n saveAssociatedCampaigns();\r\n\r\n if (skipTagSelectionStep) {\r\n saveGoal(processPayload(goalObj, wizardContext.permissions), wizardContext)\r\n .then((response) => {\r\n endActivity(logActivity);\r\n wizardContext.dispatch({\r\n type: allowEnhancedConversions ?\r\n WIZARD_ACTIONS.NAVIGATE_TO_ENHANCED_CONV :\r\n WIZARD_ACTIONS.NAVIGATE_TO_LAST_STEP,\r\n data: {\r\n ...goalObj,\r\n Id: response.Id,\r\n },\r\n switchToEdit: true,\r\n });\r\n })\r\n .catch((response) => {\r\n setFooterEnabled(true);\r\n setNotificationError(getErrorMessage(response, i18n));\r\n });\r\n setFooterEnabled(false);\r\n } else {\r\n wizardContext.tagPromise.then((tags) => {\r\n const tag = _.isEmpty(wizardContext.goalContext.Tag) ? getPreferredTag(tags) : wizardContext.goalContext.Tag;\r\n const updatedTag = tag ? { Tag: tag } : {};\r\n endActivity(logActivity);\r\n if (tag && tag.isAutoCreated) {\r\n const goalToSave = {\r\n ...goalObj,\r\n Tag: {\r\n Id: tag.Id,\r\n },\r\n };\r\n saveGoal(processPayload(goalToSave, wizardContext.permissions), wizardContext).then((response) => {\r\n wizardContext.dispatch({\r\n type: allowEnhancedConversions ?\r\n WIZARD_ACTIONS.NAVIGATE_TO_ENHANCED_CONV :\r\n WIZARD_ACTIONS.NAVIGATE_WITH_TAGINSTALL_OPTIONS,\r\n data: {\r\n ...goalToSave,\r\n Id: response.Id,\r\n ...updatedTag,\r\n tags,\r\n },\r\n tagInstallOption: 'no',\r\n });\r\n })\r\n .catch((response) => {\r\n setFooterEnabled(true);\r\n setNotificationError(getErrorMessage(response, i18n));\r\n });\r\n } else {\r\n wizardContext.dispatch({\r\n type: allowEnhancedConversions ?\r\n WIZARD_ACTIONS.NAVIGATE_TO_ENHANCED_CONV :\r\n WIZARD_ACTIONS.WIZARD_SAVE_AND_NAVIGATE_TAG_SELECTION,\r\n data: {\r\n ...goalObj,\r\n ...updatedTag,\r\n tags,\r\n },\r\n });\r\n }\r\n }).catch((tagResponse) => {\r\n logActivity.error(`Could not retrieve tags for goal creation:${JSON.stringify(tagResponse)}`);\r\n notificationApi.showWarning(i18n.getString(_TL_('Could not fetch UET tags for your account. Please try again later')));\r\n });\r\n }\r\n }, [validateAdvancedSettings, validateSpecificSettings, saveAssociatedCampaigns, allowEnhancedConversions, skipTagSelectionStep, wizardContext, goalObj, logActivity, i18n]);\r\n\r\n const resetShowError = useCallback(() => setShowError(false), []);\r\n const resetExpandError = useCallback(() => setExpandError(false), []);\r\n\r\n const primaryBtnText = useMemo(() => {\r\n if (skipTagSelectionStep) {\r\n return i18n.getString(_TL_('Save and next'));\r\n }\r\n return i18n.getString(_TL_('Next'));\r\n }, [skipTagSelectionStep, i18n]);\r\n\r\n const footerConfig = useMemo(() => ({\r\n buttons: [{\r\n type: 'Secondary',\r\n onClick: wizardContext.goBack,\r\n isEnabled: footerEnabled,\r\n text: i18n.getString(_TL_('Back')),\r\n },\r\n {\r\n type: 'Primary',\r\n onClick: saveAndNext,\r\n isEnabled: footerEnabled && allowNext,\r\n text: primaryBtnText,\r\n },\r\n {\r\n type: 'Cancel',\r\n onClick: wizardContext.cancel,\r\n isEnabled: footerEnabled,\r\n text: i18n.getString(_TL_('Cancel')),\r\n }],\r\n }), [wizardContext.goBack, wizardContext.cancel, footerEnabled, i18n, saveAndNext, primaryBtnText, allowNext]);\r\n\r\n return (\r\n {i18n.getString(_TL_('Advanced settings'))}
\r\n {/* networks */}\r\n {showLinkedInCards && (\r\n \r\n \r\n {i18n.getString(_TL_('Scope'))}\r\n \r\n
\r\n {/* count */}\r\n \r\n {expandStates.scope ?\r\n (\r\n
\r\n {mappingChoiceText(scopeOptions, selectedScope)}
\r\n )}\r\n\r\n \r\n {i18n.getString(_TL_('Count'))}\r\n \r\n
\r\n {/* conversion window */}\r\n \r\n
\r\n \r\n {i18n.getString(_TL_('Select how you\\'d like to count your conversions.'))}\r\n \r\n
\r\n
\r\n {mappingChoiceText(countOptions, selectedCount)}
\r\n\r\n \r\n {i18n.getString(_TL_('Conversion window'))}\r\n \r\n
\r\n {/* view-through conversion window (pilot) */}\r\n {IsViewThroughConversionWindowVisible &&\r\n (\r\n \r\n
\r\n \r\n
\r\n {isMaxWindowLimit30days ? thirtyDayString : ninetyDayString}
\r\n\r\n
\r\n {cwErrorStatus ? timeErrorSummary : conversionWindowSummary}
\r\n\r\n \r\n {i18n.getString(_TL_('View-through Conversion window'))}\r\n \r\n
)}\r\n {/* main goal selection */}\r\n \r\n
\r\n \r\n
\r\n {thirtyDayString}
\r\n\r\n
\r\n {vtcwErrorStatus ? timeErrorSummary : vtConversionWindowSummary}
\r\n\r\n \r\n {i18n.getString(_TL_('Include in \"Conversions\"'))}\r\n \r\n
\r\n {\r\n isConversionGoalAttributionModelEnabled &&\r\n \r\n {expandStates.mainGoal ?\r\n (\r\n
\r\n \r\n \r\n \r\n
\r\n ) :\r\n (\r\n {isMainGoalSelectionChecked ? i18n.getString(_TL_('Yes')) : i18n.getString(_TL_('No'))}
\r\n )}\r\n\r\n \r\n {i18n.getString(_TL_('Conversion attribution model'))}\r\n \r\n
\r\n }\r\n {\r\n selectedNetwork === 'linkedin' && (\r\n \r\n {expandStates.attributeModel ?\r\n \r\n :\r\n
\r\n {attribute === 'Default' ? i18n.getString(_TL_('Last Click')) : i18n.getString(_TL_('Last Touch'))}
\r\n }\r\n\r\n \r\n {i18n.getString(_TL_('Selected LinkedIn campaigns'))}\r\n \r\n
\r\n )\r\n }\r\n \r\n {expandStates.linkedInAssociations && (\r\n
\r\n \r\n
\r\n
\r\n \r\n );\r\n};\r\n\r\nGoalDetailStepUnstyled.propTypes = {\r\n classes: PropTypes.shape(_.mapObject(\r\n getStepStyles(),\r\n _.constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n exportUpdatedGoalObject: PropTypes.func,\r\n showNetworkCards: PropTypes.func,\r\n};\r\n\r\nGoalDetailStepUnstyled.defaultProps = {\r\n exportUpdatedGoalObject: _.noop,\r\n showNetworkCards: _.noop,\r\n};\r\n\r\nexport const GoalDetailsStep = withPerfMarker(withDefaultStyles(GoalDetailStepUnstyled, getStepStyles));\r\n","import React, { useContext, useCallback, useState, useMemo, useEffect } from 'react';\r\nimport _ from 'underscore';\r\nimport classNames from 'classnames';\r\nimport PropTypes from 'prop-types';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { notificationApi } from '@bingads-webui-react/notification-center';\r\nimport { withPerfMarker } from '@bingads-webui/performance-marker-react-wrapper';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { Checkbox } from '@fluentui/react';\r\nimport { AccordionHeader, getStepStyles } from '@bingads-webui-campaign-react/conversion-wizard-components';\r\nimport { StepContainer } from '../step-container/step-container';\r\nimport { GoalCreationWizardContext } from '../../goal-creation-wizard-context';\r\nimport { processPayload, saveGoal, getErrorMessage } from '../../conversion-goals-repository';\r\nimport { WIZARD_ACTIONS } from '../../goal-creation-wizard-reducer';\r\nimport { endActivity } from '../../shared/util';\r\n\r\nconst SmartGoalDetailUnstyled = (props) => {\r\n const {\r\n classes,\r\n } = props;\r\n const i18n = useContext(I18nContext);\r\n const wizardContext = useContext(GoalCreationWizardContext);\r\n const { logActivity } = wizardContext;\r\n const [isMainGoalChecked, setIsMainGoalChecked] = useState(wizardContext.goalContext.IsMainConversionGoal);\r\n const [isExpanded, setIsExpanded] = useState(true);\r\n const [notificationError, setNotificationError] = useState(null);\r\n const [footerEnabled, setFooterEnabled] = useState(true);\r\n\r\n const onChangeMainGoalSelection = useCallback((event, value) => {\r\n logActivity.trace(`AdvancedGoalSettings:SmartGoal:Setting isMainGoal to ${value}`);\r\n setIsMainGoalChecked(value);\r\n }, [logActivity]);\r\n\r\n const toggle = useCallback(() => {\r\n if (!isExpanded) {\r\n logActivity.trace('AdvancedGoalSettings:SmartGoal:Expanded toggle for CountAsConversions');\r\n }\r\n setIsExpanded(!isExpanded);\r\n }, [isExpanded, logActivity]);\r\n\r\n const goalDelta = {\r\n IsMainConversionGoal: isMainGoalChecked,\r\n };\r\n\r\n const handleNext = useCallback(() => {\r\n // go to completion page\r\n saveGoal(processPayload({ ...wizardContext.goalContext, ...goalDelta }, wizardContext.permissions), wizardContext).then((response) => {\r\n endActivity(logActivity);\r\n wizardContext.dispatch({\r\n type: WIZARD_ACTIONS.NAVIGATE_TO_LAST_STEP,\r\n data: { ...goalDelta, Id: response.Id },\r\n });\r\n }).catch((response) => {\r\n setFooterEnabled(true);\r\n setNotificationError(getErrorMessage(response, i18n));\r\n });\r\n setFooterEnabled(false);\r\n }, [wizardContext, goalDelta, logActivity, i18n]);\r\n\r\n useEffect(() => {\r\n let notificationId;\r\n if (!_.isEmpty(notificationError)) {\r\n notificationId = notificationApi.showWarning(notificationError);\r\n }\r\n return () => notificationId && notificationApi.dismiss(notificationId);\r\n }, [notificationError]);\r\n\r\n const footerConfig = useMemo(() => ({\r\n buttons: [{\r\n type: 'Secondary',\r\n onClick: wizardContext.goBack,\r\n isEnabled: false,\r\n text: i18n.getString(_TL_('Back')),\r\n },\r\n {\r\n type: 'Primary',\r\n onClick: handleNext,\r\n isEnabled: footerEnabled,\r\n text: i18n.getString(_TL_('Save and next')),\r\n },\r\n {\r\n type: 'Cancel',\r\n onClick: wizardContext.cancel,\r\n isEnabled: footerEnabled,\r\n text: i18n.getString(_TL_('Cancel')),\r\n }],\r\n }), [wizardContext.goBack, wizardContext.cancel, i18n, handleNext, footerEnabled]);\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n {i18n.getString(alertMessage)}\r\n
\r\n \r\n {/* main goal selection */}\r\n
\r\n \r\n );\r\n};\r\n\r\nSmartGoalDetailUnstyled.propTypes = {\r\n classes: PropTypes.shape(_.mapObject(\r\n getStepStyles(),\r\n _.constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n};\r\n\r\nexport const SmartGoalDetail = withPerfMarker(withDefaultStyles(SmartGoalDetailUnstyled, getStepStyles));\r\n","import React, { useCallback, useMemo, useState } from 'react';\r\nimport _ from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { SelectableCardList, getStepStyles } from '@bingads-webui-campaign-react/conversion-wizard-components';\r\n\r\nconst TagSetupMethodViewUnstyled = (props) => {\r\n const {\r\n classes,\r\n selectedItem,\r\n i18n,\r\n updateTagSetupMethod,\r\n } = props;\r\n\r\n const [selectedTagSetupMethod, setSelectedTagSetupMethod] = useState(selectedItem);\r\n\r\n const tagSetupMethods = useMemo(() => {\r\n const methods = [\r\n {\r\n id: 'installTag',\r\n title: i18n.getString(_TL_(('Install the tag yourself'))),\r\n description: i18n.getString(_TL_(('We\\'ll provide the instructions so you can add the tracking tag to your website\\'s code.'))),\r\n iconName: 'Edit',\r\n },\r\n {\r\n id: 'emailTag',\r\n title: i18n.getString(_TL_(('Send the tag to a developer'))),\r\n description: i18n.getString(_TL_(('We\\'ll send the tracking tag and instructions to the people you specify, so they can add the tag to your website\\'s code.'))),\r\n iconName: 'Mail',\r\n },\r\n ];\r\n\r\n methods.push({\r\n id: 'platformTag',\r\n title: i18n.getString(_TL_(('Add the tag through a website editing platform'))),\r\n description: i18n.getString(_TL_(('We\\'ll provide instructions for adding the tracking tag through an editing platform, such as WordPress, Wix, Shopify, or BigCommerce.'))),\r\n glyphIconName: 'ba-AdUnitChannel',\r\n });\r\n\r\n // TODO: remove aid check once MT support GTM setup at customer level\r\n methods.push({\r\n id: 'gtmTag',\r\n title: i18n.getString(_TL_('Automatically add the tracking tag through Google Tag Manager')),\r\n description: i18n.getString(_TL_('If you are already using Google Tag Manager for your website, we can automatically set up the tracking tag for you.')),\r\n glyphIconName: 'ba-AdUnitChannel',\r\n });\r\n\r\n return methods;\r\n }, [i18n]);\r\n\r\n const onSelectTagSetupMethod = useCallback((option) => {\r\n setSelectedTagSetupMethod(option);\r\n updateTagSetupMethod(option);\r\n }, [updateTagSetupMethod]);\r\n\r\n return (\r\n \r\n toggle('mainGoal')}\r\n helpId=\"pop_BA_ConversionGoal_CountAsConv\"\r\n i18n={i18n}\r\n >\r\n {i18n.getString(_TL_('Include in \"Conversions\"'))}\r\n \r\n
\r\n \r\n {isExpanded ?\r\n (\r\n
\r\n {isMainGoalChecked ? 'Yes' : 'No'}
\r\n )}\r\n\r\n
\r\n );\r\n};\r\n\r\nTagSetupMethodViewUnstyled.propTypes = {\r\n classes: PropTypes.shape(_.mapObject(\r\n getStepStyles(),\r\n _.constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n selectedItem: PropTypes.string.isRequired,\r\n i18n: PropTypes.shape({}).isRequired,\r\n permissions: PropTypes.shape({}).isRequired,\r\n updateTagSetupMethod: PropTypes.func.isRequired,\r\n};\r\n\r\nexport const TagSetupMethodView = withDefaultStyles(TagSetupMethodViewUnstyled, getStepStyles);\r\n","import React, { useContext, useState, useMemo, useCallback } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withPerfMarker } from '@bingads-webui/performance-marker-react-wrapper';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { StepContainer } from '../step-container/step-container';\r\nimport { GoalCreationWizardContext } from '../../goal-creation-wizard-context';\r\nimport { WIZARD_ACTIONS } from '../../goal-creation-wizard-reducer';\r\nimport { endActivity } from '../../shared/util';\r\nimport { TagSetupMethodView } from './view/tag-setup-method-view';\r\n\r\nconst TagSetupMethodStepUnstyled = (props) => {\r\n const {\r\n selectedItem,\r\n } = props;\r\n const wizardContext = useContext(GoalCreationWizardContext);\r\n const { logActivity, permissions } = wizardContext;\r\n const [selectedTagSetupMethod, setSelectedTagSetupMethod] = useState(selectedItem);\r\n const i18n = useContext(I18nContext);\r\n\r\n const handleNext = useCallback(() => {\r\n logActivity.trace(`[TagSetupMethod] Selected tag setup method: ${selectedTagSetupMethod}`);\r\n endActivity(logActivity);\r\n wizardContext.dispatch({\r\n type: WIZARD_ACTIONS.SELECT_TAG_SETUP_METHOD,\r\n data: { selectedTagSetupMethod },\r\n });\r\n }, [logActivity, wizardContext, selectedTagSetupMethod]);\r\n\r\n const updateTagSetupMethod = (option) => {\r\n setSelectedTagSetupMethod(option);\r\n };\r\n\r\n const handleCancel = useCallback(() => {\r\n wizardContext.exitWizard();\r\n }, [wizardContext]);\r\n\r\n const footerConfig = useMemo(() => ({\r\n buttons: [{\r\n type: 'Secondary',\r\n onClick: wizardContext.goBack,\r\n isEnabled: true,\r\n text: i18n.getString(_TL_(('Back'))),\r\n },\r\n {\r\n type: 'Primary',\r\n onClick: handleNext,\r\n isEnabled: !!selectedTagSetupMethod,\r\n text: i18n.getString(_TL_(('Next'))),\r\n },\r\n {\r\n type: 'Cancel',\r\n onClick: handleCancel,\r\n isEnabled: true,\r\n text: i18n.getString(_TL_(('Cancel'))),\r\n }],\r\n }), [wizardContext.goBack, handleCancel, handleNext, selectedTagSetupMethod, i18n]);\r\n\r\n return (\r\n - \r\n
- {hashingPhoneNumber} \r\n
- {hashingEmail} \r\n
- {detail} )}\r\n
- \r\n {hasingEmailDetail.map((detail, index) =>\r\n // eslint-disable-next-line react/no-array-index-key\r\n
\r\n
\r\n );\r\n};\r\n\r\nInsertInstructionUnstyled.propTypes = {\r\n classes: PropTypes.shape(_.mapObject(\r\n getStepStyles(),\r\n _.constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n template: PropTypes.arrayOf(PropTypes.string).isRequired,\r\n logActivity: PropTypes.shape({}).isRequired,\r\n wizardDispatch: PropTypes.func.isRequired,\r\n permissions: PropTypes.shape({\r\n dynamic: PropTypes.shape({\r\n EnhancedConversions: PropTypes.bool,\r\n }),\r\n }),\r\n};\r\n\r\nInsertInstructionUnstyled.defaultProps = {\r\n permissions: {\r\n dynamic: {\r\n EnhancedConversions: false,\r\n },\r\n },\r\n};\r\n\r\nexport const InsertInstruction = withDefaultStyles(InsertInstructionUnstyled, getStepStyles);\r\n","import _ from 'underscore';\r\n\r\nexport const generateTag = (type, tagTemplates, templateReplacements, uglify = false) => {\r\n const updatedTagTemplate = _.map(tagTemplates[type], (line) => {\r\n let ret = line;\r\n if (uglify) {\r\n ret = ret.trim();\r\n }\r\n Object.keys(templateReplacements).forEach((key) => {\r\n const templateKey = `{{${key}}}`;\r\n ret = ret.replace(new RegExp(templateKey, 'g'), templateReplacements[key]);\r\n });\r\n return ret;\r\n });\r\n return uglify ?\r\n updatedTagTemplate.join('') :\r\n updatedTagTemplate.join('\\n');\r\n};\r\n\r\nexport const getEventTagModel = (goalContext) => {\r\n const {\r\n Type, Action, Label, Value, Category, CurrencyCode, GoalValueType,\r\n } = goalContext;\r\n\r\n let tagProperties = {};\r\n let EventAction = '';\r\n if (Type === 'ProductConversionGoal') {\r\n EventAction = 'PRODUCT_PURCHASE';\r\n tagProperties = {\r\n ecomm_prodid: 'REPLACE_WITH_PRODUCT_ID', ecomm_pagetype: 'PURCHASE',\r\n };\r\n } else if (Type === 'EventGoal') {\r\n EventAction = Action;\r\n tagProperties = {\r\n event_label: Label, event_value: Value, event_category: Category,\r\n };\r\n }\r\n\r\n const isVariableRevenue = GoalValueType === 'VariantValue';\r\n const variableRevenuePlaceholder = '$Variable_revenue_placeholder$';\r\n if (isVariableRevenue) {\r\n tagProperties = { ...tagProperties, revenue_value: variableRevenuePlaceholder, currency: CurrencyCode };\r\n }\r\n let eventProperties = JSON.stringify(_.pick(tagProperties, value => !_.isEmpty(value) || _.isNumber(value)));\r\n eventProperties = eventProperties.replace(`\"${variableRevenuePlaceholder}\"`, 'Replace_with_Variable_Revenue_Function()');\r\n\r\n return {\r\n EventAction,\r\n EventProperties: eventProperties,\r\n };\r\n};\r\n","import _ from 'underscore';\r\nimport React, { useMemo, useCallback, useContext, useState, useEffect } from 'react';\r\nimport { notificationApi } from '@bingads-webui-react/notification-center';\r\nimport { renderToString } from 'react-dom/server';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { DefaultButton } from '@fluentui/react';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { CodeSnippet, getStepStyles } from '@bingads-webui-campaign-react/conversion-wizard-components';\r\nimport { generateTag } from '../utils/tag-generator';\r\nimport { InsertInstruction } from './insert-instructions';\r\nimport { WIZARD_ACTIONS } from '../../goal-creation-wizard-reducer';\r\nimport { endActivity } from '../../shared/util';\r\n\r\nconst CopyDownloadTagUnstyled = (props) => {\r\n const {\r\n classes,\r\n type,\r\n model,\r\n instructionsTemplate,\r\n onCopyCallback,\r\n onDownloadCallback,\r\n tagTemplates,\r\n logActivity,\r\n wizardDispatch,\r\n permissions,\r\n } = props;\r\n\r\n const i18n = useContext(I18nContext);\r\n const [notification, setNotification] = useState(null);\r\n const enhancedConversions = permissions.dynamic && permissions.dynamic.EnhancedConversions;\r\n\r\n const goToEmailTagPage = useCallback(() => {\r\n endActivity(logActivity);\r\n wizardDispatch({\r\n type: WIZARD_ACTIONS.GO_TO_EMAIL_DEVELOPER_STEP,\r\n });\r\n }, [logActivity, wizardDispatch]);\r\n\r\n const tagContent = useMemo(() =>\r\n generateTag(type, tagTemplates, model, true), [type, tagTemplates, model]);\r\n\r\n const copyTagToClipboard = useCallback(() => {\r\n navigator.clipboard.writeText(tagContent)\r\n .then(() => {\r\n setNotification({ message: i18n.getString(_TL_(('Tag copied!'))) });\r\n onCopyCallback({\r\n error: null,\r\n message: i18n.getString(_TL_(('Tag copied!'))),\r\n tag: tagContent,\r\n });\r\n })\r\n .catch((err) => {\r\n setNotification({ error: i18n.getString(_TL_(('Tag copy failed!'))) });\r\n onCopyCallback({\r\n error: typeof err === 'object' ? JSON.stringify(err) : err,\r\n message: i18n.getString(_TL_(('Tag copy failed!'))),\r\n tag: tagContent,\r\n });\r\n });\r\n }, [tagContent, onCopyCallback, i18n]);\r\n\r\n useEffect(() => {\r\n let notificationId;\r\n if (!_.isEmpty(notification)) {\r\n if (notification.message) {\r\n notificationId = notificationApi.showInfo(notification.message);\r\n } else if (notification.error) {\r\n notificationId = notificationApi.showWarning(notification.error);\r\n }\r\n }\r\n return () => notificationId && notificationApi.dismiss(notificationId);\r\n }, [notification]);\r\n\r\n const downloadTag = useCallback(() => {\r\n let htmlContents = '';\r\n\r\n try {\r\n htmlContents = renderToString((\r\n \r\n {i18n.getString(_TL_('Instructions:'))}\r\n
\r\n \r\n
\r\n \r\n
,\r\n b: text => ({text}),\r\n // eslint-disable-next-line jsx-a11y/anchor-is-valid\r\n a: () => (enhancedConversions ? sendToDevLink : {sendToDevLink}),\r\n hashingInstructions: () => (hashingInstructions ?
\r\n
\r\n
\r\n );\r\n};\r\n\r\nCopyDownloadTagUnstyled.propTypes = {\r\n type: PropTypes.string.isRequired,\r\n model: PropTypes.shape({}).isRequired,\r\n onCopyCallback: PropTypes.func.isRequired,\r\n onDownloadCallback: PropTypes.func.isRequired,\r\n classes: PropTypes.shape(_.mapObject(\r\n getStepStyles(),\r\n _.constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n instructionsTemplate: PropTypes.arrayOf(PropTypes.string).isRequired,\r\n logActivity: PropTypes.shape({}).isRequired,\r\n wizardDispatch: PropTypes.func.isRequired,\r\n tagTemplates: PropTypes.objectOf({}).isRequired,\r\n permissions: PropTypes.shape({\r\n dynamic: PropTypes.shape({\r\n EnhancedConversions: PropTypes.bool,\r\n }),\r\n }),\r\n};\r\n\r\nCopyDownloadTagUnstyled.defaultProps = {\r\n permissions: { dynamic: { EnhancedConversions: false } },\r\n};\r\n\r\nexport const CopyDownloadTag = withDefaultStyles(CopyDownloadTagUnstyled, getStepStyles);\r\n","import React, { useCallback } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport classNames from 'classnames';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { CodeSnippet, SeeExample, getStepStyles } from '@bingads-webui-campaign-react/conversion-wizard-components';\r\nimport { InsertInstruction } from '../../components/insert-instructions';\r\nimport { CopyDownloadTag } from '../../components/copy-download-tag';\r\nimport { tagSetupExampleTemplates } from '../../../shared/contants';\r\n\r\nconst TagSetupInstallManuallyStepViewUnstyled = (props) => {\r\n const {\r\n classes,\r\n i18n,\r\n tagId,\r\n uetTagInstructions,\r\n logActivity,\r\n wizardDispatch,\r\n tagTemplates,\r\n permissions,\r\n } = props;\r\n\r\n const copyCallback = useCallback((res) => {\r\n if (res && res.error) {\r\n logActivity.error(JSON.stringify(res));\r\n }\r\n logActivity.trace('Base tag copy clicked');\r\n }, [logActivity]);\r\n\r\n const downloadCallback = useCallback((res) => {\r\n if (res && res.error) {\r\n logActivity.error(JSON.stringify(res));\r\n }\r\n logActivity.trace('Base tag download clicked');\r\n }, [logActivity]);\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nTagSetupInstallManuallyStepViewUnstyled.propTypes = {\r\n classes: PropTypes.shape(_.mapObject(\r\n getStepStyles(),\r\n _.constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n i18n: PropTypes.shape({}).isRequired,\r\n tagId: PropTypes.number.isRequired,\r\n uetTagInstructions: PropTypes.arrayOf(PropTypes.any).isRequired,\r\n logActivity: PropTypes.shape({}).isRequired,\r\n wizardDispatch: PropTypes.func.isRequired,\r\n tagTemplates: PropTypes.objectOf(PropTypes.any).isRequired,\r\n permissions: PropTypes.shape({}).isRequired,\r\n};\r\n\r\nexport const TagSetupInstallManuallyStepView = withDefaultStyles(TagSetupInstallManuallyStepViewUnstyled, getStepStyles);\r\n","import React, { useCallback, useContext, useMemo } from 'react';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { withPerfMarker } from '@bingads-webui/performance-marker-react-wrapper';\r\nimport { StepContainer } from '../step-container/step-container';\r\nimport { WIZARD_ACTIONS } from '../../goal-creation-wizard-reducer';\r\nimport { GoalCreationWizardContext } from '../../goal-creation-wizard-context';\r\nimport { TagSetupInstallManuallyStepView } from './view/tag-setup-install-manually-view';\r\n\r\nconst TagSetupInstallManuallyStepUnstyled = (props) => {\r\n const { permissions } = props;\r\n const enhancedConversions = permissions.dynamic && permissions.dynamic.EnhancedConversions;\r\n const wizardContext = useContext(GoalCreationWizardContext);\r\n const i18n = useContext(I18nContext);\r\n\r\n const {\r\n goalContext: {\r\n Type,\r\n Tag: { Id },\r\n GoalValueType,\r\n IsEnhancedConversionsEnabled,\r\n }, logActivity, dispatch,\r\n } = wizardContext;\r\n\r\n const nextPageHandler = useCallback(() => {\r\n const goToEventTagSetup = Type === 'EventGoal' || Type === 'ProductConversionGoal'\r\n || GoalValueType === 'VariantValue';\r\n\r\n if (enhancedConversions && IsEnhancedConversionsEnabled) {\r\n wizardContext.dispatch({\r\n type: WIZARD_ACTIONS.NAVIGATE_TO_SETUP_ENHANCED_CONV,\r\n data: {},\r\n });\r\n } else {\r\n wizardContext.dispatch({\r\n type: goToEventTagSetup ?\r\n WIZARD_ACTIONS.NAVIGATE_WITH_TAG_INSTALL_INSTRUCTIONS :\r\n WIZARD_ACTIONS.WIZARD_NAVIGATE_NEXT,\r\n data: {},\r\n });\r\n }\r\n }, [GoalValueType, IsEnhancedConversionsEnabled, Type, enhancedConversions, wizardContext]);\r\n\r\n const handleCancel = useCallback(() => {\r\n wizardContext.exitWizard();\r\n }, [wizardContext]);\r\n\r\n const footerConfig = useMemo(() => ({\r\n buttons: [{\r\n type: 'Secondary',\r\n onClick: wizardContext.goBack,\r\n isEnabled: true,\r\n text: i18n.getString(_TL_(('Back'))),\r\n },\r\n {\r\n type: 'Primary',\r\n onClick: nextPageHandler,\r\n isEnabled: true,\r\n text: i18n.getString(_TL_(('Next'))),\r\n },\r\n {\r\n type: 'Cancel',\r\n onClick: handleCancel,\r\n isEnabled: true,\r\n text: i18n.getString(_TL_(('Cancel'))),\r\n }],\r\n }), [wizardContext.goBack, handleCancel, nextPageHandler, i18n]);\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n {validEmailAddresses.length > MAX_EMAIL_ADDRESSES_COUNT &&\r\n
\r\n );\r\n }, [i18n, isFirstRendered]);\r\n\r\n const onChangeEmailAddress = useCallback((textString) => {\r\n const userInputs = textString.split('\\n');\r\n const [validEmailAddresses, invalidEmailAddresses] = splitEmailAddresses(userInputs);\r\n setErrorText(genErrorMessage(validEmailAddresses, invalidEmailAddresses));\r\n setEmailAddressesTextInput(userInputs);\r\n }, [genErrorMessage]);\r\n\r\n const { aid, cid } = scope.values || {};\r\n const { Token } = serverContext;\r\n const { Type, GoalValueType, IsEnhancedConversionsEnabled } = goalContext || {};\r\n const eventType = Type === 'EventGoal' || Type === 'ProductConversionGoal' || GoalValueType === 'VariantValue' ? 'Event' : 'UET';\r\n const updatedEventType = isEnhancedConvPilotOn && IsEnhancedConversionsEnabled ? UpdatedEventType[eventType] : eventType;\r\n const emailContent = useMemo(() => (eventType === 'Event' ?\r\n Object.assign({\r\n TagId: tagId.toString(),\r\n }, getEventTagModel(goalContext)) :\r\n {\r\n TagId: tagId.toString(),\r\n }), [eventType, goalContext, tagId]);\r\n\r\n const onClickSendEmails = useCallback(() => {\r\n const [validEmailAddresses, invalidEmailAddresses] = splitEmailAddresses(emailAddressesTextInput);\r\n if (canSendEmail(validEmailAddresses, invalidEmailAddresses)) {\r\n setIsValid(true);\r\n const emailPromise = postEmail(cid, aid, Token, updatedEventType, genEmailAddresses(validEmailAddresses), emailContent);\r\n logActivity.trace(`Sending tag to ${validEmailAddresses.length} emails`);\r\n if (emailPromise) {\r\n setEmailStatus('pending');\r\n } else {\r\n logActivity.trace('Failed to send tag to email');\r\n setEmailStatus('failed');\r\n }\r\n\r\n emailPromise.then(() => {\r\n setEmailStatus('success');\r\n }).catch(() => {\r\n logActivity.trace('Failed to send tag to email');\r\n setEmailStatus('failed');\r\n });\r\n } else {\r\n setIsValid(false);\r\n }\r\n }, [emailAddressesTextInput, setIsValid, cid, aid, Token, updatedEventType, emailContent, logActivity]);\r\n\r\n useEffect(() => {\r\n let notificationId;\r\n if (emailStatus === 'success') {\r\n notificationId = notificationApi.showInfo(i18n.getString(_TL_('Email sent')));\r\n } else if (emailStatus === 'failed') {\r\n notificationId = notificationApi.showWarning(i18n.getString(_TL_('Oh, no! We weren\\'t able to send the email message. Please try again.')));\r\n }\r\n\r\n return () => notificationId && notificationApi.dismiss(notificationId);\r\n }, [emailStatus, i18n]);\r\n\r\n\r\n return (\r\n \r\n {`${exceedMaxValidMessage[0]}${MAX_EMAIL_ADDRESSES_COUNT}${exceedMaxValidMessage[1]}`}\r\n
\r\n }\r\n {validEmailAddresses.length === 0 &&\r\n \r\n {i18n.getString(_TL_('Please enter at least one valid email address.'))}\r\n
\r\n }\r\n {invalidEmailAddresses.length > 0 &&\r\n \r\n \r\n {address}\r\n \r\n ))}\r\n
\r\n }\r\n \r\n {i18n.getString(_TL_('Please correct these invalid email addresses:'))}\r\n
\r\n {_.map(invalidEmailAddresses, (address, idx) => (\r\n \r\n
\r\n );\r\n};\r\n\r\nTagSetupSendToDeveloperViewUnstyled.propTypes = {\r\n classes: PropTypes.shape(_.mapObject(\r\n getStepStyles(),\r\n _.constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n i18n: PropTypes.shape({}).isRequired,\r\n scope: PropTypes.shape({}).isRequired,\r\n serverContext: PropTypes.shape({\r\n Token: PropTypes.string.isRequired,\r\n }).isRequired,\r\n logActivity: PropTypes.shape({}).isRequired,\r\n tagId: PropTypes.number.isRequired,\r\n goalContext: PropTypes.objectOf(PropTypes.any),\r\n setIsValid: PropTypes.func,\r\n permissions: PropTypes.shape({\r\n dynamic: PropTypes.shape({\r\n EnhancedConversions: PropTypes.bool,\r\n }),\r\n }),\r\n};\r\n\r\nTagSetupSendToDeveloperViewUnstyled.defaultProps = {\r\n goalContext: null,\r\n setIsValid: _.identity,\r\n permissions: {\r\n dynamic: {\r\n EnhancedConversions: false,\r\n },\r\n },\r\n};\r\n\r\nexport const TagSetupSendToDeveloperView = withDefaultStyles(TagSetupSendToDeveloperViewUnstyled, getStepStyles);\r\n","import React, { useCallback, useContext, useMemo, useState } from 'react';\r\nimport { withPerfMarker } from '@bingads-webui/performance-marker-react-wrapper';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { StepContainer } from '../step-container/step-container';\r\nimport { TagSetupSendToDeveloperView } from './view/tag-setup-send-to-developer-view';\r\nimport { GoalCreationWizardContext } from '../../goal-creation-wizard-context';\r\n\r\nconst TagSetupSendToDeveloperStepUnstyled = () => {\r\n const wizardContext = useContext(GoalCreationWizardContext);\r\n const {\r\n logActivity,\r\n scope,\r\n serverContext,\r\n goalContext,\r\n } = wizardContext;\r\n const i18n = useContext(I18nContext);\r\n const [allowNext, setAllowNext] = useState(false);\r\n\r\n const handleCancel = useCallback(() => {\r\n wizardContext.exitWizard();\r\n }, [wizardContext]);\r\n\r\n const setIsValid = useCallback(isValid => setAllowNext(isValid), []);\r\n\r\n const footerConfig = useMemo(() => ({\r\n buttons: [{\r\n type: 'Secondary',\r\n onClick: wizardContext.goBack,\r\n isEnabled: true,\r\n text: i18n.getString(_TL_(('Back'))),\r\n },\r\n {\r\n type: 'Primary',\r\n onClick: wizardContext.goToNext,\r\n isEnabled: allowNext,\r\n text: i18n.getString(_TL_(('Next'))),\r\n },\r\n {\r\n type: 'Cancel',\r\n onClick: handleCancel,\r\n isEnabled: true,\r\n text: i18n.getString(_TL_(('Cancel'))),\r\n }],\r\n }), [wizardContext.goBack, wizardContext.goToNext, i18n, allowNext, handleCancel]);\r\n\r\n return (\r\n \r\n {i18n.getString(_TL_('Enter the email address or addresses of the people who will edit your website’s code and we’ll send them your tracking tag (you’ll be included on the mail).'))}\r\n
\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n {errorText}\r\n
\r\n \r\n
\r\n\r\n {i18n.getString(_TL_('You only need one tag in most cases, even for different websites. We recommend using your exisiting tag. But if you still want to create another tag,'))}\r\n \r\n
\r\n{isClarityGoal && i18n.getString(_TL_('Changing the tag will also remove your previous code-free Clarity event setup. You will need to set it up again for your conversions to continue working.'))}
\r\n\r\n
\r\n \r\n {render(properties)}\r\n {properties.checked &&\r\n
\r\n ),\r\n },\r\n { key: 'undetermined', text: i18n.getString(_TL_('I\\'m not sure. I need instructions to install the tag.')) },\r\n ];\r\n\r\n const { logActivity } = wizardContext;\r\n const [isDialogHidden, setIsDialogHidden] = useState(true);\r\n const [isTagSelected, setIsTagSelected] = useState(hasPreselectTag);\r\n const tagNameDefault = hasPreselectTag ? findTagById(wizardContext.goalContext.tags, tagId).Name : null;\r\n const [tagName, setTagName] = useState(tagNameDefault);\r\n const [tagInstallOption, setTagInstallOption] = useState(wizardContext.tagInstallOption);\r\n const [notificationError, setNotificationError] = useState(null);\r\n const [footerEnabled, setFooterEnabled] = useState(true);\r\n const [isIntegratedGtm, setIsIntegratedGtm] = useState(false);\r\n const [shouldBlockerLoading, setShouldBlockerLoading] = useState(hasPreselectTag);\r\n const [gtmAccountId, setGtmAccountId] = useState(null);\r\n const [gtmContainerId, setGtmContainerId] = useState(null);\r\n\r\n const checkExternalIntegrations = useCallback((selectedTagId) => {\r\n setShouldBlockerLoading(true);\r\n getExternalIntegrations(wizardContext.cid, wizardContext.aid, selectedTagId)\r\n .then((response) => {\r\n if (response.hasExternalIntegrations && response.GtmIntegrations && response.GtmIntegrations.length > 0) {\r\n const gtmIntegration = response.GtmIntegrations[0]; // take first row for now\r\n setGtmAccountId(gtmIntegration.AccountId);\r\n setGtmContainerId(gtmIntegration.ContainerId);\r\n setIsIntegratedGtm(true);\r\n } else {\r\n setIsIntegratedGtm(false);\r\n }\r\n if (response.GtmIntegrations && response.GtmIntegrations.length > 1) {\r\n logActivity.trace(`[GtmIntegration] ${JSON.stringify(response.GtmIntegrations)}`); // log multiple external integration for better UI decision\r\n }\r\n })\r\n .finally(() => {\r\n setShouldBlockerLoading(false);\r\n });\r\n }, [logActivity, wizardContext.aid, wizardContext.cid]);\r\n\r\n useEffect(() => {\r\n if (shouldBlockerLoading) {\r\n checkExternalIntegrations(tagId);\r\n }\r\n }, [checkExternalIntegrations, shouldBlockerLoading, tagId]);\r\n\r\n const handleNextInternal = useCallback((selectedTagInstallOption) => {\r\n const defaultTag = wizardContext.goalContext.Tag || {};\r\n const hasAutoCreatedTag = !!defaultTag.isAutoCreated;\r\n const hasPreferredTag = !!defaultTag.IsPreferredTag;\r\n const selectedAutoCreatedTag = tagId === defaultTag.Id;\r\n const selectedPreferredTag = tagId === defaultTag.Id;\r\n\r\n const isEnhancedConversionsEnabled = wizardContext.goalContext.IsEnhancedConversionsEnabled;\r\n const EnhancedConversions = wizardContext.permissions && wizardContext.permissions.dynamic\r\n && wizardContext.permissions.dynamic.EnhancedConversions;\r\n\r\n logActivity.trace(JSON.stringify({\r\n hasPreselectTag,\r\n hasAutoCreatedTag,\r\n hasPreferredTag,\r\n selectedAutoCreatedTag,\r\n selectedPreferredTag,\r\n defaultTagId: defaultTag.Id || 0,\r\n selectedTagId: tagId,\r\n isEnhancedConversionsEnabled,\r\n }));\r\n\r\n const goToSetUpEnhancedConversions = isEnhancedConversionsEnabled && EnhancedConversions;\r\n const goalDelta = {\r\n Tag: {\r\n Id: tagId,\r\n },\r\n };\r\n const deleteClarityEvent = isClarityGoal && tagId !== initialTagId;\r\n if (deleteClarityEvent) {\r\n logActivity.trace(`Deleting clarity event because tagId changed: ${wizardContext.goalContext.ClarityEventDefinitionId}`);\r\n }\r\n const payload = processPayload({\r\n ...wizardContext.goalContext,\r\n ...goalDelta,\r\n }, wizardContext.permissions, deleteClarityEvent);\r\n saveGoal(payload, wizardContext)\r\n .then((response) => {\r\n endActivity(logActivity);\r\n wizardContext.dispatch({\r\n type: WIZARD_ACTIONS.NAVIGATE_WITH_TAGINSTALL_OPTIONS,\r\n tagInstallOption: selectedTagInstallOption,\r\n data: Object.assign({\r\n ...goalDelta,\r\n Id: response.Id,\r\n }, deleteClarityEvent ? {\r\n ClarityEventDefinitionId: null,\r\n ClarityEventDefinitionObject: null,\r\n } : {}),\r\n switchToEdit: true,\r\n goToSetUpEnhancedConversions,\r\n });\r\n })\r\n .catch((response) => {\r\n setFooterEnabled(true);\r\n setNotificationError(getErrorMessage(response, i18n));\r\n });\r\n setFooterEnabled(false);\r\n }, [wizardContext, tagId, logActivity, hasPreselectTag, isClarityGoal, initialTagId, i18n]);\r\n\r\n const handleNext = useCallback(() => {\r\n handleNextInternal(isIntegratedGtm ? 'yes' : tagInstallOption);\r\n }, [handleNextInternal, isIntegratedGtm, tagInstallOption]);\r\n\r\n const continueToTagInstructions = useCallback(() => {\r\n handleNextInternal('no');\r\n }, [handleNextInternal]);\r\n\r\n useEffect(() => {\r\n let notificationId;\r\n if (!_.isEmpty(notificationError)) {\r\n notificationId = notificationApi.showWarning(notificationError);\r\n }\r\n return () => notificationId && notificationApi.dismiss(notificationId);\r\n }, [notificationError]);\r\n\r\n const onChangeTagSelection = useCallback((event, option) => {\r\n logActivity.trace(`No preferred tag, picked selected tag:${option.key}`);\r\n setTagId(option.key);\r\n setIsTagSelected(true);\r\n checkExternalIntegrations(option.key);\r\n }, [checkExternalIntegrations, logActivity]);\r\n\r\n const onChangeTagIntallSelection = useCallback((event, option) => {\r\n logActivity.trace(`Changed tag install selection to ${option.key}`);\r\n setTagInstallOption(option.key);\r\n }, [logActivity]);\r\n\r\n const onShowDialog = useCallback(() => {\r\n logActivity.trace('Clicked link to change selected tag');\r\n setIsDialogHidden(false);\r\n }, [logActivity]);\r\n\r\n const onSaveDialog = useCallback((selectedTag) => {\r\n const preferredTag = wizardContext.goalContext.Tag && wizardContext.goalContext.Tag.Id;\r\n logActivity.trace(`Preferred tag exists: ${preferredTag}. Changed to ${selectedTag.id}`);\r\n setIsDialogHidden(true);\r\n setTagId(selectedTag.Id);\r\n setTagName(selectedTag.Name);\r\n checkExternalIntegrations(selectedTag.Id);\r\n }, [checkExternalIntegrations, logActivity, wizardContext.goalContext.Tag]);\r\n\r\n const onDismissDialog = useCallback(() => {\r\n logActivity.trace('Dismissed dialog to change selected tag');\r\n setIsDialogHidden(true);\r\n }, [logActivity]);\r\n\r\n const tagDropdownList = useMemo(() => {\r\n const options = [];\r\n const { cid } = wizardContext;\r\n const tagList = wizardContext.goalContext.tags;\r\n _.each(tagList, (tag) => {\r\n const tagText = cid === tag.Owner.Id ? tag.Name : `${tag.Name} - ${tag.Owner.Name}`;\r\n options.push({ key: tag.Id, text: tagText, ariaLabel: tagText });\r\n });\r\n\r\n const sortedOptions = options.sort((a, b) => a.text.localeCompare(b.text));\r\n return sortedOptions;\r\n }, [wizardContext]);\r\n\r\n const footerConfig = useMemo(() => ({\r\n buttons: [{\r\n type: 'Secondary',\r\n onClick: wizardContext.goBack,\r\n isEnabled: footerEnabled,\r\n text: i18n.getString(_TL_('Back')),\r\n },\r\n {\r\n type: 'Primary',\r\n onClick: handleNext,\r\n isEnabled: footerEnabled && isTagSelected,\r\n text: isIntegratedGtm ? i18n.getString(_TL_('Skip base tag setup')) : i18n.getString(_TL_('Save and next')),\r\n },\r\n {\r\n type: 'Cancel',\r\n onClick: wizardContext.cancel,\r\n isEnabled: footerEnabled,\r\n text: i18n.getString(_TL_('Cancel')),\r\n }],\r\n }), [wizardContext.goBack, wizardContext.cancel, footerEnabled, i18n, handleNext, isTagSelected, isIntegratedGtm]);\r\n\r\n return (\r\n \r\n \r\n {i18n.getString(_TL_('For conversion tracking to work, make sure that the UET tag is on every page of your website and check that the tag ID you are using is'))} {tagId}\r\n {i18n.getString(_TL_('.'))}\r\n \r\n
}\r\n \r\n {hasPreselectTag ?\r\n (\r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nTagSelectionSubstepUnstyled.propTypes = {\r\n classes: PropTypes.shape(_.mapObject(\r\n getStepStyles(),\r\n _.constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n};\r\n\r\nexport const TagSelectionSubstep = withPerfMarker(withDefaultStyles(TagSelectionSubstepUnstyled, getStepStyles));\r\n","/**\r\n * Step hierarchy and the associated ids.\r\n */\r\nexport const STEP_PATHS = {\r\n info: { id: 'info' },\r\n specialPages: { id: 'specialPages' },\r\n editWebsite: {\r\n id: 'editWebsite',\r\n pickEdit: { id: 'editWebsite.pickEdit' },\r\n pickPlatform: { id: 'editWebsite.pickPlatform' },\r\n },\r\n tag: {\r\n id: 'tag',\r\n emailTag: { id: 'tag.emailTag' },\r\n thirdPartyTag: { id: 'tag.thirdPartyTag' },\r\n copyTag: { id: 'tag.copyTag' },\r\n googleTagManager: { id: 'tag.googleTagManager' },\r\n },\r\n};\r\n","import _ from 'underscore';\r\nimport { STEP_PATHS } from './step-paths';\r\n\r\nexport const WIZARD_ACTIONS = {\r\n WIZARD_NAVIGATE_TO_STEP: 'WIZARD_NAVIGATE_TO_STEP',\r\n WIZARD_NAVIGATE_BACK: 'WIZARD_NAVIGATE_BACK',\r\n WIZARD_NAVIGATE_NEXT: 'WIZARD_NAVIGATE_NEXT',\r\n WIZARD_SET_LAST_STEP_AND_NAVIGATE_NEXT: 'WIZARD_SET_LAST_STEP_AND_NAVIGATE_NEXT',\r\n // GTM session context\r\n WIZARD_UPDATE_GTM_SESSION_CONTEXT: 'WIZARD_UPDATE_GTM_SESSION_CONTEXT',\r\n};\r\n\r\nfunction navigateToStepIndex(state, index) {\r\n let stepIndexCurrent = index;\r\n const stepIndexMax = state.steps.length - 1;\r\n if (stepIndexCurrent < 0 || stepIndexCurrent > stepIndexMax) {\r\n // if step does not exist or is not permitted, take the user to stepIndexMax\r\n stepIndexCurrent = stepIndexMax;\r\n }\r\n\r\n return {\r\n ...state,\r\n stepIndexCurrent,\r\n };\r\n}\r\n\r\nconst basicSteps = [\r\n STEP_PATHS.info,\r\n STEP_PATHS.specialPages,\r\n STEP_PATHS.editWebsite.pickEdit,\r\n];\r\n\r\nexport const getWizardDefaultState = () => ({\r\n stepIndexCurrent: 0,\r\n steps: basicSteps,\r\n GTMContext: {\r\n IsGTMCloningChecked: true,\r\n AllowTagCloning: true,\r\n },\r\n});\r\n\r\nexport function conversionWizardReducer(state, action) {\r\n switch (action.type) {\r\n case (WIZARD_ACTIONS.WIZARD_NAVIGATE_TO_STEP):\r\n return navigateToStepIndex(\r\n state,\r\n _.findIndex(state.steps, action.step)\r\n );\r\n case (WIZARD_ACTIONS.WIZARD_NAVIGATE_BACK):\r\n return navigateToStepIndex(state, state.stepIndexCurrent - 1);\r\n case (WIZARD_ACTIONS.WIZARD_NAVIGATE_NEXT):\r\n return navigateToStepIndex(state, state.stepIndexCurrent + 1);\r\n case (WIZARD_ACTIONS.WIZARD_SET_LAST_STEP_AND_NAVIGATE_NEXT): {\r\n // Choose next step based on state.\r\n // By default, use the tag[editSubstep] - this covers most cases.\r\n // But, if the substep is third party tag and no platform is selected, show the pickPlatform step.\r\n let nextStep = STEP_PATHS.tag[action.editSubstep];\r\n\r\n if (action.editSubstep === 'thirdPartyTag' && !action.selectedPlatform) {\r\n nextStep = STEP_PATHS.editWebsite.pickPlatform;\r\n }\r\n\r\n // Because there are multiple options for adding steps, the state cannot be easily recreated from basicSteps.\r\n // Instead, trim state-based steps back to the current step, then add the next one.\r\n const oldSteps = [...state.steps];\r\n\r\n oldSteps.length = state.stepIndexCurrent + 1;\r\n\r\n const updatedState = {\r\n ...state,\r\n steps: [...oldSteps, nextStep],\r\n selectedPlatform: action.selectedPlatform,\r\n };\r\n return navigateToStepIndex(updatedState, state.stepIndexCurrent + 1);\r\n }\r\n case (WIZARD_ACTIONS.WIZARD_UPDATE_GTM_SESSION_CONTEXT):\r\n return {\r\n ...state,\r\n GTMContext: { ...action.GTMContext },\r\n };\r\n\r\n default: throw new Error(`Invalid conversion wizard action: ${action.type}`);\r\n }\r\n}\r\n","export const getGtmInstructionsStyles = () => ({\r\n container: {\r\n fontFamily: 'Segoe UI',\r\n fontStyle: 'normal',\r\n fontSize: '16px',\r\n lineHeight: '24px',\r\n color: '#323130',\r\n marginBottom: '12px',\r\n },\r\n steps: {\r\n fontSize: '14px',\r\n marginBottom: '12px',\r\n },\r\n instructionContainer: {\r\n marginLeft: '29px',\r\n marginTop: '16px',\r\n paddingBottom: '16px',\r\n },\r\n instructionBody: {\r\n marginLeft: '50px',\r\n fontWeight: 'normal',\r\n fontSize: '14px',\r\n lineHeight: '23px',\r\n },\r\n instructionTitle: {\r\n fontWeight: 400,\r\n fontSize: '15px',\r\n lineHeight: '20px',\r\n },\r\n instructionInfo: {\r\n background: '#EFF6FC',\r\n fontWeight: 'normal',\r\n fontSize: '12px',\r\n lineHeight: '36px',\r\n height: '36px',\r\n maxWidth: '696px',\r\n },\r\n instructionInfoIcon: {\r\n paddingLeft: '8px',\r\n paddingRight: '8px',\r\n },\r\n instructionImage: {\r\n marginRight: '79px',\r\n marginBottom: '20px',\r\n maxWidth: 1000,\r\n },\r\n downloadButton: {\r\n marginTop: '12px',\r\n },\r\n downloadButtonIcon: {\r\n color: '#0078D4',\r\n },\r\n eventParamTable: {\r\n borderTop: '1px solid #979797',\r\n borderCollapse: 'collapse',\r\n tableLayout: 'fixed',\r\n width: 800,\r\n marginTop: 7,\r\n\r\n '& th': {\r\n borderBottom: '1px solid #979797',\r\n padding: 12,\r\n textAlign: 'left',\r\n },\r\n\r\n '& tr': {\r\n display: 'table-row',\r\n verticalAlign: 'inherit',\r\n borderColor: 'inherit',\r\n\r\n '& td:first-child': {\r\n borderLeft: 0,\r\n },\r\n\r\n '& td:last-child': {\r\n borderRight: 0,\r\n },\r\n },\r\n\r\n '& td': {\r\n border: '1px solid #F3F2F1',\r\n padding: 12,\r\n },\r\n },\r\n});\r\n","import React, { useCallback } from 'react';\r\nimport _ from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { DefaultButton } from '@fluentui/react';\r\nimport { ReactTemplate } from '@bingads-webui-react/react-template';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { getGtmInstructionsStyles } from './gtm-instructions-styles';\r\nimport { getExpressionOperatorOptions, getValueOperatorOptions } from '../../../components/goal-creation-options';\r\nimport imageStep3 from '../../assets/add-new-tag-gtm.png';\r\nimport imageStep4 from '../../assets/step4Image.png';\r\nimport imageStep5EventGoal from '../../assets/step5ImageEventGoal.png';\r\nimport imageStep5DestinationGoal from '../../assets/step5ImageDestinationGoal.png';\r\nimport imageStep5ProductGoal from '../../assets/step5ImageProductGoal.png';\r\n\r\nconst GtmSetupInstructionsViewUnstyled = (props) => {\r\n const {\r\n classes,\r\n i18n,\r\n type,\r\n context,\r\n } = props;\r\n const noTranslateModel = { noTranslate: text => ({text}) };\r\n const step3aTemplate = i18n.getString(_TL_('1. Go to {{noTranslate}}Tags{{/noTranslate}}.'));\r\n const step3bTemplate = i18n.getString(_TL_('2. Click {{noTranslate}}New{{/noTranslate}}.'));\r\n const step4Template = i18n.getString(_TL_('Under Tag Configuration, select {{noTranslate}}choose a tag type to begin setup{{/noTranslate}}.'));\r\n const step5Template = i18n.getString(_TL_('Search for {{noTranslate}}Microsoft Advertising Universal Event Tracking{{/noTranslate}} and then update tag configuration.'));\r\n const step6Template = i18n.getString(_TL_('Click {{noTranslate}}Submit{{/noTranslate}} and then {{noTranslate}}publish{{/noTranslate}} the changes.'));\r\n\r\n const handleClick = useCallback(() => {\r\n window.open(\r\n 'https://tagmanager.google.com/', // TODO: replace with account ID url\r\n '_blank' // <- This is what makes it open in a new window.\r\n );\r\n }, []);\r\n\r\n const getExpressionOpI18n = useCallback((opName) => {\r\n let i18nName;\r\n _.each(getExpressionOperatorOptions(i18n), (option) => {\r\n if (opName === option.key) {\r\n i18nName = option.text;\r\n }\r\n });\r\n return i18nName;\r\n }, [i18n]);\r\n\r\n const getValueOpI18n = useCallback((opName) => {\r\n let i18nName;\r\n _.each(getValueOperatorOptions(i18n), (option) => {\r\n if (opName === option.key) {\r\n i18nName = option.text;\r\n }\r\n });\r\n return i18nName;\r\n }, [i18n]);\r\n\r\n return (\r\n \r\n
\r\n ) :\r\n (\r\n {`${i18n.getString(_TL_('UET tag we are using:'))}`}{` ${tagName}`}
\r\n{`${i18n.getString(_TL_('Don’t see the tag you want?'))} `}\r\n {// eslint-disable-next-line jsx-a11y/anchor-is-valid\r\n }{i18n.getString(_TL_('Use a different tag'))}\r\n
\r\n {!isDialogHidden &&\r\n
\r\n )\r\n }\r\n \r\n {isTagSelected && !isIntegratedGtm && !shouldBlockerLoading &&\r\n
\r\n \r\n
\r\n }\r\n {isIntegratedGtm && !shouldBlockerLoading &&\r\n {i18n.getString(_TL_('Do you have this UET tag installed on your website?'))}
\r\n\r\n
\r\n }\r\n \r\n {i18n.getString(_TL_('Looks like you have already set up this UET tag with Google Tag Manager account '))}\r\n {gtmAccountId}\r\n {i18n.getString(_TL_(' and container '))}\r\n {gtmContainerId}\r\n
\r\n
\r\n );\r\n};\r\n\r\nGtmSetupInstructionsViewUnstyled.propTypes = {\r\n classes: PropTypes.shape(_.mapObject(\r\n getGtmInstructionsStyles(),\r\n _.constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n i18n: PropTypes.shape({}).isRequired,\r\n type: PropTypes.string.isRequired,\r\n context: PropTypes.shape({\r\n gtmAccountId: PropTypes.string.isRequired,\r\n gtmAccountName: PropTypes.string.isRequired,\r\n gtmContainerName: PropTypes.string.isRequired,\r\n eventParams: PropTypes.shape({}).isRequired,\r\n }).isRequired,\r\n};\r\n\r\nexport const GtmSetupInstructionsView = withDefaultStyles(GtmSetupInstructionsViewUnstyled, getGtmInstructionsStyles);\r\n","import React, { useCallback, useContext, useMemo, useState, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport classNames from 'classnames';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { notificationApi } from '@bingads-webui-react/notification-center';\r\nimport { withPerfMarker } from '@bingads-webui/performance-marker-react-wrapper';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { ReactTemplate } from '@bingads-webui-react/react-template';\r\nimport { Dropdown, Link } from '@fluentui/react';\r\nimport { WIZARD_ACTIONS as SHARED_WIZARD_ACTIONS } from '@bingads-webui-campaign-react/conversion-wizard/src/conversion-wizard-reducer';\r\nimport { CodeSnippet, SeeExample, getStepStyles } from '@bingads-webui-campaign-react/conversion-wizard-components';\r\nimport { StepContainer } from '../step-container/step-container';\r\nimport { GoalCreationWizardContext } from '../../goal-creation-wizard-context';\r\nimport { GtmSetupInstructionsView } from './gtm-instruction-view/gtm-setup-instructions';\r\nimport { CopyDownloadTag } from '../components/copy-download-tag';\r\nimport { InsertInstruction } from '../components/insert-instructions';\r\nimport { eventTrackingMethods, eventTagSetupTemplates, tagSetupExampleTemplates } from '../../shared/contants';\r\nimport { getEventTagModel } from '../utils/tag-generator';\r\nimport { EventParamSetting } from '../../components/event-param-setting';\r\nimport { validateSpecificView } from '../../shared/validation-util';\r\nimport { getErrorMessage, processPayload, saveGoal } from '../../conversion-goals-repository';\r\nimport { endActivity } from '../../shared/util';\r\nimport { WIZARD_ACTIONS } from '../../goal-creation-wizard-reducer';\r\n\r\nconst TagSetupInstallEventTagUnstyled = (props) => {\r\n const {\r\n classes,\r\n permissions,\r\n } = props;\r\n\r\n const wizardContext = useContext(GoalCreationWizardContext);\r\n const { logActivity, goalContext: { Type: goalType } } = wizardContext;\r\n const i18n = useContext(I18nContext);\r\n\r\n const [showEventGoalError, setShowEventGoalError] = useState(false);\r\n const resetShowEventGoalError = useCallback(() => setShowEventGoalError(false), []);\r\n\r\n const [goalObj, setGoalObj] = useState(wizardContext.goalContext);\r\n const updateSpecificSettings = useCallback((updatedProps) => {\r\n setGoalObj({\r\n ...goalObj,\r\n ...updatedProps,\r\n });\r\n }, [goalObj]);\r\n\r\n const isClarityTagSetupAllowed = permissions && permissions.dynamic && permissions.dynamic.IsClarityTagSetupAllowed;\r\n\r\n const displayEventGoalParameters = isClarityTagSetupAllowed && goalType === 'EventGoal';\r\n\r\n const {\r\n Action,\r\n ActionOperator,\r\n Category,\r\n CategoryOperator,\r\n Label,\r\n LabelOperator,\r\n Value,\r\n ValueOperator,\r\n } = goalObj;\r\n const tagModel = getEventTagModel(goalObj);\r\n\r\n const hardCodedEventTrackingMethod = goalType !== 'ProductConversionGoal' &&\r\n goalType !== 'EventGoal' ? 'PageLoad' : null;\r\n const [eventTrackingMethod, setEventTrackingMethod] = useState(hardCodedEventTrackingMethod);\r\n const [notificationError, setNotificationError] = useState(null);\r\n useEffect(() => {\r\n let notificationId;\r\n if (!_.isEmpty(notificationError)) {\r\n notificationId = notificationApi.showWarning(notificationError);\r\n }\r\n return () => notificationId && notificationApi.dismiss(notificationId);\r\n }, [notificationError]);\r\n\r\n const [footerEnabled, setFooterEnabled] = useState(true);\r\n const goToGtmInstructionPage = useCallback(() => {\r\n wizardContext.dispatch({\r\n type: SHARED_WIZARD_ACTIONS.WIZARD_UPDATE_GTM_SESSION_CONTEXT,\r\n GTMContext: {\r\n workflowCompleted: true,\r\n },\r\n });\r\n }, [wizardContext]);\r\n\r\n const handleCancel = useCallback(() => {\r\n wizardContext.exitWizard();\r\n }, [wizardContext]);\r\n\r\n const handleNext = useCallback(() => {\r\n // TODO: update handle next\r\n if (displayEventGoalParameters) {\r\n if (!validateSpecificView(goalObj)) {\r\n setShowEventGoalError(true);\r\n } else {\r\n saveGoal(processPayload(goalObj, permissions), wizardContext).then(() => {\r\n endActivity(logActivity);\r\n wizardContext.dispatch({\r\n type: WIZARD_ACTIONS.NAVIGATE_TO_LAST_STEP,\r\n data: {\r\n ...goalObj,\r\n },\r\n switchToEdit: true,\r\n });\r\n })\r\n .catch((response) => {\r\n setFooterEnabled(true);\r\n setNotificationError(getErrorMessage(response, i18n));\r\n });\r\n setFooterEnabled(false);\r\n }\r\n } else {\r\n wizardContext.goToNext();\r\n }\r\n }, [displayEventGoalParameters, goalObj, permissions, wizardContext, logActivity, i18n]);\r\n\r\n const primaryBtnText = useMemo(() => {\r\n if (displayEventGoalParameters) {\r\n return i18n.getString(_TL_('Save and next'));\r\n }\r\n return i18n.getString(_TL_(('Next')));\r\n }, [displayEventGoalParameters, i18n]);\r\n\r\n const footerConfig = useMemo(() => ({\r\n buttons: [{\r\n type: 'Secondary',\r\n onClick: wizardContext.goBack,\r\n isEnabled: footerEnabled,\r\n text: i18n.getString(_TL_(('Back'))),\r\n },\r\n {\r\n type: 'Primary',\r\n onClick: handleNext,\r\n // TODO: update handle next\r\n isEnabled: footerEnabled && (!_.isEmpty(eventTrackingMethod) || (wizardContext.GTMContext && wizardContext.GTMContext.workflowCompleted)),\r\n text: primaryBtnText,\r\n },\r\n {\r\n type: 'Cancel',\r\n onClick: handleCancel,\r\n isEnabled: footerEnabled,\r\n text: i18n.getString(_TL_(('Cancel'))),\r\n }],\r\n }), [wizardContext.goBack, wizardContext.GTMContext, footerEnabled, i18n, handleNext, eventTrackingMethod, primaryBtnText, handleCancel]);\r\n\r\n const onChangeEventTrackingMethodCb = useCallback((e, selected) => {\r\n setEventTrackingMethod(selected.key);\r\n }, [setEventTrackingMethod]);\r\n\r\n const copyCallback = useCallback((res) => {\r\n if (res && res.error) {\r\n logActivity.error(JSON.stringify(res));\r\n }\r\n logActivity.trace('Base tag copy clicked');\r\n }, [logActivity]);\r\n\r\n const downloadCallback = useCallback((res) => {\r\n if (res && res.error) {\r\n logActivity.error(JSON.stringify(res));\r\n }\r\n logActivity.trace('Base tag download clicked');\r\n }, [logActivity]);\r\n\r\n let tagTemplate;\r\n if (eventTrackingMethod === eventTrackingMethods.InlineAction.key) {\r\n tagTemplate = goalObj.GoalValueType === 'VariantValue' ?\r\n wizardContext.tagTemplates.InlineEventTagWithRevenueInstructions : wizardContext.tagTemplates.InlineEventTagInstructions;\r\n } else if (eventTrackingMethod === eventTrackingMethods.PageLoad.key) {\r\n tagTemplate = goalObj.GoalValueType === 'VariantValue' ?\r\n wizardContext.tagTemplates.PageLoadEventTagWithRevenueInstructions : wizardContext.tagTemplates.PageLoadEventTagInstructions;\r\n }\r\n\r\n const generateEventTagInstructions = useMemo(() => {\r\n if (wizardContext.GTMContext && wizardContext.GTMContext.workflowCompleted) {\r\n logActivity.trace('[GoalCreationWizard][GtmBaseTagSetup] render gtm instructions');\r\n return (\r\n \r\n
\r\n {type !== 'DestinationGoal' && (\r\n \r\n
\r\n {i18n.getString(_TL_('Step 1: Access your Google Tag Manager account'))}
\r\n\r\n {i18n.getString(_TL_('Update Google Tag Manager account'))} \r\n
\r\n {i18n.getString(_TL_('Click Update Google Tag Manager account to open your Google Tag Manager account.'))}
\r\n\r\n
\r\n )}\r\n \r\n
\r\n \r\n {`${i18n.getString(_TL_('Step 2: Go to the Google Tag Manager'))} `}\r\n {i18n.getString(_TL_('account'))}{context.gtmAccountName ? ` (${context.gtmAccountName})` : ''}\r\n {` ${i18n.getString(_TL_('and'))} `}\r\n {i18n.getString(_TL_('container'))}{context.gtmContainerName ? ` (${context.gtmContainerName})` : ''}\r\n {` ${i18n.getString(_TL_('you selected in the previous steps'))}`}\r\n
\r\n\r\n
\r\n \r\n
\r\n \r\n {`${type === 'DestinationGoal' ? i18n.getString(_TL_('Step 2:')) : i18n.getString(_TL_('Step 3:'))} ${i18n.getString(_TL_('Add a new tag to your container'))}`}\r\n
\r\n\r\n
\r\n \r\n \r\n
\r\n {i18n.getString(_TL_('Make sure are logged into your Google Tag Manager account and use the same account and container selected previously.'))}
\r\n\r\n
\r\n
\r\n
\r\n \r\n
\r\n \r\n {`${type === 'DestinationGoal' ? i18n.getString(_TL_('Step 3:')) : i18n.getString(_TL_('Step 4:'))} `}\r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {type === 'EventGoal' &&\r\n \r\n {`${type === 'DestinationGoal' ? i18n.getString(_TL_('Step 4:')) : i18n.getString(_TL_('Step 5:'))} `}\r\n
\r\n \r\n \r\n
\r\n
\r\n }\r\n {type === 'DestinationGoal' &&\r\n \r\n 
\r\n
\r\n {i18n.getString(_TL_('Custom event used by this conversion goal'))}
\r\n| {i18n.getString(_TL_('Custom event parameters'))} | \r\n{i18n.getString(_TL_('Qualifier'))} | \r\n{i18n.getString(_TL_('Value'))} | \r\n
|---|---|---|
| Event action | \r\n{getExpressionOpI18n(context.eventParams.ActionOperator)} | \r\n{context.eventParams.Action} | \r\n
| Event category | \r\n{getExpressionOpI18n(context.eventParams.CategoryOperator)} | \r\n{context.eventParams.Category} | \r\n
| Event label | \r\n{getExpressionOpI18n(context.eventParams.LabelOperator)} | \r\n{context.eventParams.Label} | \r\n
| Event value | \r\n{getValueOpI18n(context.eventParams.ValueOperator)} | \r\n{context.eventParams.Value} | \r\n
\r\n
\r\n }\r\n {type === 'ProductConversionGoal' &&\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 {`${type === 'DestinationGoal' ? i18n.getString(_TL_('Step 5:')) : i18n.getString(_TL_('Step 6:'))} `}\r\n
\r\n
\r\n );\r\n }\r\n\r\n const showManualEventTrackingInstructions = eventTrackingMethods.InlineAction.key === eventTrackingMethod\r\n || eventTrackingMethods.PageLoad.key === eventTrackingMethod;\r\n return (\r\n \r\n {!hardCodedEventTrackingMethod &&\r\n
\r\n );\r\n }, [Action, ActionOperator, Category, CategoryOperator, Label, LabelOperator, Value, ValueOperator, classes.bodyText, classes.contentBlock, classes.instructionsHeader, classes.section, copyCallback, downloadCallback, eventTrackingMethod, goToGtmInstructionPage, goalType, hardCodedEventTrackingMethod, i18n, logActivity, onChangeEventTrackingMethodCb, permissions, tagModel, tagTemplate, wizardContext.GTMContext, wizardContext.dispatch, wizardContext.tagTemplates]);\r\n\r\n return (\r\n \r\n ({ ...method, text: i18n.getString(method.text) }))}\r\n styles={{ dropdown: { width: 250 } }}\r\n placeholder={i18n.getString(_TL_('Please select an option'))}\r\n />\r\n
\r\n }\r\n\r\n {showManualEventTrackingInstructions &&\r\n \r\n {text},\r\n }}\r\n />\r\n
\r\n \r\n {i18n.getString(_TL_('When do you want to track this event?'))}\r\n
\r\n {i18n.getString(_TL_('We will give you instructions for setting up the event tag based on what you select.'))}
\r\n\r\n
}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
}\r\n {generateEventTagInstructions}\r\n \r\n\r\n );\r\n};\r\n\r\nTagSetupInstallEventTagUnstyled.propTypes = {\r\n classes: PropTypes.shape(_.mapObject(\r\n getStepStyles(),\r\n _.constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n permissions: PropTypes.shape({}).isRequired,\r\n};\r\n\r\nexport const TagSetupInstallEventTag = withPerfMarker(withDefaultStyles(TagSetupInstallEventTagUnstyled, getStepStyles));\r\n","import React, { useState, useCallback, useContext, useMemo } from 'react';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { UiBlocker } from '@bingads-webui-react/ui-blocker';\r\nimport { ClarityEventSetup, getStepStyles } from '@bingads-webui-campaign-react/conversion-wizard-components';\r\nimport { withServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport { StepContainer } from '../step-container/step-container';\r\n// import { getStepStyles } from '@bingads-webui-campaign-react/conversion-wizard-components';\r\nimport { GoalCreationWizardContext } from '../../goal-creation-wizard-context';\r\nimport { getClarityEventInfo,\r\n postClarityEventInfo,\r\n getErrorMessage,\r\n saveGoal,\r\n processPayload,\r\n updateGoalObjectForClaritySetup } from '../../conversion-goals-repository';\r\nimport { WIZARD_ACTIONS } from '../../goal-creation-wizard-reducer';\r\n\r\nconst containerStyles = () => ({\r\n ...getStepStyles(),\r\n});\r\n\r\nconst UnstyledTagSetupInstallEventTagWithClarity = (props) => {\r\n const wizardContext = useContext(GoalCreationWizardContext);\r\n const i18n = useContext(I18nContext);\r\n const [shouldBlockerLoading, setShouldBlockerLoading] = useState(true);\r\n const [clarityEventObjectExists, setClarityEventObjectExists] = useState(false);\r\n const { isUpdateRequired, goal } = useMemo(() => updateGoalObjectForClaritySetup(wizardContext.goalContext), [wizardContext.goalContext]);\r\n\r\n const saveGoalParametersAndPostClarity = useCallback((cid, aid, Id, Token, clarityEventInfo) => {\r\n const p$processedGoal = isUpdateRequired ? saveGoal(processPayload(goal, wizardContext.permissions), wizardContext) : Promise.resolve();\r\n return p$processedGoal.then(() => postClarityEventInfo(cid, aid, Id, Token, clarityEventInfo));\r\n }, [goal, isUpdateRequired, wizardContext]);\r\n\r\n const clarityTagSetupRepository = useMemo(() => ({\r\n getClarityEventInfo,\r\n postClarityEventInfo: saveGoalParametersAndPostClarity,\r\n getErrorMessage,\r\n saveGoal,\r\n processPayload,\r\n }), [saveGoalParametersAndPostClarity]);\r\n\r\n const handleSkipForNow = useCallback(() => {\r\n // logActivity.trace(`[ClarityEventSetup] Skip for now clicked for tag id: ${tagId}`);\r\n wizardContext.goToNext();\r\n }, [wizardContext]);\r\n\r\n const footerConfig = useMemo(() => ({\r\n buttons: [{\r\n type: 'Secondary',\r\n onClick: wizardContext.goBack,\r\n isEnabled: true,\r\n text: i18n.getString(_TL_(('Back'))),\r\n },\r\n {\r\n type: 'Primary',\r\n onClick: wizardContext.goToNext,\r\n isEnabled: clarityEventObjectExists && !shouldBlockerLoading,\r\n text: i18n.getString(_TL_(('Next'))),\r\n },\r\n {\r\n type: 'Cancel',\r\n onClick: wizardContext.cancel,\r\n isEnabled: !shouldBlockerLoading,\r\n text: i18n.getString(_TL_(('Cancel'))),\r\n },\r\n ...(!clarityEventObjectExists ?\r\n [{\r\n type: 'Link',\r\n onClick: handleSkipForNow,\r\n isEnabled: !shouldBlockerLoading,\r\n text: i18n.getString(_TL_(('I\\'ll do this later, skip for now'))),\r\n }] : [])],\r\n }), [wizardContext.goBack, wizardContext.goToNext, wizardContext.cancel, i18n, clarityEventObjectExists, shouldBlockerLoading, handleSkipForNow]);\r\n\r\n const goToManualSetupPage = useCallback((payload) => {\r\n wizardContext.dispatch(Object.assign({\r\n type: WIZARD_ACTIONS.EVENT_TAG_SETUP,\r\n eventTagSetupMethod: 'manualSetup',\r\n }, payload ? { data: payload } : {}));\r\n }, [wizardContext]);\r\n\r\n const stepTitle = wizardContext.goalContext.Type === 'EventGoal' ? i18n.getString(_TL_('Add Event tag')) : i18n.getString(_TL_('Add URL tag'));\r\n return (\r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport const TagSetupInstallEventTagWithClarity = withDefaultStyles(withServerContext(UnstyledTagSetupInstallEventTagWithClarity), containerStyles);\r\n","\r\nimport _ from 'underscore';\r\nimport React, { useCallback, useContext, useMemo, useEffect, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { UiBlocker } from '@bingads-webui-react/ui-blocker';\r\nimport { notificationApi } from '@bingads-webui-react/notification-center';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { ThirdPartyTagView, useDependencies } from '@bingads-webui-campaign-react/edit-website-pages';\r\nimport {\r\n errorCodeMapping,\r\n titleArray,\r\n defaultConfig,\r\n} from '@bingads-webui-campaign-react/conversion-wizard-components';\r\nimport { GoalCreationWizardContext } from '../../goal-creation-wizard-context';\r\nimport { WIZARD_ACTIONS } from '../../goal-creation-wizard-reducer';\r\nimport { StepContainer } from '../step-container/step-container';\r\n\r\nexport const GtmBaseTagSetupStep = (props) => {\r\n const {\r\n selectedPlatform,\r\n serverContext,\r\n } = props;\r\n const i18n = useContext(I18nContext);\r\n const wizardContext = useContext(GoalCreationWizardContext);\r\n const { logActivity } = wizardContext;\r\n const [footerConfigId, setFooterConfigId] = useState(1);\r\n const { sessionId: sessionIdInContext, IsGTMCloningChecked } = wizardContext.GTMContext;\r\n const {\r\n goalContext: {\r\n Tag: { Id: tagId }, Type, GoalValueType, IsEnhancedConversionsEnabled,\r\n },\r\n } = wizardContext;\r\n const tagContext = {\r\n data: {\r\n id: tagId,\r\n type: 'UET',\r\n },\r\n isLoading: false,\r\n error: null,\r\n getTag: _.noop,\r\n createTag: _.noop,\r\n };\r\n const [token, repository, isAllDependenciesLoaded] = useDependencies({ serverContext });\r\n\r\n const { Id: accountId, CurrencyCode, TimeZone: timeZoneId } = serverContext.CurrentAccount;\r\n const { Id: userId, Name: userName } = serverContext.CurrentUser;\r\n const [taskItemBasics, setTaskItemBasics] = useState({\r\n ...defaultConfig(IsGTMCloningChecked),\r\n TimeZoneId: timeZoneId,\r\n AccountId: accountId,\r\n UserId: userId,\r\n UserName: userName,\r\n });\r\n const [gtmImportContext, setGtmImportContext] = useState({ '@odata.type': '#Model.GTMImportContext', CurrencyCode });\r\n\r\n const [isPollTaskStarted, setIsPollTaskStarted] = useState(false);\r\n\r\n useEffect(() => {\r\n logActivity.trace(`[GoalCreationWizard] platform: ${selectedPlatform}`);\r\n }, [logActivity, selectedPlatform]);\r\n\r\n useEffect(() => {\r\n if (footerConfigId) {\r\n logActivity.trace(`[${selectedPlatform}] render page ${footerConfigId}`);\r\n }\r\n }, [footerConfigId, logActivity, selectedPlatform]);\r\n\r\n const updateGTMImportContext = useCallback((updatedContext) => {\r\n setGtmImportContext({ ...gtmImportContext, ...updatedContext.requestBody });\r\n if (updatedContext.requestBody.SessionId !== sessionIdInContext) {\r\n wizardContext.dispatch({\r\n type: WIZARD_ACTIONS.WIZARD_UPDATE_GTM_SESSION_CONTEXT,\r\n GTMContext: {\r\n ...wizardContext.GTMContext,\r\n loginEmail: updatedContext.loginEmail,\r\n sessionId: updatedContext.requestBody.SessionId,\r\n GTMAccountId: null,\r\n GTMContainerId: null,\r\n GTMAccountName: null,\r\n GTMContainerName: null,\r\n },\r\n });\r\n } else {\r\n const updateGTMCloningCheckedOption = typeof updatedContext.cloneExistingTags === 'boolean' &&\r\n updatedContext.cloneExistingTags !== taskItemBasics.ImportUserPreference.ImportNewEntities;\r\n\r\n wizardContext.dispatch({\r\n type: WIZARD_ACTIONS.WIZARD_UPDATE_GTM_SESSION_CONTEXT,\r\n GTMContext: Object.assign({\r\n ...wizardContext.GTMContext,\r\n GTMAccountId: updatedContext.requestBody.GTMAccountId || wizardContext.GTMContext.GTMAccountId,\r\n GTMContainerId: updatedContext.requestBody.GTMContainerId || wizardContext.GTMContext.GTMContainerId,\r\n GTMAccountName: updatedContext.GTMAccountName || wizardContext.GTMContext.GTMAccountName,\r\n GTMContainerName: updatedContext.GTMContainerName || wizardContext.GTMContext.GTMContainerName,\r\n }, updateGTMCloningCheckedOption ? { IsGTMCloningChecked: updatedContext.cloneExistingTags } : {}),\r\n });\r\n\r\n if (updateGTMCloningCheckedOption) {\r\n setTaskItemBasics({\r\n ...taskItemBasics,\r\n ImportUserPreference: {\r\n ...taskItemBasics.ImportUserPreference,\r\n ImportNewEntities: updatedContext.cloneExistingTags,\r\n },\r\n });\r\n }\r\n }\r\n }, [gtmImportContext, sessionIdInContext, taskItemBasics, wizardContext]);\r\n\r\n const handleCancel = useCallback(() => {\r\n logActivity.trace('[GoalCreationWizard][GtmBaseTagSetup] cancelStep');\r\n const logObject = {\r\n currentStep: `thirdParty.${selectedPlatform}`,\r\n };\r\n logActivity.trace(`[GoalCreationWizard][GtmBaseTagSetup] complete log: ${logObject}`); // log drop off platform\r\n wizardContext.exitWizard();\r\n }, [logActivity, selectedPlatform, wizardContext]);\r\n\r\n const submitTaskItem = useCallback(() => {\r\n setIsPollTaskStarted(true);\r\n // create task item\r\n const taskItem = {\r\n ...taskItemBasics,\r\n GTMImportContext: gtmImportContext,\r\n };\r\n repository.createGTMImportTaskItem(taskItem)\r\n .then((res) => {\r\n if (_.isArray(res.TaskItemExecutions)) {\r\n // get task execution status\r\n const taskItemExecutionId = _.first(res.TaskItemExecutions).Id;\r\n repository.pollTaskExecutionStatus(taskItemExecutionId)\r\n .then((data) => {\r\n if (data.Status !== 'Completed' && data.Status !== 'InProgress' && data.Status !== 'PendingExecution') {\r\n // handle other status\r\n notificationApi.showWarning(i18n.getString(_TL_('Unexpected error happened.')));\r\n }\r\n logActivity.trace(`[GoalCreationWizard][GtmBaseTagSetup]: task submitted. status: ${data.Status}, tagId: ${taskItem.GTMImportContext.UetTagId}, taskExecutionId: ${taskItemExecutionId}, publishedVersionId: ${data.PublishedVersionId}, cloneTags: ${taskItem.ImportUserPreference.ImportNewEntities}`);\r\n setIsPollTaskStarted(false);\r\n const goToEventTagSetup = Type === 'EventGoal' || Type === 'ProductConversionGoal'\r\n || GoalValueType === 'VariantValue';\r\n const enhancedConversions = wizardContext.permissions && wizardContext.permissions.dynamic && wizardContext.permissions.EnhancedConversions;\r\n if (enhancedConversions && IsEnhancedConversionsEnabled) {\r\n wizardContext.dispatch({\r\n type: WIZARD_ACTIONS.NAVIGATE_TO_SETUP_ENHANCED_CONV,\r\n data: {\r\n GTMContext: {\r\n ...wizardContext.GTMContext,\r\n workflowCompleted: true,\r\n publishedVersionId: data.PublishedVersionId,\r\n },\r\n },\r\n });\r\n } else {\r\n wizardContext.dispatch({\r\n type: goToEventTagSetup ? WIZARD_ACTIONS.NAVIGATE_WITH_TAG_INSTALL_INSTRUCTIONS : WIZARD_ACTIONS.WIZARD_NAVIGATE_NEXT,\r\n data: {\r\n GTMContext: {\r\n ...wizardContext.GTMContext,\r\n workflowCompleted: true,\r\n publishedVersionId: data.PublishedVersionId,\r\n },\r\n },\r\n });\r\n }\r\n })\r\n .catch((err) => {\r\n const { errorCode } = err.customized;\r\n setIsPollTaskStarted(false); // stop blocking and stay at the current page\r\n notificationApi.showWarning(i18n.getString(errorCodeMapping[errorCode] || errorCodeMapping[65253]));\r\n });\r\n }\r\n });\r\n }, [taskItemBasics, gtmImportContext, repository, logActivity, Type, GoalValueType, wizardContext, IsEnhancedConversionsEnabled, i18n]);\r\n\r\n const commonFooterButtons = useMemo(() => ({\r\n BACK: {\r\n type: 'Secondary',\r\n onClick: () => wizardContext.goBack(),\r\n isEnabled: true,\r\n text: i18n.getString(_TL_('Back')),\r\n },\r\n DONE: {\r\n type: 'Primary',\r\n onClick: submitTaskItem,\r\n isEnabled: !!gtmImportContext.GTMContainerId,\r\n text: i18n.getString(_TL_('Next')),\r\n },\r\n CANCEL: {\r\n type: 'Cancel',\r\n onClick: handleCancel,\r\n isEnabled: true,\r\n text: i18n.getString(_TL_('Cancel')),\r\n },\r\n }), [gtmImportContext.GTMContainerId, handleCancel, i18n, submitTaskItem, wizardContext]);\r\n\r\n const footerConfig = useMemo(() => {\r\n const config = {};\r\n config.buttons = [commonFooterButtons.BACK, commonFooterButtons.DONE, commonFooterButtons.CANCEL];\r\n return config;\r\n }, [commonFooterButtons]);\r\n\r\n const pageTitle = useMemo(() => i18n.getString(titleArray[footerConfigId]), [footerConfigId, i18n]);\r\n\r\n const handleGoogleLoggedOut = useCallback(() => setFooterConfigId(1), []);\r\n const handleGoogleSelectAccount = useCallback(() => setFooterConfigId(2), []);\r\n\r\n return (\r\n \r\n \r\n \r\n ( \r\n
\r\n );\r\n};\r\n\r\nPmaxAutoSwitchMessage.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n};\r\n","import _ from 'underscore';\r\nimport React, { Fragment, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Image } from '@fluentui/react';\r\nimport { ReactTemplate } from '@bingads-webui-react/react-template';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { getStepStyles } from '@bingads-webui-campaign-react/conversion-wizard-components';\r\nimport { cali18n } from '../../shared/contants';\r\nimport { LearnMore } from '../../../../conversion-wizard-components/src/learn-more/learn-more';\r\nimport extIconImage from '../assets/extPic.png';\r\nimport { PmaxAutoSwitchMessage } from './pmax-auto-switch-message';\r\n\r\nconst FinishViewUnstyled = (props) => {\r\n const {\r\n classes,\r\n i18n,\r\n serverContext,\r\n selectedGoalType,\r\n gtmContext,\r\n EnhancedConversions,\r\n showPmaxAutoSwitchMessage,\r\n } = props;\r\n const {\r\n workflowCompleted: isGtmDone,\r\n publishedVersionId,\r\n GTMAccountId: selectedAccount,\r\n GTMContainerId: selectedContainer,\r\n } = gtmContext;\r\n const { AdvertiserCustomerID: cid, Id: aid } = serverContext.CurrentAccount;\r\n const { DynamicPermissions } = serverContext;\r\n const enableConvValueRules = useMemo(() => DynamicPermissions && DynamicPermissions.ConvValueRules, [DynamicPermissions]);\r\n const edgeExtURL = 'https://microsoftedge.microsoft.com/addons/detail/uet-tag-helper-by-micros/nmcihgehpmokipeigjpeckphhdejjpbf';\r\n const chromeExtURL = 'https://chrome.google.com/webstore/detail/uet-tag-helper-by-bing-ad/naijndjklgmffmpembnkfbcjbognokbf';\r\n const instructionTemplate = i18n.getString(_TL_('It can take up to 24 hours for us to verify your UET tags. In the meantime, you can check your UET tag status and test whether your conversion goals are set up correctly using the UET Tag Helper. You can install this browser extension on {{m}}Microsoft Edge{{/m}} or {{g}}Google Chrome{{/g}}.'));\r\n const cvrlInstructionTemplate = useMemo(() => i18n.getString(_TL_('It can take up to 24 hours for us to verify your UET tags. In the meantime, you can check your UET tag status and test whether your conversion goals are set up correctly using the UET Tag Helper. You can install this browser extension on {{m}}Microsoft Edge{{/m}} or {{g}}Google Chrome{{/g}}. If you need to differentiate your conversion values to reflect on your bid strategy and reflect it on your reporting, set up {{r}}Conversion value rules{{/r}}.')), [i18n]);\r\n const helpLabel = i18n.getString(_TL_('It can take up to 24 hours for us to verify your UET tags. In the meantime, you can check your UET tag status and test whether your conversion goals are set up correctly using the UET Tag Helper. You can install this browser extension on Microsoft Edge or Google Chrome. Learn more.'));\r\n const trackingInstructionTemplate = i18n.getString(_TL_('We can use this UET tag to track both conversions and audiences based on actions people take on your website. Please {{c}}Create a conversion goal{{/c}} or {{a}}Create audience{{/a}} to get started.'));\r\n const conversionGoalsPageLink = document.URL.replace(/vnext.*$/, `vnext/conversiongoals?cid=${cid}&aid=${aid}`);\r\n const audiencesLibraryPageLink = document.URL.replace(/vnext.*$/, `vnext/audienceslibrary?cid=${cid}&aid=${aid}`);\r\n const conversionValueRulePageLink = useMemo(() => document.URL.replace(/vnext.*$/, `vnext/conversionvaluerules?cid=${cid}&aid=${aid}`), [aid, cid]);\r\n\r\n const noInstructionGoals = ['ApplicationInstallGoal', 'InStoreTransactionGoal', 'InStoreVisitGoal'];\r\n\r\n const tagManagerLink = `https://tagmanager.google.com/#/versions/accounts/${selectedAccount}/containers/${selectedContainer}/versions/${publishedVersionId}`;\r\n\r\n const bulletPointTwo = useMemo(() => {\r\n if (EnhancedConversions) {\r\n return (\r\n \r\n {selectedGoalType && noInstructionGoals.indexOf(selectedGoalType) > -1 && (\r\n
\r\n );\r\n};\r\n\r\nFinishViewUnstyled.propTypes = {\r\n classes: PropTypes.shape(_.mapObject(getStepStyles(), _.constant(PropTypes.string.isRequired)))\r\n .isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n serverContext: PropTypes.objectOf(PropTypes.any).isRequired,\r\n selectedGoalType: PropTypes.string.isRequired,\r\n gtmContext: PropTypes.shape({\r\n workflowCompleted: PropTypes.bool.isRequired,\r\n publishedVersionId: PropTypes.number,\r\n GTMAccountId: PropTypes.number,\r\n GTMContainerId: PropTypes.number,\r\n }).isRequired,\r\n EnhancedConversions: PropTypes.bool,\r\n showPmaxAutoSwitchMessage: PropTypes.bool,\r\n};\r\n\r\nFinishViewUnstyled.defaultProps = {\r\n EnhancedConversions: false,\r\n showPmaxAutoSwitchMessage: false,\r\n};\r\n\r\nexport const FinishView = withDefaultStyles(FinishViewUnstyled, getStepStyles);\r\n","import React, { useContext, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withPerfMarker } from '@bingads-webui/performance-marker-react-wrapper';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { getUrlBuilders } from '@bingads-webui-clientcenter/url-builder-base';\r\nimport { AlertHelper } from '@bingads-webui-campaign/alert-helper';\r\nimport { GoalCreationWizardContext } from '../../goal-creation-wizard-context';\r\nimport { StepContainer } from '../step-container/step-container';\r\nimport { FinishView } from './finish-view';\r\n\r\nconst FinishStepUnwrapped = (props) => {\r\n const { showPmaxAutoSwitchMessage } = props;\r\n const i18n = useContext(I18nContext);\r\n const wizardContext = useContext(GoalCreationWizardContext);\r\n const selectedGoalType = wizardContext.goalContext.Type;\r\n const goalCreated = !wizardContext.startFromEdit;\r\n const hasConversionCoupon = wizardContext.hasConversionCouponFunc && wizardContext.hasConversionCouponFunc();\r\n\r\n const isEnhancedConversionsEnabled = wizardContext.goalContext.IsEnhancedConversionsEnabled;\r\n const EnhancedConversions = wizardContext.permissions && wizardContext.permissions.dynamic\r\n && wizardContext.permissions.dynamic.EnhancedConversions && isEnhancedConversionsEnabled;\r\n\r\n useEffect(() => {\r\n if (goalCreated && hasConversionCoupon && wizardContext.goalContext.Tag) {\r\n const alertHelper = new AlertHelper({ i18n });\r\n const { BillingUrlBuilder } = getUrlBuilders({\r\n ccBaseUrl: wizardContext.serverContext.Urls.ClientCenterBaseUrl,\r\n aidFetcher: () => wizardContext.serverContext.CurrentAccount.Id,\r\n cidFetcher: () => wizardContext.serverContext.CurrentCustomer.Id,\r\n uidFetcher: () => wizardContext.serverContext.CurrentUser.Id,\r\n });\r\n\r\n const couponAdoptedCallback = wizardContext.onCouponAdoptedFunc && wizardContext.onCouponAdoptedFunc();\r\n const couponWorkDone = couponAdoptedCallback ? couponAdoptedCallback() : Promise.resolve();\r\n couponWorkDone.then(() => {\r\n const link = new BillingUrlBuilder({ isShortUrl: false }).action('coupondetails').url;\r\n const baseMessage = `${i18n.getString(_TL_('Almost there!'))} ${i18n.getString(_TL_('Once you have met the spend requirements and your UET tag and goal status remain active, you\\'ll receive the credit. We\\'ll notify you when the credit has been added to your account.'))} ${i18n.getString(_TL_('View promotional offers'))}`;\r\n alertHelper.showSuccess(baseMessage);\r\n });\r\n }\r\n }, [goalCreated, hasConversionCoupon, i18n, wizardContext, wizardContext.goalContext.Tag, wizardContext.serverContext.CurrentAccount.Id, wizardContext.serverContext.CurrentCustomer.Id, wizardContext.serverContext.CurrentUser.Id, wizardContext.serverContext.Urls.ClientCenterBaseUrl]);\r\n\r\n\r\n const footerConfig = {\r\n buttons: [\r\n {\r\n type: 'Primary',\r\n onClick: () => wizardContext.exitWizard({ data: { goalModel: wizardContext.goalContext, goalCreated } }, true),\r\n isEnabled: true,\r\n text: i18n.getString(_TL_('Done')),\r\n },\r\n ],\r\n };\r\n\r\n return (\r\n \r\n
\r\n )}\r\n\r\n {selectedGoalType === 'OfflineConversionGoal' && (\r\n {`${i18n.getString(_TL_('You\\'ve set up your'))} ${i18n.getString(cali18n(selectedGoalType))}.`}
\r\n\r\n
\r\n )}\r\n\r\n {!isGtmDone && noInstructionGoals.indexOf(selectedGoalType) < 0 && selectedGoalType !== 'OfflineConversionGoal' && (\r\n {i18n.getString(_TL_('For offline conversions to work, you\\'ll need to complete the following steps before you import your conversions.'))}
\r\n- \r\n
- {i18n.getString(_TL_('Capture the click ID in the URL that customers click from one of your ads.'))} \r\n
- {bulletPointTwo} \r\n
- {bulletPointThree} \r\n {EnhancedConversions &&\r\n
- {\r\n i18n.getString(_TL_('If you’re using enhanced conversions, follow the required hashing rules for the email address and/or phone number. In the last two columns column, add the hashed versions of your customers’ email address or phone number (or both) received from your website lead forms or at the time of conversion.'))}\r\n
\r\n \r\n }\r\n
\r\n {selectedGoalType &&\r\n
\r\n )}\r\n {isGtmDone &&\r\n \r\n {enableConvValueRules ? i18n.getString(_TL_('Test your conversion goal next:')) : i18n.getString(_TL_('Next step to test your conversion goal:'))}\r\n
\r\n }\r\n {!selectedGoalType &&\r\n\r\n
\r\n
\r\n {publishedVersionId ? (\r\n
\r\n }\r\n {showPmaxAutoSwitchMessage && \r\n {i18n.getString(_TL_('We have set up your UET tag on your Google Tag Manager account. You can see the tags created in your Google Tag Manager container on the latest published version. You can also use this link to see the changes:'))}\r\n {' '}{tagManagerLink}\r\n
\r\n ) : (\r\n\r\n {i18n.getString(_TL_('We are setting up your UET tag on your Google Tag Manager account. You will see the tags created in your Google Tag Manager container on the latest published version. This may take a few minutes.'))}\r\n
\r\n )}\r\n {!selectedGoalType &&\r\n\r\n
\r\n
\r\n \r\n
\r\n \r\n {eventTagSetupMethod === 'clarity' && !isClarityEnabled &&\r\n <>\r\n \r\n
\r\n \r\n \r\n \r\n \r\n {i18n.getString(_TL_('To continue with the Code-free, powered by Clarity option, you need to enable Microsoft Clarity for the selected UET tag.'))}\r\n \r\n
\r\n }\r\n \r\n
\r\n {i18n.getString(_TL_('Switching to manual installation will delete and reset the existing goal parameters.'))}\r\n
\r\n\r\n ({text}),\r\n policy: text => ({text}),\r\n }}\r\n template={i18n.getString(_TL_('By enabling enhanced conversion tracking, you agree to Microsoft {{terms}}terms of use{{/terms}} and {{policy}}privacy policy{{/policy}}.'))}\r\n />\r\n
\r\n ), [i18n]);\r\n\r\n return (\r\n \r\n {/* main goal selection */}\r\n {/* add help popup */}\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nEnhancedConversionsUnstyled.propTypes = {\r\n classes: PropTypes.shape(_.mapObject(\r\n getStepStyles(),\r\n _.constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n};\r\n\r\nexport const EnhancedConversions = withPerfMarker(withDefaultStyles(EnhancedConversionsUnstyled, getStepStyles));\r\n","import _ from 'underscore';\r\nimport React, { useCallback, useContext, useState, useEffect } from 'react';\r\nimport { notificationApi } from '@bingads-webui-react/notification-center';\r\nimport { renderToString } from 'react-dom/server';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { DefaultButton } from '@fluentui/react';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { CodeSnippet, getStepStyles } from '@bingads-webui-campaign-react/conversion-wizard-components';\r\nimport { InsertInstruction } from './insert-instructions';\r\nimport { WIZARD_ACTIONS } from '../../goal-creation-wizard-reducer';\r\nimport { endActivity } from '../../shared/util';\r\n\r\nconst CopyDownloadEnhancedConvTagUnstyled = (props) => {\r\n const {\r\n classes,\r\n instructionsTemplate,\r\n codeTemplate,\r\n onCopyCallback,\r\n onDownloadCallback,\r\n logActivity,\r\n wizardDispatch,\r\n } = props;\r\n\r\n const i18n = useContext(I18nContext);\r\n const [notification, setNotification] = useState(null);\r\n\r\n const goToEmailTagPage = useCallback(() => {\r\n endActivity(logActivity);\r\n wizardDispatch({\r\n type: WIZARD_ACTIONS.GO_TO_EMAIL_DEVELOPER_STEP,\r\n });\r\n }, [logActivity, wizardDispatch]);\r\n\r\n\r\n const copyTagToClipboard = useCallback(() => {\r\n navigator.clipboard.writeText(codeTemplate)\r\n .then(() => {\r\n setNotification({ message: i18n.getString(_TL_(('Tag copied!'))) });\r\n onCopyCallback({\r\n error: null,\r\n message: i18n.getString(_TL_(('Tag copied!'))),\r\n });\r\n })\r\n .catch((err) => {\r\n setNotification({ error: i18n.getString(_TL_(('Tag copy failed!'))) });\r\n onCopyCallback({\r\n error: typeof err === 'object' ? JSON.stringify(err) : err,\r\n message: i18n.getString(_TL_(('Tag copy failed!'))),\r\n });\r\n });\r\n }, [codeTemplate, i18n, onCopyCallback]);\r\n\r\n useEffect(() => {\r\n let notificationId;\r\n if (!_.isEmpty(notification)) {\r\n if (notification.message) {\r\n notificationId = notificationApi.showInfo(notification.message);\r\n } else if (notification.error) {\r\n notificationId = notificationApi.showWarning(notification.error);\r\n }\r\n }\r\n return () => notificationId && notificationApi.dismiss(notificationId);\r\n }, [notification]);\r\n\r\n const downloadTag = useCallback(() => {\r\n let htmlContents = '';\r\n\r\n try {\r\n htmlContents = renderToString((\r\n \r\n {/* eslint-disable-next-line react/jsx-indent */}\r\n setIsTermAndConditionAccepted(checked)}\r\n onRenderLabel={renderTermAndConditionLabel}\r\n ariaLabel={i18n.getString(_TL_('checkbox: By enabling enhanced conversion tracking, you agree to Microsoft terms of use and privacy policy.'))}\r\n />\r\n {showTermAndConditionWarning && (\r\n
\r\n )}\r\n {i18n.getString(_TL_('Enable Enhanced conversions for this goal'))}
\r\n\r\n {i18n.getString(_TL_('Please agree to Microsoft terms of use and privacy policy.'))}\r\n
)}\r\n \r\n
\r\n
\r\n );\r\n};\r\n\r\nCopyDownloadEnhancedConvTagUnstyled.propTypes = {\r\n model: PropTypes.shape({}).isRequired,\r\n onCopyCallback: PropTypes.func.isRequired,\r\n onDownloadCallback: PropTypes.func.isRequired,\r\n classes: PropTypes.shape(_.mapObject(\r\n getStepStyles(),\r\n _.constant(PropTypes.string.isRequired)\r\n )).isRequired,\r\n instructionsTemplate: PropTypes.arrayOf(PropTypes.string).isRequired,\r\n logActivity: PropTypes.shape({}).isRequired,\r\n wizardDispatch: PropTypes.func.isRequired,\r\n codeTemplate: PropTypes.string.isRequired,\r\n};\r\n\r\nexport const CopyDownloadEnhancedConvTag = withDefaultStyles(CopyDownloadEnhancedConvTagUnstyled, getStepStyles);\r\n","import React, { useCallback, useContext, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport classNames from 'classnames';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { withPerfMarker } from '@bingads-webui/performance-marker-react-wrapper';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { CodeSnippet, getStepStyles } from '@bingads-webui-campaign-react/conversion-wizard-components';\r\nimport { StepContainer } from '../step-container/step-container';\r\nimport { GoalCreationWizardContext } from '../../goal-creation-wizard-context';\r\nimport { InsertInstruction } from '../components/insert-instructions';\r\nimport { WIZARD_ACTIONS } from '../../goal-creation-wizard-reducer';\r\nimport { getTagTemplates } from '../utils/tag-template';\r\nimport { CopyDownloadEnhancedConvTag } from '../components/copy-download-enhanced';\r\n\r\nconst SetUpEnhancedConversionsUnstyled = (props) => {\r\n const {\r\n classes,\r\n permissions,\r\n } = props;\r\n\r\n const i18n = useContext(I18nContext);\r\n const wizardContext = useContext(GoalCreationWizardContext);\r\n const { logActivity } = wizardContext;\r\n const goalObj = useMemo(() => wizardContext.goalContext, [wizardContext.goalContext]);\r\n const template = getTagTemplates(i18n);\r\n\r\n const handleCancel = useCallback(() => {\r\n wizardContext.exitWizard();\r\n }, [wizardContext]);\r\n\r\n const handleNext = useCallback(() => {\r\n const { Type, GoalValueType } = goalObj;\r\n\r\n const goToEventTagSetup = Type === 'EventGoal' || Type === 'ProductConversionGoal'\r\n || GoalValueType === 'VariantValue';\r\n\r\n wizardContext.dispatch({\r\n type: goToEventTagSetup ?\r\n WIZARD_ACTIONS.NAVIGATE_WITH_TAG_INSTALL_INSTRUCTIONS :\r\n WIZARD_ACTIONS.WIZARD_NAVIGATE_NEXT,\r\n data: {},\r\n });\r\n }, [goalObj, wizardContext]);\r\n\r\n const footerConfig = useMemo(() => ({\r\n buttons: [{\r\n type: 'Secondary',\r\n onClick: wizardContext.goBack,\r\n isEnabled: true,\r\n text: i18n.getString(_TL_(('Back'))),\r\n },\r\n {\r\n type: 'Primary',\r\n onClick: handleNext,\r\n isEnabled: true,\r\n text: i18n.getString(_TL_(('Next'))),\r\n },\r\n {\r\n type: 'Cancel',\r\n onClick: handleCancel,\r\n isEnabled: true,\r\n text: i18n.getString(_TL_(('Cancel'))),\r\n }],\r\n }), [wizardContext.goBack, i18n, handleNext, handleCancel]);\r\n\r\n const copyCallback = useCallback((res) => {\r\n if (res && res.error) {\r\n logActivity.error(JSON.stringify(res));\r\n }\r\n logActivity.trace('enhanced conversion tag copy clicked');\r\n }, [logActivity]);\r\n\r\n const downloadCallback = useCallback((res) => {\r\n if (res && res.error) {\r\n logActivity.error(JSON.stringify(res));\r\n }\r\n logActivity.trace('enhanced conversion tag download clicked');\r\n }, [logActivity]);\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nGoalCreationWizardUnstyled.propTypes = {\r\n classes: PropTypes.shape(_.mapObject(getStyles(), _.constant(PropTypes.string.isRequired)))\r\n .isRequired,\r\n onWizardExit: PropTypes.func.isRequired,\r\n permissions: PropTypes.shape({ dynamic: { UetAutoSpaTracking: PropTypes.bool } }).isRequired,\r\n serverContext: PropTypes.shape({}).isRequired,\r\n scope: PropTypes.shape({\r\n values: PropTypes.shape({}),\r\n }).isRequired,\r\n goalData: PropTypes.shape({}).isRequired,\r\n wizardDefaultState: PropTypes.shape({}).isRequired,\r\n instrumentation: PropTypes.shape({}).isRequired,\r\n perfMarker: PropTypes.shape({\r\n done: PropTypes.func,\r\n willInit: PropTypes.func,\r\n willRender: PropTypes.func,\r\n createChild: PropTypes.func,\r\n }).isRequired,\r\n parentActivity: PropTypes.shape({}).isRequired,\r\n registerBackButtonClickedHandler: PropTypes.func.isRequired,\r\n isDemo: PropTypes.bool.isRequired,\r\n hasConversionCouponFunc: PropTypes.func.isRequired,\r\n onCouponAdoptedFunc: PropTypes.func.isRequired,\r\n autoGoalBackHandlerFunc: PropTypes.func,\r\n};\r\n\r\nGoalCreationWizardUnstyled.defaultProps = {\r\n autoGoalBackHandlerFunc: null,\r\n};\r\n\r\nexport const GoalCreationWizard = withPerfMarker(withInstrumentation(withDefaultStyles(GoalCreationWizardUnstyled, getStyles)));\r\n","import React, { useState, useEffect, useMemo, useCallback } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport { withInstrumentation } from '@bingads-webui-react/hoc-with-instrumentation';\r\nimport { instrumentationSchema } from './shared/instrumentation-schema';\r\nimport { getAssociatedCampaignIds, getGoal, readAssociatedCampaigns } from './conversion-goals-repository';\r\nimport { GoalCreationWizard } from './goal-creation-wizard';\r\nimport { STEP_PATHS } from './step-paths';\r\nimport { getObjectiveByGoalType } from './shared/config';\r\nimport { startActivity } from './shared/util';\r\n\r\nconst GoalCreationPageUnstyled = (props) => {\r\n const {\r\n mockData,\r\n onWizardExit,\r\n permissions,\r\n serverContext,\r\n scope,\r\n perfMarker,\r\n instrumentation,\r\n registerBackButtonClickedHandler,\r\n isDemo,\r\n hasConversionCouponFunc,\r\n onCouponAdoptedFunc,\r\n autoGoalBackHandlerFunc,\r\n autoGoalSelectedObjective,\r\n } = props;\r\n\r\n const { goalId } = scope.values;\r\n const {\r\n CurrentAccount: {\r\n AdvertiserCustomerID: cid,\r\n Id: aid,\r\n },\r\n } = serverContext;\r\n const GTMContext = useMemo(() => ({\r\n AllowTagCloning: true,\r\n IsGTMCloningChecked: true,\r\n }), []);\r\n const [goalData, setGoalData] = useState({});\r\n const [wizardDefaultState, setWizardDefaultState] = useState({});\r\n useMemo(() => instrumentation.addScenario(instrumentationSchema), [instrumentation]);\r\n\r\n const isLinkedInEnabled = useMemo(() =>\r\n permissions && permissions.dynamic && permissions.dynamic.LinkedInCampaigns, [permissions]);\r\n\r\n const { logScenario, logActivity } = useMemo(() => {\r\n const scenario = instrumentation.goalCreationWizard.create();\r\n const logInfo = {\r\n logScenario: scenario,\r\n logActivity: scenario.createWizard.create(),\r\n };\r\n startActivity(logInfo.logActivity);\r\n return logInfo;\r\n }, [instrumentation.goalCreationWizard]);\r\n\r\n const getWizardStates = useCallback((goalObj, associatedCampaigns = []) => {\r\n if (autoGoalBackHandlerFunc) {\r\n const updatedState = {\r\n currentStep: autoGoalSelectedObjective ? STEP_PATHS.goalType.id : STEP_PATHS.goalObjective.id,\r\n steps: [],\r\n loggingSteps: [],\r\n isEditScenario: false,\r\n startFromEdit: false,\r\n logScenario,\r\n GTMContext,\r\n associatedCampaigns: {\r\n initial: associatedCampaigns,\r\n current: associatedCampaigns,\r\n },\r\n permissions,\r\n };\r\n if (autoGoalSelectedObjective) {\r\n updatedState.selectedObjective = autoGoalSelectedObjective;\r\n }\r\n return updatedState;\r\n }\r\n\r\n if (_.isEmpty(goalObj)) {\r\n return {\r\n currentStep: STEP_PATHS.goalObjective.id,\r\n steps: [],\r\n loggingSteps: [],\r\n isEditScenario: false,\r\n startFromEdit: false,\r\n tagInstallOption: 'no',\r\n logScenario,\r\n GTMContext,\r\n associatedCampaigns: {\r\n initial: associatedCampaigns,\r\n current: associatedCampaigns,\r\n },\r\n permissions,\r\n };\r\n } else if (goalObj.Type === 'SmartGoal') {\r\n return {\r\n currentStep: STEP_PATHS.goalDetails.smartGoal.id,\r\n steps: [STEP_PATHS.goalObjective.id, STEP_PATHS.goalType.id],\r\n loggingSteps: [STEP_PATHS.goalObjective.id, STEP_PATHS.goalType.id],\r\n goalObject: { ...goalObj },\r\n isEditScenario: true,\r\n tagInstallOption: 'no',\r\n startFromEdit: true,\r\n logScenario,\r\n GTMContext,\r\n associatedCampaigns: {\r\n initial: associatedCampaigns,\r\n current: associatedCampaigns,\r\n },\r\n permissions,\r\n };\r\n }\r\n const goalObjective = getObjectiveByGoalType(goalObj.Type);\r\n return {\r\n currentStep: STEP_PATHS.goalType.id,\r\n steps: [STEP_PATHS.goalObjective.id],\r\n loggingSteps: [STEP_PATHS.goalObjective.id],\r\n selectedObjective: goalObjective,\r\n tagInstallOption: 'no',\r\n goalObject: { ...goalObj },\r\n isEditScenario: true,\r\n startFromEdit: true,\r\n logScenario,\r\n GTMContext,\r\n associatedCampaigns: {\r\n initial: associatedCampaigns,\r\n current: associatedCampaigns,\r\n },\r\n permissions,\r\n };\r\n }, [GTMContext, autoGoalBackHandlerFunc, autoGoalSelectedObjective, logScenario, permissions]);\r\n\r\n useEffect(() => {\r\n if (goalId) {\r\n logActivity.trace(`Editing goal id ${goalId}`);\r\n if (_.isEmpty(mockData)) {\r\n getGoal(goalId, cid, aid).toPromise()\r\n .then((goalResponse) => {\r\n const hasAssociatedCampaigns = !_.isEmpty(getAssociatedCampaignIds(goalResponse));\r\n\r\n if (isLinkedInEnabled && hasAssociatedCampaigns) {\r\n readAssociatedCampaigns(cid, aid, goalResponse)\r\n .then((campaignsResponse) => {\r\n const associatedCampaigns = campaignsResponse.value;\r\n\r\n setGoalData(goalResponse);\r\n setWizardDefaultState(getWizardStates(goalResponse, associatedCampaigns));\r\n });\r\n } else {\r\n setGoalData(goalResponse);\r\n setWizardDefaultState(getWizardStates(goalResponse));\r\n }\r\n });\r\n } else {\r\n setGoalData(mockData);\r\n setWizardDefaultState(getWizardStates(mockData));\r\n }\r\n } else {\r\n logActivity.trace('Creating new goal');\r\n setWizardDefaultState(getWizardStates({}));\r\n }\r\n }, [aid, cid, getWizardStates, logActivity, goalId, mockData, isLinkedInEnabled]);\r\n\r\n return (\r\n !_.isEmpty(wizardDefaultState)) && (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nGoalCreationRecommendationWizardUnstyled.propTypes = {\r\n classes: PropTypes.shape(_.mapObject(getStyles(), _.constant(PropTypes.string.isRequired)))\r\n .isRequired,\r\n permissions: PropTypes.shape({}).isRequired,\r\n serverContext: PropTypes.shape({}).isRequired,\r\n scope: PropTypes.shape({\r\n values: PropTypes.shape({}),\r\n }).isRequired,\r\n goalData: PropTypes.shape({}).isRequired,\r\n wizardDefaultState: PropTypes.shape({}).isRequired,\r\n instrumentation: PropTypes.shape({}).isRequired,\r\n perfMarker: PropTypes.shape({\r\n done: PropTypes.func,\r\n willInit: PropTypes.func,\r\n willRender: PropTypes.func,\r\n createChild: PropTypes.func,\r\n }).isRequired,\r\n exportUpdatedGoalObject: PropTypes.func.isRequired,\r\n};\r\n\r\nexport const GoalCreationRecommendationWizard = withPerfMarker(withInstrumentation(withDefaultStyles(GoalCreationRecommendationWizardUnstyled, getStyles)));\r\n","import React from 'react';\r\n\r\nexport const UetSetupWizardContext = React.createContext();\r\n","export const STEP_PATHS = {\r\n uetTag: { id: 'uet-tag' },\r\n tagSetup: {\r\n id: 'setupTag',\r\n noTag: {\r\n id: 'setupTag.noTag',\r\n selectTagMethod: { id: 'setupTag.noTag.selectTagMethod' },\r\n installTag: { id: 'setupTag.noTag.installTag' },\r\n emailTag: { id: 'setupTag.noTag.emailTag' },\r\n platformTag: { id: 'setupTag.noTag.platformTag' },\r\n gtmTag: { id: 'setupTag.noTag.gtmTag' },\r\n platformTagInstructions: { id: 'setupTag.noTag.platformTagInstructions' },\r\n },\r\n addEventTag: { id: 'setupTag.addEventTag' },\r\n },\r\n endFlow: {\r\n id: 'endFlow',\r\n },\r\n};\r\n","import _ from 'underscore';\r\nimport { STEP_PATHS } from './step-paths';\r\n\r\nexport const defaultState = {\r\n tagContext: {},\r\n GTMContext: {\r\n IsGTMCloningChecked: true,\r\n AllowTagCloning: true,\r\n },\r\n currentStep: STEP_PATHS.uetTag.id,\r\n steps: [],\r\n loggingSteps: [],\r\n};\r\n\r\nexport const WIZARD_ACTIONS = {\r\n WIZARD_NAVIGATE_NEXT: 'WIZARD_NAVIGATE_NEXT',\r\n WIZARD_NAVIGATE_BACK: 'WIZARD_NAVIGATE_BACK',\r\n SAVE_TAG_AND_NEXT: 'SAVE_TAG_AND_NEXT',\r\n SELECT_TAG_SETUP_METHOD: 'SELECT_TAG_SETUP_METHOD',\r\n GO_TO_EMAIL_DEVELOPER_STEP: 'GO_TO_EMAIL_DEVELOPER_STEP',\r\n NAVIGATE_WITH_PLATFORM: 'NAVIGATE_WITH_PLATFORM',\r\n WIZARD_UPDATE_GTM_SESSION_CONTEXT: 'WIZARD_UPDATE_GTM_SESSION_CONTEXT',\r\n};\r\n\r\nconst basicSteps = [\r\n STEP_PATHS.uetTag.id,\r\n STEP_PATHS.tagSetup.noTag.selectTagMethod.id,\r\n STEP_PATHS.endFlow.id,\r\n];\r\n\r\nfunction goToNextStep(state, currentStep) {\r\n const rootStep = currentStep.split('.').shift();\r\n const currentStepIndex = _.findIndex(basicSteps, step => step.split('.').shift() === rootStep);\r\n\r\n return {\r\n ...state,\r\n currentStep: basicSteps[currentStepIndex + 1],\r\n steps: [...state.steps, currentStep],\r\n loggingSteps: [...state.steps, currentStep],\r\n };\r\n}\r\n\r\nfunction goToPreviousStep(state) {\r\n return {\r\n ...state,\r\n steps: state.steps.slice(0, -1),\r\n currentStep: state.steps[state.steps.length - 1],\r\n loggingSteps: [...state.steps, state.currentStep],\r\n };\r\n}\r\n\r\nfunction goToStep(state, currentStep, nextStep) {\r\n return {\r\n ...state,\r\n currentStep: nextStep,\r\n steps: [...state.steps, currentStep],\r\n loggingSteps: [...state.steps, currentStep],\r\n };\r\n}\r\n\r\nexport const uetSetupWizardReducer = (state, action) => {\r\n switch (action.type) {\r\n case WIZARD_ACTIONS.WIZARD_NAVIGATE_NEXT:\r\n return goToNextStep({ ...state, ...action.data }, state.currentStep);\r\n case WIZARD_ACTIONS.WIZARD_NAVIGATE_BACK:\r\n return goToPreviousStep(state);\r\n case (WIZARD_ACTIONS.SAVE_TAG_AND_NEXT): {\r\n const updatedState = {\r\n ...state,\r\n tagContext: { ...action.data },\r\n isSaveDone: true,\r\n };\r\n return goToNextStep(updatedState, state.currentStep);\r\n }\r\n case WIZARD_ACTIONS.SELECT_TAG_SETUP_METHOD:\r\n return goToStep({\r\n ...state,\r\n ...action.data,\r\n }, state.currentStep, STEP_PATHS.tagSetup.noTag[action.data.selectedTagSetupMethod].id);\r\n case WIZARD_ACTIONS.GO_TO_EMAIL_DEVELOPER_STEP:\r\n return goToStep(state, state.currentStep, STEP_PATHS.tagSetup.noTag.emailTag.id);\r\n case WIZARD_ACTIONS.NAVIGATE_WITH_PLATFORM:\r\n return goToStep({\r\n ...state,\r\n ...action.data,\r\n }, state.currentStep, STEP_PATHS.tagSetup.noTag.platformTagInstructions.id);\r\n case WIZARD_ACTIONS.WIZARD_UPDATE_GTM_SESSION_CONTEXT: {\r\n return {\r\n ...state,\r\n GTMContext: { ...action.GTMContext },\r\n };\r\n }\r\n default:\r\n throw new Error('invalid goal creation wizard action');\r\n }\r\n};\r\n","const activities = [\r\n {\r\n name: 'uet-tag',\r\n value: 'uet-tag',\r\n },\r\n {\r\n name: 'setupTag',\r\n value: 'setupTag',\r\n },\r\n {\r\n name: 'setupTag.selectTag',\r\n value: 'setupTag.selectTag',\r\n },\r\n {\r\n name: 'setupTag.noTag',\r\n value: 'setupTag.noTag',\r\n },\r\n {\r\n name: 'setupTag.noTag.selectTagMethod',\r\n value: 'setupTag.noTag.selectTagMethod',\r\n },\r\n {\r\n name: 'setupTag.noTag.installTag',\r\n value: 'setupTag.noTag.installTag',\r\n },\r\n {\r\n name: 'setupTag.noTag.emailTag',\r\n value: 'setupTag.noTag.emailTag',\r\n },\r\n {\r\n name: 'setupTag.noTag.platformTag',\r\n value: 'setupTag.noTag.platformTag',\r\n },\r\n {\r\n name: 'setupTag.noTag.platformTagInstructions',\r\n value: 'setupTag.noTag.platformTagInstructions',\r\n },\r\n {\r\n name: 'setupTag.noTag.gtmTag',\r\n value: 'setupTag.noTag.gtmTag',\r\n },\r\n {\r\n name: 'endFlow',\r\n value: 'endFlow',\r\n },\r\n];\r\n\r\nexport const instrumentationSchema = {\r\n scenario: [\r\n // All activities must be under this scenario so that we can later use SceId to string together a session.\r\n {\r\n name: 'uetSetupWizard',\r\n value: 'uetSetupWizard',\r\n activity: activities,\r\n },\r\n ],\r\n};\r\n","import _ from 'underscore';\r\n\r\nexport const markTime = () => ({\r\n time: performance.now(),\r\n activeTime: _.result(performance, 'activeTime', NaN),\r\n});\r\n\r\nexport const startActivity = (activity) => {\r\n const { time, activeTime } = markTime();\r\n // eslint-disable-next-line no-param-reassign\r\n activity.properties = {\r\n startTime: time,\r\n activeStartTime: activeTime,\r\n };\r\n activity.trace(`startTime: ${time}, activeStartTime: ${activeTime}`);\r\n};\r\n\r\nexport const endActivity = (activity) => {\r\n const { time, activeTime } = markTime();\r\n const { activeStartTime, startTime } = activity.properties || {};\r\n const activeDuration = activeStartTime ? activeTime - activeStartTime : 0;\r\n const duration = startTime ? time - startTime : 0;\r\n activity.trace(`endTime: ${time}, activeEndTime: ${activeTime}, activeDuration: ${activeDuration}, duration: ${duration}`);\r\n};\r\n","import PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport React from 'react';\r\nimport { PrimaryButton, DefaultButton, Dialog, DialogType, DialogFooter } from '@fluentui/react';\r\n\r\nexport const DialogTexts = {\r\n Title: _TL_('Disabling Microsoft Clarity may impact your custom-event conversions'),\r\n Body: _TL_('Disabling Microsoft Clarity for this UET tag will deactivate any associated conversion goals that were setup using the \"Code-free with Clarity\" method. You will stop receiving conversions data for those goals.'),\r\n Primary: _TL_('Disable anyway'),\r\n Secondary: _TL_('Cancel'),\r\n};\r\n\r\nfunction DialogContent(props) {\r\n const {\r\n primaryButtonCallback,\r\n secondaryButtonCallback,\r\n i18n,\r\n } = props;\r\n\r\n const titleText = i18n.getString(DialogTexts.Title);\r\n const bodyText = i18n.getString(DialogTexts.Body);\r\n const primaryText = i18n.getString(DialogTexts.Primary);\r\n const secondaryText = i18n.getString(DialogTexts.Secondary);\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\nDialogContent.defaultProps = {\r\n primaryButtonCallback: _.noop,\r\n secondaryButtonCallback: _.noop,\r\n};\r\nDialogContent.propTypes = {\r\n primaryButtonCallback: PropTypes.func,\r\n secondaryButtonCallback: PropTypes.func,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n};\r\n\r\n// a blocking non-draggable fabric dialog to confirm user choice for not including conversion dialog\r\nexport function ClarityUncheckWarningDialog(props) {\r\n const {\r\n i18n,\r\n shouldShowDialog,\r\n checkIncludeCallback,\r\n uncheckIncludeCallback,\r\n } = props;\r\n\r\n return (\r\n \r\n
\r\n {titleText}
\r\n\r\n {bodyText}\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nCreateUetTagViewUnstyled.propTypes = {\r\n classes: PropTypes.shape(_.mapObject(getStepStyles(), _.constant(PropTypes.string.isRequired)))\r\n .isRequired,\r\n i18n: PropTypes.objectOf(PropTypes.any).isRequired,\r\n legacyI18n: PropTypes.objectOf(PropTypes.any).isRequired,\r\n permissions: PropTypes.shape({}).isRequired,\r\n tagEntity: PropTypes.objectOf(PropTypes.any).isRequired,\r\n tagSharingScopeContext: PropTypes.shape({\r\n isTagSharingScope: PropTypes.bool.isRequired,\r\n selectedSharingOption: PropTypes.string,\r\n customerHierarchy: PropTypes.arrayOf(PropTypes.any),\r\n tagOwner: PropTypes.objectOf(PropTypes.any),\r\n sharingScope: PropTypes.objectOf(PropTypes.any),\r\n }).isRequired,\r\n updateTagEntity: PropTypes.func.isRequired,\r\n showError: PropTypes.bool.isRequired,\r\n resetShowError: PropTypes.func.isRequired,\r\n};\r\n\r\nexport const CreateUetTagView = withDefaultStyles(CreateUetTagViewUnstyled, getStepStyles);\r\n","export const getStepStyles = (components, { palette = {} } = {}) => {\r\n const color = {\r\n advancedTitleColor: palette.blue || '#0078D4',\r\n errorAlertColor: '#a4262c',\r\n };\r\n const commonFont = {\r\n fontFamily: 'Segoe UI',\r\n fontStyle: 'normal',\r\n };\r\n const titleFont = {\r\n fontSize: 18,\r\n fontWeight: 400,\r\n };\r\n const subTitleFont = {\r\n fontSize: 14,\r\n fontWeight: 600,\r\n };\r\n const plainTextFont = {\r\n fontSize: 14,\r\n fontWeight: 400,\r\n };\r\n return ({\r\n contentBlock: {\r\n marginLeft: '26px',\r\n overflowX: 'hidden',\r\n overflowY: 'hidden',\r\n\r\n '& .btn-link': {\r\n color: '#0078d4',\r\n textDecoration: 'underline',\r\n },\r\n\r\n '& .tagConfirmationText': {\r\n marginLeft: '25px',\r\n },\r\n\r\n '& .alert': {\r\n border: 'none',\r\n boxShadow: 'none',\r\n fontSize: '12px',\r\n fontWeight: 400,\r\n color: '#323130',\r\n display: 'flex',\r\n height: 'auto',\r\n lineHeight: '16px',\r\n padding: '8px 32px 8px 8px',\r\n verticalAlign: 'middle',\r\n },\r\n '& .alert-info': {\r\n backgroundColor: '#eff6fc',\r\n borderColor: '#eff6fc',\r\n color: '#323130',\r\n\r\n '& .alert-image:before': {\r\n fontFamily: 'MsAds MDL2 Assets',\r\n fontSize: '16px',\r\n lineHeight: '16px',\r\n color: '#605e5c',\r\n marginRight: '8px',\r\n content: '\\'\\\\E946\\'',\r\n },\r\n },\r\n '& .alert-warning': {\r\n backgroundColor: '#fff4ce',\r\n borderColor: '#fff4ce',\r\n color: '#323130',\r\n\r\n '& .alert-image:before': {\r\n fontFamily: 'MsAds MDL2 Assets',\r\n fontSize: '16px',\r\n lineHeight: '16px',\r\n color: '#d83b01',\r\n marginRight: '8px',\r\n content: '\\'\\\\E7BA\\'',\r\n },\r\n },\r\n },\r\n scrollableContainer: {\r\n overflowX: 'auto',\r\n },\r\n instructionsHeader: {\r\n marginBottom: '7px',\r\n },\r\n buttonBlock: {\r\n '& *:not(:last-child)': {\r\n marginRight: '15px',\r\n },\r\n },\r\n loading: {\r\n backgroundColor: palette.white,\r\n paddingTop: '6px',\r\n paddingBottom: '6px',\r\n height: '100%',\r\n },\r\n radioButtonsBlock: {\r\n '& .ms-ChoiceFieldGroup': {\r\n '& label': {\r\n lineHeight: '12px',\r\n fontWeight: 400,\r\n },\r\n },\r\n },\r\n helpButton: {\r\n marginLeft: 5,\r\n },\r\n sendEmailsTextbox: {\r\n width: 268,\r\n },\r\n dropdownAddIcon: {\r\n fontSize: '16px',\r\n color: color.advancedTitleColor,\r\n marginRight: '5px',\r\n verticalAlign: 'bottom',\r\n fontWeight: 'bold',\r\n },\r\n eventParamRemoveIcon: {\r\n fontSize: '24px',\r\n verticalAlign: 'middle',\r\n cursor: 'pointer',\r\n },\r\n section: {\r\n marginBottom: 30,\r\n '& .ms-Checkbox-label': {\r\n alignItems: 'start',\r\n },\r\n },\r\n defaultTitle: {\r\n extend: commonFont,\r\n lineHeight: '24px',\r\n ...titleFont,\r\n },\r\n nonAccordionTitle: {\r\n extend: commonFont,\r\n lineHeight: '20px',\r\n ...subTitleFont,\r\n display: 'flex',\r\n '& .title': {\r\n marginRight: '6px',\r\n },\r\n marginBottom: '5px',\r\n },\r\n bodyText: {\r\n extend: commonFont,\r\n lineHeight: '20px',\r\n ...plainTextFont,\r\n },\r\n errorText: {\r\n extend: commonFont,\r\n lineHeight: '20px',\r\n ...plainTextFont,\r\n color: color.errorAlertColor,\r\n marginLeft: '20px',\r\n },\r\n inactiveText: {\r\n color: '#a19f9d',\r\n },\r\n rowContainer: {\r\n display: 'flex',\r\n paddingTop: '6px',\r\n paddingBottom: '6px',\r\n '& .url-field': {\r\n marginLeft: '15px',\r\n },\r\n },\r\n tagDialogText: {\r\n '& .btn-link': {\r\n color: '#0078d4 !important',\r\n '&:focus, &:hover, &:active': {\r\n textDecoration: 'underline',\r\n },\r\n },\r\n },\r\n scopeEditor: {\r\n width: 800,\r\n\r\n '& .sharing-scope-dblist': {\r\n '& .sharing-scope-tree-view': {\r\n border: 'grey solid 1px',\r\n padding: '10px',\r\n overflow: 'auto',\r\n height: '350px',\r\n },\r\n\r\n '& .hierarchy-tree': {\r\n minHeight: '200px',\r\n },\r\n\r\n '& .sharing-scope-tree-view__search-box': {\r\n marginBottom: '15px',\r\n },\r\n\r\n '& .glyph-caret-right, .glyph-caret-down': {\r\n '&:before': {\r\n verticalAlign: 'middle',\r\n },\r\n },\r\n\r\n '& .glyph-none': {\r\n '&::before': {\r\n content: '\\\\2122',\r\n color: 'transparent !important',\r\n verticalAlign: 'middle',\r\n },\r\n },\r\n },\r\n },\r\n });\r\n};\r\n","import _ from 'underscore';\r\nimport { edmCampaign } from '@bingads-webui/edm-campaign';\r\nimport { mockedTag } from './mocked-data';\r\n\r\nexport function getErrorMessage(errorCode, i18n) {\r\n const defaultMessage = i18n.getString(_TL_('We\\'ve encountered an error while saving this tag. Please try again or contact support for assistance.'));\r\n const messageMap = {\r\n TagWithSameNameAlreadyExistsUnderCustomer: i18n.getString(_TL_('A tag with this name already exists. Enter a different name.')),\r\n InvalidTagName: i18n.getString(_TL_('We can\\'t save the UET tag because the name has invalid characters. Enter a different name and try again.')),\r\n TagNameNullOrEmpty: i18n.getString(_TL_('We can\\'t save the UET tag because the name has invalid characters. Enter a different name and try again.')),\r\n InvalidTagDescription: i18n.getString(_TL_('We can\\'t save the UET tag because either the description has invalid characters or is too long. Enter a different description and try again.')),\r\n MaxUetTagPerCustomerLimitReached: i18n.getString(_TL_('You have reached maximum UET tags')),\r\n CustomerUnderMigration: i18n.getString(_TL_('Conversion tracking tags and goals data is currently being migrated to a better system. Please try again later.')),\r\n SharedLibraryUserPermissionDenied: i18n.getString(_TL_('You don\\'t have permission.')),\r\n UpdateFailedForIsClarityTagEnabled: i18n.getString(_TL_('Your UET tag is saved except for \\'Enable Microsoft Clarity\\'. Please try again later.ou don\\'t have permission')),\r\n };\r\n\r\n return messageMap[errorCode] || defaultMessage;\r\n}\r\n\r\nexport function getTag(cid, aid, tagId) {\r\n if (cid && aid) {\r\n return edmCampaign\r\n .Customers.$withKey(cid)\r\n .Accounts.$withKey(aid)\r\n .Tag.$withKey(tagId)\r\n .get({}).toPromise();\r\n }\r\n return new Promise((resolve) => {\r\n resolve(mockedTag);\r\n });\r\n}\r\n\r\nconst createTag = (cid, aid, payload) => {\r\n if (cid) {\r\n const edmCustomer = edmCampaign.Customers.$withKey(cid);\r\n const edmHolder = aid ? edmCustomer.Accounts.$withKey(aid) : edmCustomer;\r\n return edmHolder.Tags.post(payload).toPromise()\r\n .then((response) => {\r\n if (response && response.Id) {\r\n // log tag created\r\n return { Id: response.Id };\r\n }\r\n throw new Error('Couldn\\'t create the tag');\r\n });\r\n }\r\n return new Promise((resolve) => {\r\n const mockResp = { Id: 234235 };\r\n resolve(mockResp);\r\n });\r\n};\r\n\r\nconst updateTag = (cid, aid, tagId, payload) => {\r\n if (cid) {\r\n const edmCustomer = edmCampaign.Customers.$withKey(cid);\r\n const edmHolder = aid ? edmCustomer.Accounts.$withKey(aid) : edmCustomer;\r\n return edmHolder.Tags.update(tagId, payload)\r\n .then((response) => {\r\n if (response.Id) {\r\n // log tag saved\r\n return response;\r\n }\r\n throw response;\r\n });\r\n }\r\n return new Promise((resolve) => {\r\n const mockResp = { Id: 234235 };\r\n resolve(mockResp.Id);\r\n });\r\n};\r\n\r\nconst processPayload = (tagContext) => {\r\n const payload = _.defaults(\r\n {\r\n Name: tagContext.Name,\r\n Description: tagContext.Description || '',\r\n },\r\n _.isNumber(tagContext.IsClarityTagEnabled) ? { IsClarityTagEnabled: tagContext.IsClarityTagEnabled } : null,\r\n _.isBoolean(tagContext.IsWebInsightsEnabled) ? { IsWebInsightsEnabled: tagContext.IsWebInsightsEnabled } : null,\r\n tagContext.selectedSharingOption ? { Owner: tagContext.Owner } : null,\r\n tagContext.selectedSharingOption ? {\r\n SharingScope: tagContext.SharingScope || {\r\n Customers: [],\r\n Accounts: [],\r\n Others: 0,\r\n Total: 0,\r\n },\r\n } : null\r\n );\r\n\r\n return payload;\r\n};\r\n\r\nexport const saveTag = (tagContext, scope, serverContext) => {\r\n const tagId = tagContext.Id;\r\n const { cid, aid } = scope.values || {};\r\n let customerId = cid;\r\n if (_.isFinite(aid)) {\r\n // customer level Tag belongs to scope cid; account level tag should use advcid\r\n const { CurrentAccount: currentAccount } = serverContext;\r\n customerId = currentAccount.AdvertiserCustomerID;\r\n if (!customerId) {\r\n throw new Error('customer Id is undefined');\r\n }\r\n }\r\n const payload = processPayload(tagContext);\r\n if (!tagId) {\r\n return createTag(customerId, aid, payload);\r\n }\r\n // edit scenario\r\n return updateTag(customerId, aid, tagId, payload);\r\n};\r\n","import React, { useContext, useState, useMemo, useCallback, useEffect } from 'react';\r\nimport _ from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { notificationApi } from '@bingads-webui-react/notification-center';\r\nimport { StepContainer } from '@bingads-webui-campaign-react/goal-creation-wizard';\r\nimport { SharedLibraryUtils } from '@bingads-webui-campaign-react/shared-library-scopes';\r\nimport { UetSetupWizardContext } from '../../uet-setup-wizard-context';\r\nimport { CreateUetTagView } from './create-uet-tag-view';\r\nimport { WIZARD_ACTIONS } from '../../uet-setup-wizard-reducer';\r\nimport { getErrorMessage, saveTag } from '../../uet-tag-repository';\r\n\r\nexport const isAccountLevel = scope => (scope.values && scope.values.aid);\r\n\r\nexport const CreateUetTagStep = (props) => {\r\n const {\r\n legacyI18n,\r\n permissions,\r\n customerHierarchy,\r\n } = props;\r\n const isTagSharingScope = !_.isEmpty(customerHierarchy);\r\n const i18n = useContext(I18nContext);\r\n const wizardContext = useContext(UetSetupWizardContext);\r\n const {\r\n scope,\r\n serverContext,\r\n tagContext,\r\n } = wizardContext;\r\n\r\n const createTagTitle = i18n.getString(_TL_('Create UET tag'));\r\n const editTagTitle = i18n.getString(_TL_('Edit UET tag'));\r\n\r\n const [tagEntity, setTagEntity] = useState(tagContext);\r\n const [showError, setShowError] = useState(false);\r\n const [notificationId, setNotificationId] = useState(null);\r\n\r\n useEffect(() => () => notificationId && notificationApi.dismiss(notificationId), [notificationId]);\r\n\r\n const showNotification = useCallback((message) => {\r\n setNotificationId(notificationApi.showWarning(message));\r\n }, []);\r\n\r\n const resetShowError = useCallback(() => setShowError(false), []);\r\n\r\n const updateTagEntity = useCallback((updatedTag) => {\r\n setTagEntity({\r\n ...tagEntity,\r\n ...updatedTag,\r\n });\r\n }, [tagEntity]);\r\n\r\n const tagOwner = useMemo(() => {\r\n const { CurrentAccount: currentAccount, CurrentCustomer: currentCustomer } = serverContext;\r\n let owner = _.pick(currentCustomer, ['Id', 'Name', 'Number']);\r\n if (isAccountLevel(scope)) {\r\n const { AdvertiserCustomerID: parentCid } = currentAccount || {};\r\n // TOTO from xuwu: we need also populate the Name and Number of the advertiserCustomer\r\n owner = !_.isFinite(parentCid) || parentCid === currentCustomer.Id ? owner : { Id: parentCid };\r\n }\r\n return owner;\r\n }, [scope, serverContext]);\r\n\r\n const saveAndNextHandler = useCallback(() => {\r\n // validate name\r\n if (_.isEmpty(tagEntity.Name)) {\r\n setShowError(true);\r\n return;\r\n }\r\n saveTag(_.defaults(tagEntity, isTagSharingScope ? { Owner: tagOwner } : null), scope, serverContext)\r\n .then((response) => {\r\n if (response.Id) {\r\n const tagId = response.Id;\r\n if (tagId) {\r\n wizardContext.dispatch({\r\n type: WIZARD_ACTIONS.SAVE_TAG_AND_NEXT,\r\n data: { ...tagEntity, Id: tagId },\r\n });\r\n }\r\n }\r\n })\r\n .catch((response) => {\r\n if (response.body.value && response.body.value.length > 0) {\r\n showNotification(getErrorMessage(response.body.value[0].Code, i18n));\r\n } else {\r\n showNotification(i18n.getString(_TL_('We\\'ve encountered an error while saving this tag. Please try again or contact support for assistance.')));\r\n }\r\n });\r\n }, [i18n, isTagSharingScope, scope, serverContext, tagEntity, tagOwner, wizardContext, showNotification]);\r\n\r\n const footerConfig = useMemo(() => ({\r\n buttons: [{\r\n type: 'Primary-Start',\r\n onClick: saveAndNextHandler,\r\n isEnabled: true,\r\n text: i18n.getString(_TL_('Save and next')),\r\n },\r\n {\r\n type: 'Cancel',\r\n onClick: wizardContext.exitWizard,\r\n isEnabled: true,\r\n text: i18n.getString(_TL_('Cancel')),\r\n }],\r\n }), [i18n, saveAndNextHandler, wizardContext]);\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n )}\r\n {tagNameErrorMsg}
\r\n\r\n {i18n.getString(_TL_('UET tag description'))}\r\n
\r\n \r\n
\r\n {tagSharingScopeContext.isTagSharingScope &&\r\n \r\n {i18n.getString(_TL_('Enable Microsoft Clarity'))}\r\n
\r\n \r\n
\r\n }\r\n \r\n {i18n.getString(_TL_('Sharing'))}\r\n
\r\n \r\n
\r\n \r\n
}\r\n \r\n \r\n {i18n.getString(webInsightsInstructionText.TopText)}\r\n
\r\n {children}\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nUetSetupWizardUnstyled.propTypes = {\r\n classes: PropTypes.shape(_.mapObject(getStyles(), _.constant(PropTypes.string.isRequired)))\r\n .isRequired,\r\n instrumentation: PropTypes.objectOf(PropTypes.any).isRequired,\r\n onWizardExit: PropTypes.func.isRequired,\r\n legacyI18n: PropTypes.objectOf(PropTypes.any).isRequired,\r\n tagEditEntity: PropTypes.objectOf(PropTypes.any),\r\n customerHierarchy: PropTypes.arrayOf(PropTypes.any),\r\n scope: PropTypes.objectOf(PropTypes.any).isRequired,\r\n permissions: PropTypes.objectOf(PropTypes.any).isRequired,\r\n serverContext: PropTypes.objectOf(PropTypes.any).isRequired,\r\n registerBackButtonClickedHandler: PropTypes.func.isRequired,\r\n};\r\n\r\nUetSetupWizardUnstyled.defaultProps = {\r\n tagEditEntity: null,\r\n customerHierarchy: null,\r\n};\r\n\r\nexport const UetSetupWizard = withInstrumentation(withDefaultStyles(UetSetupWizardUnstyled, getStyles));\r\n","export const getStyles = (components, { palette = {} } = {}) => {\r\n const color = {\r\n completedBorder: palette.blue,\r\n completedIcon: palette.blue,\r\n inProgressIcon: '#c0def6',\r\n incompleteBorder: '#ebebeb',\r\n incompleteIcon: palette.neutralLight,\r\n background: palette.white,\r\n stepContentBorder: palette.neutralQuaternaryAlt,\r\n stepFooterBorder: palette.neutralLight,\r\n };\r\n return ({\r\n uetSetupWizard: {\r\n flexDirection: 'column',\r\n float: '1 0 auto',\r\n height: '100%',\r\n width: '100%',\r\n display: 'flex',\r\n '& .react-block-ui, & .react-block-ui-none': { height: '100%', width: '100%' },\r\n '& .step-footer-buttons': {\r\n marginLeft: '-8px',\r\n },\r\n },\r\n\r\n // StepProgressList on left side\r\n wizardListContainer: {\r\n width: '228px',\r\n minWidth: '228px',\r\n borderRight: `1px solid ${color.stepContentBorder}`,\r\n paddingLeft: '32px',\r\n paddingTop: '32px',\r\n paddingBottom: '32px',\r\n overflow: 'hidden',\r\n minHeight: 450,\r\n\r\n '& ol': {\r\n margin: 0,\r\n padding: 0,\r\n listStyle: 'none',\r\n },\r\n\r\n // Styles for drawing the vertical line\r\n '& .step-progress-list-item': {\r\n borderLeft: `2px solid ${color.completedBorder}`,\r\n '&.step-progress-list-item-ahead': { borderLeftColor: color.incompleteBorder },\r\n },\r\n\r\n // top level list items\r\n '& ol.step-progress-list>.step-progress-list-item': {\r\n paddingTop: '24px',\r\n\r\n '&:first-child': { borderLeftColor: color.background, paddingTop: 0 },\r\n\r\n '&>.step-progress-list-item-glyphicon': {\r\n marginLeft: '-8px',\r\n marginRight: '8px',\r\n background: color.background,\r\n paddingTop: '5px',\r\n paddingBottom: '4px',\r\n },\r\n\r\n '&>.step-progress-list-item-glyphicon.iconba-RadioBullet2': {\r\n paddingTop: 0,\r\n paddingBottom: 0,\r\n transform: 'scale(1.52)',\r\n },\r\n },\r\n\r\n // nested list items\r\n '& ol.step-progress-list-item-list>.step-progress-list-item': {\r\n fontSize: '12px',\r\n lineHeight: '16px',\r\n paddingTop: '24px',\r\n marginLeft: '-2px',\r\n\r\n '&>.step-progress-list-item-glyphicon': {\r\n marginLeft: '-8px',\r\n marginRight: '12px',\r\n background: color.background,\r\n paddingBottom: '1px',\r\n },\r\n },\r\n\r\n '& .step-progress-list-item-selected, & .step-progress-list-item-contains-selected': { fontWeight: '600' },\r\n\r\n // glyphicon colors\r\n '& .step-progress-list-item-behind .step-progress-list-item-glyphicon': {\r\n color: color.completedIcon,\r\n },\r\n '& .step-progress-list-item-selected .step-progress-list-item-glyphicon, & .step-progress-list-item-contains-selected>.step-progress-list-item-glyphicon': {\r\n color: color.inProgressIcon,\r\n },\r\n '& .step-progress-list-item-ahead .step-progress-list-item-glyphicon': {\r\n color: color.incompleteIcon,\r\n },\r\n },\r\n\r\n // Content area on right side\r\n wizardContentContainer: {\r\n display: 'flex',\r\n minWidth: 550,\r\n height: '100%',\r\n\r\n '& .step-container, & .step, & .step>div': { height: '100%', width: '100%' },\r\n\r\n // validation errors\r\n '& .error': {\r\n fontSize: '12px',\r\n lineHeight: '16px',\r\n color: '#a80000',\r\n },\r\n },\r\n });\r\n};\r\n\r\n","import React from 'react';\r\nimport { ReactTemplate } from '@bingads-webui-react/react-template';\r\nimport { tutorStepPropTypes } from './step-component-props';\r\nimport { LearnMore } from './learn-more';\r\nimport { StyledTutorialStep } from './tutorial-steps';\r\nimport helpTrackingImage from '../../media/helpTracking.png';\r\n\r\nexport const AddTheTrackingCodeToYourWebsite = (props) => {\r\n const { i18n } = props;\r\n const text = i18n.getString(_TL_('Add the UET tag tracking code throughout your website, either directly or through your tag management solution.'));\r\n const content = (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n );\r\n\r\n return (\r\n \r\n
\r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nPopupCallout.propTypes = {\r\n title: PropTypes.oneOfType([\r\n PropTypes.element.isRequired,\r\n PropTypes.string.isRequired,\r\n ]).isRequired,\r\n /**\r\n * the content element or text of the callout\r\n */\r\n content: PropTypes.oneOfType([\r\n PropTypes.element.isRequired,\r\n PropTypes.string.isRequired,\r\n ]).isRequired,\r\n /**\r\n * target of the callout, DOM element\r\n */\r\n target: PropTypes.instanceOf(Element).isRequired,\r\n /**\r\n * function called to remove callout\r\n */\r\n close: PropTypes.func.isRequired,\r\n /**\r\n * callout id\r\n */\r\n popoverId: PropTypes.string.isRequired,\r\n /**\r\n * view that has event triggered to close the popup\r\n */\r\n view: PropTypes.shape({\r\n on: PropTypes.func.isRequired,\r\n off: PropTypes.func.isRequired,\r\n }),\r\n\r\n popoverClassName: PropTypes.string,\r\n};\r\n\r\nPopupCallout.defaultProps = {\r\n view: null,\r\n popoverClassName: undefined,\r\n};\r\n\r\nexport function showPopup({\r\n containerSelector,\r\n event,\r\n popoverId = 'popup-callout',\r\n title,\r\n contentView,\r\n parentView,\r\n popoverClassName,\r\n}) {\r\n const container = $(containerSelector);\r\n container.show();\r\n const containerDOM = container.get(0);\r\n contentView.once('rendered', () => {\r\n const contentViewReactWrapper = \r\n
\r\n \r\n
\r\n \r\n
\r\n {imageSrc ? {title}
\r\n\r\n \r\n {descTemp}\r\n
\r\n \r\n {downloadInstructions}\r\n
\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nInstructions.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n classes: PropTypes.shape({\r\n instructionContent: PropTypes.string,\r\n imageContent: PropTypes.string,\r\n buttons: PropTypes.string,\r\n }).isRequired,\r\n title: PropTypes.string.isRequired,\r\n descTemp: PropTypes.element,\r\n button: PropTypes.element.isRequired,\r\n downloadInstructions: PropTypes.string,\r\n imageSrc: PropTypes.string,\r\n};\r\n\r\nInstructions.defaultProps = {\r\n descTemp: null,\r\n imageSrc: '',\r\n downloadInstructions: '',\r\n};\r\n\r\nexport const StyledInstructions = withDefaultStyles(\r\n Instructions,\r\n getInstructionsStyles\r\n);\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nexport const LearnMore = (props) => {\r\n const { i18n, topicId, ariaLabel } = props;\r\n\r\n return (\r\n \r\n {button}\r\n
\r\n \r\n { this.state.progressBar &&
);\r\n }\r\n\r\n const scheduleEditViewStrings = {\r\n frequencyLabelText: i18n.getString('SchedulesTab_Frequency_Label'),\r\n frequencyHelpId: 'pop_BA_OfflineConv_Frequency',\r\n timeZoneLabelText: i18n.getString('TimeZone_Label'),\r\n timeZoneHelpId: 'pop_BA_OfflineConv_TimeZone',\r\n urlLabelText: newI18n.getString(_TL_('File URL')),\r\n urlHelpId: 'pop_BA_OfflineConv_URL',\r\n descriptionHelpId: 'help:app54762',\r\n urlInsecureProtocolWarning: i18n.getString('SchedulesTab_URL_InsecureProtocolWarning'),\r\n usernameLabelText: i18n.getString('SchedulesTab_Username_Label'),\r\n usernameHelpId: 'pop_BA_OfflineConv_Username',\r\n passwordLabelText: i18n.getString('SchedulesTab_Password_Label'),\r\n passwordHelpId: 'pop_BA_OfflineConv_Password',\r\n };\r\n\r\n return (\r\n {newI18n.getString(_TL_('Schedule saved'))}
}\r\n { this.state.progressBar &&{newI18n.getString(_TL_('Here is a preview of the results based on the data currently available at your file URL.'))}
}\r\n\r\n { this.state.progressBar &&\r\n
\r\n }\r\n \r\n
\r\n
\r\n );\r\n};\r\n\r\nTutorialStep.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n classes: PropTypes.objectOf(PropTypes.any).isRequired,\r\n title: PropTypes.string.isRequired,\r\n descTemp: PropTypes.element,\r\n imageSrc: PropTypes.string,\r\n};\r\n\r\nTutorialStep.defaultProps = {\r\n descTemp: null,\r\n imageSrc: '',\r\n};\r\n\r\nexport const StyledTutorialStep = withDefaultStyles(\r\n TutorialStep,\r\n getTutorialStepsStyles\r\n);\r\n\r\nexport const NewStyledTutorialStep = withDefaultStyles(\r\n TutorialStep,\r\n getNewTutorialStepsStyles\r\n);\r\n","import React from 'react';\r\nimport { ReactTemplate } from '@bingads-webui-react/react-template';\r\nimport { DefaultButton } from '@fluentui/react/lib/Button';\r\nimport { tutorStepPropTypes } from './step-component-props';\r\nimport { StyledInstructions } from './instructions';\r\nimport contactSupport from '../../media/contactSupport.png';\r\n\r\nexport const UETTagContactSupport = (props) => {\r\n const { i18n } = props;\r\n const text = i18n.getString(_TL_('Our support team can help you work out UET setup instructions.'));\r\n const content = (\r\n {title}
\r\n\r\n {descTemp}\r\n
\r\n {imageSrc ? \r\n
\r\n
\r\n
\r\n window.open(edgeExtURL)} /> \r\n window.open(chromeExtURL)} /> \r\n
\r\n );\r\n\r\n return (\r\n