\r\n { actionBarElements }\r\n
\r\n );\r\n }\r\n}\r\n\r\nActionBar.propTypes = {\r\n configs: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\r\n context: PropTypes.shape({\r\n goToNextStep: PropTypes.func,\r\n goToPrevStep: PropTypes.func,\r\n handleCancelButtonClick: PropTypes.func,\r\n }).isRequired,\r\n classes: PropTypes.shape({}).isRequired,\r\n};\r\n","export const getActionBarContainerStyles = (__, { palette = {} }) => ({\r\n actionBarContainer: {\r\n width: '100%',\r\n height: 64,\r\n backgroundColor: palette.white,\r\n paddingLeft: 16,\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContents: 'flex-start',\r\n },\r\n borderTop: {\r\n borderTop: `1px solid ${palette.neutralQuaternaryAlt}`,\r\n },\r\n defaultButtonPadding: {\r\n marginLeft: 8,\r\n marginRight: 8,\r\n },\r\n firstButtonPadding: {\r\n marginLeft: 10,\r\n marginRight: 8,\r\n },\r\n additionalLeftPadding: {\r\n marginLeft: 32,\r\n marginRight: 8,\r\n },\r\n});\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nimport { ActionBar } from './action-bar';\r\nimport { ImportCoreContext } from '../base-import-context';\r\nimport { getActionBarContainerStyles } from '../styles/action-bar-container-styles';\r\n\r\nclass UnStyledActionBarContainer extends React.PureComponent {\r\n render() {\r\n const {\r\n actionBarConfig,\r\n classes,\r\n enableBorderTop,\r\n additionalComponent,\r\n } = this.props;\r\n return (\r\n \r\n { title }\r\n
\r\n );\r\n};\r\n\r\nTitleBar.propTypes = {\r\n classes: PropTypes.shape({}).isRequired,\r\n title: PropTypes.string.isRequired,\r\n};\r\n\r\nexport const UnstyledTitleBarContainer = (props) => {\r\n const { classes, stepTitle } = props;\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nUnstyledTitleBarContainer.propTypes = {\r\n classes: PropTypes.shape({}).isRequired,\r\n stepTitle: PropTypes.string.isRequired,\r\n};\r\n\r\nexport const TitleBarContainer = withDefaultStyles(\r\n UnstyledTitleBarContainer,\r\n getTitleBarContainerStyles\r\n);\r\n","export const getTitleBarContainerStyles = () => ({\r\n titleBarContainer: {\r\n width: '100%',\r\n height: 84,\r\n display: 'flex',\r\n alignItems: 'center',\r\n padding: '26px 32px 31px',\r\n },\r\n stepTitle: {\r\n fontWeight: '600',\r\n fontSize: 20,\r\n fontStyle: 'normal',\r\n lineHeight: '27px',\r\n },\r\n});\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nimport { ActionBarContainer } from '../action-bar/action-bar-container';\r\nimport { TitleBarContainer } from '../title-bar/title-bar';\r\n\r\nconst getStepContainerStyles = () => ({\r\n stepContentContainer: {\r\n padding: '0 32px 32px',\r\n height: '100%',\r\n flex: '1',\r\n minWidth: 500,\r\n },\r\n stepContainer: {\r\n paddingTop: 0,\r\n display: 'flex',\r\n flex: '1',\r\n flexDirection: 'column',\r\n height: '100%',\r\n },\r\n});\r\n\r\nconst StepContent = (props) => {\r\n const { children, classes } = props;\r\n return (\r\n \r\n
\r\n \r\n { children }\r\n
\r\n );\r\n};\r\n\r\nStepContent.propTypes = {\r\n children: PropTypes.shape({}).isRequired,\r\n classes: PropTypes.shape({\r\n stepContentContainer: PropTypes.string,\r\n }).isRequired,\r\n};\r\n\r\nconst DefaultStepContentContainer = ({ children }) => (<>{children});\r\n\r\nDefaultStepContentContainer.propTypes = {\r\n children: PropTypes.oneOfType([\r\n PropTypes.arrayOf(PropTypes.node),\r\n PropTypes.node,\r\n ]).isRequired,\r\n};\r\n\r\nconst UnStyledStepContainer = (props) => {\r\n const {\r\n stepTitle,\r\n actionBarConfig,\r\n children,\r\n classes,\r\n baseClassName,\r\n enableBorderTop,\r\n StepContentContainer,\r\n additionalActionBarComponent,\r\n } = props;\r\n\r\n const isActionBarEnabled = actionBarConfig !== null && actionBarConfig.length > 0;\r\n\r\n return (\r\n \r\n
\r\n );\r\n});\r\n\r\nErrorContainerInternal.propTypes = {\r\n errorMessage: PropTypes.string.isRequired,\r\n classes: PropTypes.shape({}).isRequired,\r\n};\r\n\r\nexport const ErrorContainer = withDefaultStyles(\r\n ErrorContainerInternal,\r\n getErrorContainerStyles\r\n);\r\n","/* eslint-disable jsx-a11y/anchor-is-valid */\r\n\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Card as FluentUiCard } from '@fluentui/react-cards';\r\nimport { Link } from '@bingads-webui-react/fabric-with-signal';\r\nimport { Glyphicon } from '@bingads-webui-react/primitive';\r\n\r\nconst cardStyles = {\r\n root: {\r\n height: 116,\r\n fontSize: '14px',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n padding: '14px',\r\n },\r\n};\r\n\r\nconst headerStyles = {\r\n root: {\r\n fontSize: '14px',\r\n fontWeight: '600',\r\n display: 'inline-block',\r\n },\r\n};\r\n\r\nconst countStyles = {\r\n root: {\r\n fontSize: '18px',\r\n fontWeight: '600',\r\n height: 36,\r\n },\r\n};\r\n\r\nconst linkStyles = {\r\n root: {\r\n fontSize: '14px',\r\n fontWeight: 'normal',\r\n },\r\n};\r\n\r\nexport class Card extends React.PureComponent {\r\n onClick = () => {\r\n const { onClickViewDetails, card } = this.props;\r\n onClickViewDetails(card.entityType);\r\n }\r\n\r\n render() {\r\n const {\r\n card,\r\n i18n,\r\n } = this.props;\r\n\r\n return (\r\n \r\n {errorMessage}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n {card.count}\r\n \r\n \r\n {\r\n card.count !== 0 &&\r\n \r\n {i18n.getString(_TL_('View details'))}\r\n \r\n }\r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nCard.propTypes = {\r\n card: PropTypes.shape({}).isRequired,\r\n i18n: PropTypes.shape({}).isRequired,\r\n onClickViewDetails: PropTypes.func.isRequired,\r\n};\r\n","export const CARD_TYPES = {\r\n Additions: 'Additions',\r\n Deletions: 'Deletions',\r\n Changes: 'Changes',\r\n Errors: 'Errors',\r\n};\r\n\r\nexport const CARD_TITLES = {\r\n [CARD_TYPES.Additions]: _TL_('New items imported from Google Ads'),\r\n [CARD_TYPES.Changes]: _TL_('Existing items synced through import'),\r\n [CARD_TYPES.Deletions]: _TL_('Items deleted in Microsoft Advertising through import'),\r\n [CARD_TYPES.Errors]: _TL_('Skipped items'),\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport { Stack } from '@fluentui/react';\r\n\r\nimport { Card } from './card';\r\nimport { CARD_TYPES } from '../card-constants';\r\n\r\nconst completedIcon = 'ba-CompletedSolid';\r\nconst skippedIcon = 'ba-AlertSolid';\r\n\r\n\r\nconst getCardsConfig = (i18n, classes, stats) => ([{\r\n name: i18n.getString(_TL_('New items')),\r\n icon: completedIcon,\r\n iconClassName: classes.successIcon,\r\n ariaLabel: i18n.getString(_TL_('View details for new items')),\r\n count: stats.statsAggregated.Additions,\r\n entityType: CARD_TYPES.Additions,\r\n labelClassName: 'card-new',\r\n}, {\r\n name: i18n.getString(_TL_('Synced items')),\r\n icon: completedIcon,\r\n iconClassName: classes.successIcon,\r\n ariaLabel: i18n.getString(_TL_('View details for synced items')),\r\n count: stats.statsAggregated.Changes,\r\n entityType: CARD_TYPES.Changes,\r\n labelClassName: 'card-updates',\r\n}, {\r\n name: i18n.getString(_TL_('Deleted items')),\r\n icon: completedIcon,\r\n iconClassName: classes.successIcon,\r\n ariaLabel: i18n.getString(_TL_('View details for deleted items')),\r\n count: stats.statsAggregated.Deletions,\r\n entityType: CARD_TYPES.Deletions,\r\n labelClassName: 'card-deleted',\r\n}, {\r\n name: i18n.getString(_TL_('Skipped items')),\r\n icon: skippedIcon,\r\n iconClassName: classes.errorIcon,\r\n ariaLabel: i18n.getString(_TL_('View details for skipped items')),\r\n count: stats.statsAggregated.Errors,\r\n entityType: CARD_TYPES.Errors,\r\n labelClassName: 'card-errors',\r\n}]);\r\n\r\nexport class CardsZone extends React.PureComponent {\r\n render() {\r\n const {\r\n classes,\r\n i18n,\r\n stats,\r\n onClickViewDetails,\r\n } = this.props;\r\n\r\n const cardsConfig = getCardsConfig(i18n, classes, stats);\r\n const cards = [];\r\n _.each(cardsConfig, card => (\r\n cards.push(\r\n
\r\n );\r\n};\r\n\r\nImportDetailView.propTypes = {\r\n label: PropTypes.string.isRequired,\r\n value: PropTypes.string.isRequired,\r\n classes: PropTypes.shape({}).isRequired,\r\n labelClassName: PropTypes.string.isRequired,\r\n};\r\n\r\nexport class ImportDetails extends React.PureComponent {\r\n render() {\r\n const {\r\n classes,\r\n getImportDetailsView,\r\n } = this.props;\r\n\r\n const summaryInfos = getImportDetailsView();\r\n const importDetails = [];\r\n\r\n _.each(summaryInfos, (summaryInfo) => {\r\n if (summaryInfo) {\r\n importDetails.push({label}
\r\n {value}
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nDetailsTable.propTypes = {\r\n columns: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\r\n items: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Panel } from '@bingads-webui-campaign-react/panel';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nimport { CARD_TITLES, CARD_TYPES } from '../card-constants';\r\nimport { DetailsTable } from './details-table';\r\nimport { ActionBarContainer } from '../../action-bar/action-bar-container';\r\n\r\nconst entityTypeToColumnHeaderMapping = {\r\n [CARD_TYPES.Additions]: _TL_('Imported'),\r\n [CARD_TYPES.Deletions]: _TL_('Deleted'),\r\n [CARD_TYPES.Changes]: _TL_('Synced'),\r\n [CARD_TYPES.Errors]: _TL_('Skipped'),\r\n};\r\n\r\nconst getStyles = () => ({\r\n sidePanelImport: {\r\n '& .panel-content': {\r\n width: 600,\r\n '& .panel-body': {\r\n paddingRight: 64,\r\n paddingBottom: 64,\r\n display: 'flex',\r\n 'flex-direction': 'column',\r\n },\r\n },\r\n },\r\n footer: {\r\n width: '520px',\r\n position: 'fixed',\r\n bottom: '0px',\r\n },\r\n});\r\n\r\nconst getActionBarConfig = (i18n, onClose) => ([{\r\n type: 'button',\r\n text: i18n.getString(_TL_('Close')),\r\n onClick: onClose,\r\n ariaDescription: i18n.getString(_TL_('Close sidepanel')),\r\n}]);\r\n\r\nclass CardDetailsWithPanelInternal extends React.PureComponent {\r\n getColumns = (i18n, entityType) => ([{\r\n key: 'items',\r\n name: i18n.getString(_TL_('Items')),\r\n fieldName: 'entityType',\r\n }, {\r\n key: 'value',\r\n name: i18n.getString(entityTypeToColumnHeaderMapping[entityType]),\r\n fieldName: 'value',\r\n }]);\r\n\r\n render() {\r\n const {\r\n isOpen,\r\n onClose,\r\n entityType,\r\n stats,\r\n newI18n,\r\n i18n,\r\n classes,\r\n title,\r\n } = this.props;\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n {defaultRender(props)}\r\n \r\n \r\n
\r\n);\r\n\r\nonWrapDefaultLabelWithHelpIconRenderer.propTypes = {\r\n helpId: PropTypes.string.isRequired,\r\n helpAriaLabel: PropTypes.string.isRequired,\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {\r\n Dropdown,\r\n TextField,\r\n} from '@bingads-webui-react/fabric-with-signal';\r\nimport _ from 'underscore';\r\nimport { serializeEmailAddresses, validateEmailAddress } from './util/index';\r\nimport { onWrapDefaultLabelWithHelpIconRenderer } from '../base-component/label-with-helpicon';\r\n\r\nconst MAX_EMAIL_COUNT = 10;\r\n\r\nexport class EmailNotificationSettings extends React.PureComponent {\r\n constructor(props) {\r\n super(props);\r\n this.emailOptions = this.props.importSchedulingOptions.getEmailOptions();\r\n this.defaultEmailAddress = this.props.currentUser.Email ? this.props.currentUser.Email : '';\r\n this.state = {\r\n NotificationType:\r\n _.find(this.emailOptions, item => item.key === this.props.NotificationType) ||\r\n this.emailOptions[0],\r\n NotificationEmailAddresses: this.props.NotificationEmailAddresses ?\r\n this.props.NotificationEmailAddresses.split(';').join(',') :\r\n this.defaultEmailAddress,\r\n emailAddressErrorMessage: '',\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n this.props.saveEmail({\r\n isEmailValid: this.validateEmailAddresses(this.state.NotificationType, this.state.NotificationEmailAddresses),\r\n });\r\n }\r\n\r\n onTypeChange = (e, item) => {\r\n this.setState({\r\n NotificationType: item,\r\n // reset the values if set to no email.\r\n ...item === this.emailOptions[0] ? {\r\n emailAddressErrorMessage: '',\r\n } : {},\r\n // if the address TextField is blank then keep the default address\r\n NotificationEmailAddresses: _.isEmpty(this.state.NotificationEmailAddresses.trim()) ?\r\n this.defaultEmailAddress : this.state.NotificationEmailAddresses,\r\n }, () => {\r\n this.saveValue(item, this.state.NotificationEmailAddresses);\r\n });\r\n }\r\n\r\n onAddressesChange = (e, val) => {\r\n this.setState({\r\n NotificationEmailAddresses: val,\r\n emailAddressErrorMessage: '',\r\n }, () => {\r\n this.saveValue(this.state.NotificationType, val);\r\n });\r\n }\r\n\r\n saveValue = (NotificationType, NotificationEmailAddresses) => {\r\n this.props.saveEmail({\r\n isEmailValid: this.validateEmailAddresses(NotificationType, NotificationEmailAddresses),\r\n NotificationType: NotificationType.key,\r\n NotificationEmailAddresses: NotificationType === this.emailOptions[0] ?\r\n null : serializeEmailAddresses(NotificationEmailAddresses),\r\n });\r\n }\r\n\r\n validateEmailAddresses(NotificationType, emailAddresses) {\r\n if (NotificationType === this.emailOptions[0]) {\r\n return true;\r\n }\r\n\r\n if (emailAddresses === '') {\r\n this.setState({\r\n emailAddressErrorMessage: this.props.i18n.getString(_TL_('Please input Email Address')),\r\n });\r\n return false;\r\n }\r\n\r\n const emailAddressArray = emailAddresses ? emailAddresses.split(',') : [];\r\n if (emailAddressArray.length > MAX_EMAIL_COUNT) {\r\n this.setState({\r\n emailAddressErrorMessage: this.props.i18n.getString(\r\n _TL_('Maximum limit of mail addresses for Import notification is {{count}}'),\r\n { count: MAX_EMAIL_COUNT }\r\n ),\r\n });\r\n return false;\r\n }\r\n let areAllEmailsValid = true;\r\n _.each(emailAddressArray, (email) => {\r\n if (!validateEmailAddress(email.trim())) {\r\n this.setState({\r\n emailAddressErrorMessage: this.props.i18n.getString(_TL_('Invalid Email Address')),\r\n });\r\n areAllEmailsValid = false;\r\n }\r\n });\r\n return areAllEmailsValid;\r\n }\r\n\r\n render() {\r\n const {\r\n NotificationType,\r\n NotificationEmailAddresses,\r\n emailAddressErrorMessage,\r\n } = this.state;\r\n const { i18n } = this.props;\r\n return (\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nEmailNotificationSettings.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n NotificationType: PropTypes.string.isRequired,\r\n NotificationEmailAddresses: PropTypes.string,\r\n importSchedulingOptions: PropTypes.shape({\r\n getEmailOptions: PropTypes.func,\r\n }).isRequired,\r\n saveEmail: PropTypes.func.isRequired,\r\n currentUser: PropTypes.shape({\r\n Email: PropTypes.string,\r\n }),\r\n};\r\n\r\nEmailNotificationSettings.defaultProps = {\r\n NotificationEmailAddresses: null,\r\n currentUser: {},\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport { Label, Stack } from '@fluentui/react';\r\nimport {\r\n Dropdown,\r\n TextField,\r\n} from '@bingads-webui-react/fabric-with-signal';\r\nimport { SelectedItem } from '@bingads-webui-campaign-react/pill-item-components';\r\nimport { serializeEmailAddresses, validateEmailAddress } from './util/index';\r\n\r\nconst MAX_EMAIL_COUNT = 10;\r\n\r\nexport class PillEmailNotificationSettings extends React.PureComponent {\r\n constructor(props) {\r\n super(props);\r\n this.emailOptions = this.props.importSchedulingOptions.getEmailOptionsForCustom();\r\n this.defaultEmailAddress = this.props.currentUser.Email ? [this.props.currentUser.Email] : [];\r\n this.state = {\r\n NotificationType:\r\n _.find(this.emailOptions, item => item.key === this.props.NotificationType) ||\r\n this.emailOptions[0],\r\n NotificationEmailAddresses: this.props.NotificationEmailAddresses ?\r\n this.props.NotificationEmailAddresses.split(';').join(',') :\r\n this.defaultEmailAddress[0] || '',\r\n selectedEmailAddressArray: this.props.NotificationEmailAddresses ? this.props.NotificationEmailAddresses.split(';') : this.defaultEmailAddress,\r\n emailAddressErrorMessage: '',\r\n newEmailAddress: '',\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n this.props.saveEmail({\r\n isEmailValid: this.validateEmailAddresses(this.state.NotificationType, this.state.NotificationEmailAddresses),\r\n });\r\n }\r\n\r\n onTypeChange = (e, item) => {\r\n this.setState({\r\n NotificationType: item,\r\n\r\n // reset default values if notification type changes with no selected email\r\n ..._.isEmpty(this.state.NotificationEmailAddresses.trim()) ? {\r\n emailAddressErrorMessage: '',\r\n NotificationEmailAddresses: this.defaultEmailAddress[0] || '',\r\n selectedEmailAddressArray: this.defaultEmailAddress,\r\n } : {},\r\n }, () => {\r\n this.saveValue(item, this.state.NotificationEmailAddresses);\r\n });\r\n };\r\n\r\n onAddressesChange = (e, val) => {\r\n this.setState({\r\n newEmailAddress: val,\r\n emailAddressErrorMessage: '',\r\n });\r\n };\r\n\r\n onAddItems = (event) => {\r\n if (event.key === 'Enter') {\r\n // join one or more new email addresses and re-split to different items\r\n const newNotificationEmailAddresses = [...this.state.selectedEmailAddressArray, this.state.newEmailAddress].join(',');\r\n const newSelectedEmailAddresseArray = newNotificationEmailAddresses.split(',');\r\n\r\n if (this.validateEmailAddresses(this.state.NotificationType, newNotificationEmailAddresses)) {\r\n this.setState({\r\n NotificationEmailAddresses: newNotificationEmailAddresses,\r\n emailAddressErrorMessage: '',\r\n newEmailAddress: '',\r\n selectedEmailAddressArray: newSelectedEmailAddresseArray,\r\n }, () => {\r\n this.saveValue(this.state.NotificationType, this.state.NotificationEmailAddresses);\r\n });\r\n }\r\n }\r\n };\r\n\r\n onDeleteItems = (index) => {\r\n const newSelectedEmailAddresseArray = _.clone(this.state.selectedEmailAddressArray);\r\n newSelectedEmailAddresseArray.splice(index, 1);\r\n\r\n this.setState({\r\n NotificationEmailAddresses: newSelectedEmailAddresseArray.join(','),\r\n emailAddressErrorMessage: '',\r\n selectedEmailAddressArray: newSelectedEmailAddresseArray,\r\n }, () => {\r\n this.saveValue(this.state.NotificationType, this.state.NotificationEmailAddresses);\r\n });\r\n };\r\n\r\n saveValue = (NotificationType, NotificationEmailAddresses) => {\r\n if (this.props.activity) {\r\n this.props.activity.signal(`selectedEmails: ${this.state.NotificationEmailAddresses}`);\r\n }\r\n\r\n this.props.saveEmail({\r\n isEmailValid: this.validateEmailAddresses(NotificationType, NotificationEmailAddresses),\r\n NotificationType: NotificationType.key,\r\n NotificationEmailAddresses: NotificationType === this.emailOptions[0] ?\r\n null : serializeEmailAddresses(NotificationEmailAddresses),\r\n });\r\n };\r\n\r\n validateEmailAddresses(NotificationType, emailAddresses) {\r\n if (NotificationType === this.emailOptions[0]) {\r\n return true;\r\n }\r\n\r\n if (emailAddresses === '') {\r\n this.setState({\r\n emailAddressErrorMessage: this.props.i18n.getString(_TL_('Please input Email Address')),\r\n });\r\n return false;\r\n }\r\n\r\n const emailAddressArray = emailAddresses ? emailAddresses.split(',') : [];\r\n if (emailAddressArray.length > MAX_EMAIL_COUNT) {\r\n this.setState({\r\n emailAddressErrorMessage: this.props.i18n.getString(\r\n _TL_('Maximum limit of mail addresses for Import notification is {{count}}'),\r\n { count: MAX_EMAIL_COUNT }\r\n ),\r\n });\r\n return false;\r\n }\r\n\r\n let areAllEmailsValid = true;\r\n _.each(emailAddressArray, (email) => {\r\n if (!validateEmailAddress(email.trim())) {\r\n // do not show error message if empty input\r\n if (email) {\r\n this.setState({\r\n emailAddressErrorMessage: this.props.i18n.getString(_TL_('Invalid Email Address')),\r\n });\r\n }\r\n areAllEmailsValid = false;\r\n }\r\n });\r\n return areAllEmailsValid;\r\n }\r\n\r\n render() {\r\n const {\r\n NotificationType,\r\n selectedEmailAddressArray,\r\n emailAddressErrorMessage,\r\n } = this.state;\r\n const { i18n } = this.props;\r\n const stackContainerToken = {\r\n childrenGap: 8,\r\n };\r\n\r\n return (\r\n \r\n
\r\n {NotificationType === this.emailOptions[0] ||\r\n \r\n
\r\n }\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nPillEmailNotificationSettings.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n NotificationType: PropTypes.string.isRequired,\r\n NotificationEmailAddresses: PropTypes.string,\r\n importSchedulingOptions: PropTypes.shape({\r\n getEmailOptionsForCustom: PropTypes.func,\r\n }).isRequired,\r\n saveEmail: PropTypes.func.isRequired,\r\n currentUser: PropTypes.shape({\r\n Email: PropTypes.string,\r\n }),\r\n activity: PropTypes.shape({\r\n signal: PropTypes.func,\r\n }),\r\n};\r\n\r\nPillEmailNotificationSettings.defaultProps = {\r\n NotificationEmailAddresses: null,\r\n currentUser: {},\r\n activity: null,\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { TextField } from '@bingads-webui-react/fabric-with-signal';\r\nimport _ from 'underscore';\r\n\r\nconst MAXLEN = 255;\r\n\r\nexport class ImportName extends React.PureComponent {\r\n constructor(props) {\r\n super(props);\r\n this.activiy = props;\r\n this.state = {\r\n name: this.props.Name,\r\n };\r\n }\r\n\r\n onChange = (e, val) => {\r\n if (!val || val.length <= MAXLEN) {\r\n this.setState({\r\n name: val,\r\n });\r\n const isNameValid = this.isValid(true, val);\r\n if (this.props.activity) {\r\n this.props.activity.signal(`ImportName:${val}`);\r\n }\r\n this.props.saveName({\r\n Name: isNameValid ? val : null,\r\n isNameValid,\r\n });\r\n }\r\n }\r\n\r\n isValid = (showError, name) =>\r\n !showError || (_.size(name) > 0 && _.size(name) <= MAXLEN)\r\n\r\n render() {\r\n const { i18n, label } = this.props;\r\n return (\r\n \r\n
\r\n {NotificationType === this.emailOptions[0] ||\r\n \r\n \r\n \r\n \r\n \r\n {selectedEmailAddressArray.map((item, index) => (\r\n
\r\n }\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nImportName.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n Name: PropTypes.string,\r\n label: PropTypes.string,\r\n saveName: PropTypes.func.isRequired,\r\n showError: PropTypes.bool,\r\n activity: PropTypes.shape({\r\n signal: PropTypes.func,\r\n }),\r\n};\r\n\r\nImportName.defaultProps = {\r\n Name: '',\r\n label: '',\r\n showError: false,\r\n activity: null,\r\n};\r\n","import _ from 'underscore';\r\nimport React, { Fragment } from 'react';\r\nimport moment from 'moment-timezone';\r\nimport PropTypes from 'prop-types';\r\nimport {\r\n Stack,\r\n Label,\r\n DatePicker,\r\n DayOfWeek\r\n} from '@fluentui/react';\r\nimport {\r\n ChoiceGroup,\r\n Dropdown\r\n} from '@bingads-webui-react/fabric-with-signal';\r\nimport { HelpPopup } from '@bingads-webui-react/help-popup';\r\nimport { Alert } from '@bingads-webui-react/alert';\r\nimport { ReactTemplate } from '@bingads-webui-react/react-template';\r\nimport { fromLegacyTimeZone, toIANATimeZone } from '@bingads-webui-universal/time-zone-converter';\r\nimport {\r\n cronToDisplayString,\r\n getAllTimeZoneOptions,\r\n prepareCron,\r\n DayPickerStrings,\r\n} from './util/index';\r\nimport { getDefaultImportName } from '../util';\r\n\r\nexport class ScheduleSettings extends React.PureComponent {\r\n constructor(props) {\r\n super(props);\r\n this.importSchedulingOptions = this.props.importSchedulingOptions;\r\n this.hourOptions24 = this.importSchedulingOptions.getHours(true);\r\n this.hourOptions12 = this.importSchedulingOptions.getHours(false);\r\n this.timeZonesOptions = getAllTimeZoneOptions(this.props.deps.timeZoneMapper);\r\n const {\r\n currentTime,\r\n chosenTime,\r\n chosenDate,\r\n chosenDay,\r\n chosenDayOfTheMonth,\r\n } = this.props.scheduleData;\r\n\r\n this.minDate = currentTime;\r\n this.maxDate = new Date(this.minDate);\r\n this.maxDate.setYear(this.maxDate.getFullYear() + 1);\r\n let { TimeZoneId } = this.props;\r\n if (!TimeZoneId) {\r\n TimeZoneId = this.props.deps.config.get('AccountTimeZone');\r\n }\r\n this.state = {\r\n displayTime: '12',\r\n chosenTime,\r\n chosenDate,\r\n chosenDay,\r\n chosenDayOfTheMonth,\r\n TimeZoneId,\r\n };\r\n\r\n this.deps = props.deps;\r\n }\r\n\r\n onChosenFrequencyChange = (e, item) => {\r\n if (this.props.chosenFrequency === 'Once') {\r\n this.setDefaultChosenTime();\r\n }\r\n\r\n this.props.setChosenFrequency(item.key);\r\n };\r\n\r\n onSelectDate = (date) => {\r\n this.setState({\r\n chosenDate: date,\r\n }, this.props.saveData);\r\n };\r\n\r\n onChosenDayChange = (e, item) => {\r\n this.setState({\r\n chosenDay: item.key,\r\n }, this.props.saveData);\r\n };\r\n\r\n onChosenDayOfTheMonthChange = (e, item) => {\r\n this.setState({\r\n chosenDayOfTheMonth: item.key,\r\n }, this.props.saveData);\r\n };\r\n\r\n onChosenTimeChange = (e, item) => {\r\n this.setState({\r\n chosenTime: item.key,\r\n }, this.props.saveData);\r\n };\r\n\r\n onDisplayTimeChange = (e, item) => {\r\n this.setState({\r\n displayTime: item.key,\r\n }, this.props.saveData);\r\n };\r\n\r\n onTimeZoneIdChange = (e, item) => {\r\n this.setState({\r\n TimeZoneId: item.key,\r\n }, () => {\r\n this.setDefaultChosenTime();\r\n this.props.saveData();\r\n });\r\n };\r\n\r\n setDefaultChosenTime = () => {\r\n const { deps } = this.props;\r\n\r\n const { timeZoneMapper, config } = deps;\r\n\r\n const initialTimeZoneId = this.state.TimeZoneId || config.get('AccountTimeZone');\r\n\r\n const timeZoneOffsetValue = timeZoneMapper.getTimeZoneOffset(initialTimeZoneId);\r\n\r\n // tells if the current date is in daylight savings time.\r\n const timeZoneStr = toIANATimeZone(fromLegacyTimeZone(initialTimeZoneId));\r\n const isDayLightSavingTime = moment().tz(timeZoneStr).isDST();\r\n\r\n let time = moment().utc();\r\n time = time.minutes(-timeZoneOffsetValue);\r\n\r\n if (isDayLightSavingTime) {\r\n // add 1 hour to the time since moment().utc() returns GMT - 7.\r\n // timeZoneOffsetValue return GMT - 8 always.\r\n // to compensate for daylight saving time add 60 minutes to the time.\r\n time = time.minutes(60);\r\n }\r\n\r\n // add 1 hour to set as default start time.\r\n time = time.minutes(60);\r\n\r\n const hours = time.hours();\r\n\r\n const year = time.year();\r\n const month = time.month();\r\n const date = time.date();\r\n\r\n this.setState({\r\n chosenTime: hours,\r\n chosenDate: new Date(year, month, date),\r\n }, this.props.saveData);\r\n };\r\n\r\n getDisplayString() {\r\n if (!this.state.chosenDate) {\r\n return null;\r\n }\r\n return cronToDisplayString(\r\n this.props.newI18n,\r\n this.state.chosenDate,\r\n {\r\n chosenFrequency: this.props.chosenFrequency,\r\n chosenTime: this.state.chosenTime,\r\n chosenDay: this.state.chosenDay,\r\n chosenDayOfTheMonth: this.state.chosenDayOfTheMonth,\r\n TimeZoneId: this.state.TimeZoneId,\r\n },\r\n this.importSchedulingOptions,\r\n false,\r\n this.timeZonesOptions\r\n );\r\n }\r\n\r\n serializeImportSchedulingOptions() {\r\n let body;\r\n const defaultName = getDefaultImportName(this.props.chosenFrequency, this.deps);\r\n\r\n if (this.props.chosenFrequency === 'Auto') {\r\n body = {\r\n IsAutoFrequency: true,\r\n TimeZoneId: this.state.TimeZoneId,\r\n Cron: null,\r\n defaultName,\r\n };\r\n } else if (this.props.chosenFrequency === 'Now') {\r\n body = {\r\n IsAutoFrequency: false,\r\n TimeZoneId: this.state.TimeZoneId,\r\n Cron: null,\r\n defaultName,\r\n };\r\n } else {\r\n body = {\r\n IsAutoFrequency: false,\r\n TimeZoneId: this.state.TimeZoneId,\r\n Cron: prepareCron(\r\n this.props.chosenFrequency,\r\n this.state.chosenTime,\r\n this.state.chosenDate,\r\n this.state.chosenDay,\r\n this.state.chosenDayOfTheMonth\r\n ),\r\n defaultName,\r\n };\r\n }\r\n\r\n return body;\r\n }\r\n\r\n render() {\r\n const {\r\n newI18n,\r\n // UI improvement on smart schedule step, we will move the frequency setting in the main page\r\n // and leave other settings in the right panel.\r\n withoutFrequnecySetting,\r\n } = this.props;\r\n return (\r\n \r\n {withoutFrequnecySetting ?\r\n {text},\r\n }}\r\n template={newI18n.getString(_TL_('You must select {{bold}}Auto{{/bold}}, {{bold}}Daily{{/bold}}, {{bold}}Weekly{{/bold}} or {{bold}}Monthly{{/bold}} to qualify for this promotional offer.'))}\r\n />}\r\n />\r\n }\r\n {\r\n (this.props.chosenFrequency === 'Once' ||\r\n this.props.chosenFrequency === 'Daily' ||\r\n this.props.chosenFrequency === 'Weekly' ||\r\n this.props.chosenFrequency === 'Monthly') &&\r\n \r\n \r\n }\r\n
\r\n );\r\n }\r\n}\r\n\r\nScheduleSettings.propTypes = {\r\n newI18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n importSchedulingOptions: PropTypes.shape({\r\n getFrequencies: PropTypes.func,\r\n getDaysOfWeek: PropTypes.func,\r\n getDaysOfMonth: PropTypes.func,\r\n }).isRequired,\r\n setChosenFrequency: PropTypes.func,\r\n chosenFrequency: PropTypes.string.isRequired,\r\n deps: PropTypes.shape({\r\n timeZoneMapper: PropTypes.object.isRequired,\r\n config: PropTypes.shape({\r\n get: PropTypes.func,\r\n }),\r\n }).isRequired,\r\n TimeZoneId: PropTypes.number,\r\n scheduleData: PropTypes.shape({\r\n currentTime: PropTypes.object,\r\n chosenTime: PropTypes.number,\r\n chosenDate: PropTypes.object,\r\n chosenDay: PropTypes.number,\r\n chosenDayOfTheMonth: PropTypes.number,\r\n }).isRequired,\r\n saveData: PropTypes.func,\r\n withoutScheduleOptions: PropTypes.arrayOf(PropTypes.string),\r\n facScheduleInvalid: PropTypes.bool,\r\n withoutFrequnecySetting: PropTypes.bool,\r\n};\r\n\r\nScheduleSettings.defaultProps = {\r\n setChosenFrequency: _.noop,\r\n saveData: _.noop,\r\n TimeZoneId: null,\r\n withoutScheduleOptions: [],\r\n facScheduleInvalid: false,\r\n withoutFrequnecySetting: false,\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Checkbox } from '@bingads-webui-react/fabric-with-signal';\r\nimport { ByPassConfirmationModal } from '@bingads-webui-react/feature-adoption-coupon';\r\nimport _ from 'underscore';\r\n\r\nimport { ScheduleSettings } from './schedule-settings';\r\nimport { EmailNotificationSettings } from './email-notification-settings';\r\nimport { PillEmailNotificationSettings } from './pill-email-notification-settings';\r\nimport { ImportName } from './import-name';\r\nimport {\r\n parseCronDateTime,\r\n} from './util/index';\r\nimport { ActionBarContainer } from '../action-bar/action-bar-container';\r\nimport { onWrapDefaultLabelWithHelpIconRenderer } from '../base-component/label-with-helpicon';\r\n\r\nexport class ScheduleFullSettings extends React.PureComponent {\r\n constructor(props) {\r\n super(props);\r\n this.scheduleSettingRef = React.createRef();\r\n this.scheduleData = parseCronDateTime(props.IsAutoFrequency, props.Cron, props.importSchedulingOptions);\r\n let {\r\n NotificationType,\r\n NotificationEmailAddresses,\r\n } = props;\r\n\r\n if (!NotificationType) {\r\n NotificationType = 'OnError';\r\n NotificationEmailAddresses =\r\n this.props.currentUser.Email ? this.props.currentUser.Email : '';\r\n }\r\n\r\n const { permissionFactory } = props;\r\n this.isImportSmartScheduleStepImprovementEnabled = permissionFactory && permissionFactory.IsImportSmartScheduleStepImprovementEnabled && permissionFactory.IsImportSmartScheduleStepImprovementEnabled();\r\n\r\n this.state = {\r\n isEmailValid: true,\r\n isNameValid: true,\r\n NotificationType,\r\n NotificationEmailAddresses,\r\n Name: props.Name,\r\n importNamelabel: props.importNamelabel,\r\n ImportUserPreference: props.ImportUserPreference,\r\n runnowChecked: false,\r\n chosenFrequency: this.scheduleData.chosenFrequency,\r\n showCouponBypassModal: false,\r\n facScheduleInvalid: props.facScheduleInvalid,\r\n };\r\n }\r\n\r\n onRunNowChange = (e, isChecked) => {\r\n this.setState({\r\n runnowChecked: isChecked,\r\n }, this.saveData);\r\n };\r\n\r\n onDismissCouponDialog = () => {\r\n this.setState({\r\n showCouponBypassModal: false,\r\n });\r\n };\r\n\r\n onSaveInner = () => {\r\n const scheduleobj = this.scheduleSettingRef.current;\r\n const taskInfo = scheduleobj.serializeImportSchedulingOptions();\r\n const tasks = {};\r\n\r\n if (this.getChosenFrequency() !== 'Now') {\r\n let customizedComponentData = null;\r\n if (this.props.customizedComponentConfig) {\r\n const { ImportUserPreference, updateImportUserPreference } = this.state;\r\n const updated = _.some(updateImportUserPreference, (value, key) => ImportUserPreference[key] !== value);\r\n if (updated) {\r\n customizedComponentData = {\r\n IsSmartImport: false,\r\n ImportUserPreference: {\r\n ..._.pick(this.state, 'ImportUserPreference').ImportUserPreference,\r\n ..._.pick(this.state, 'updateImportUserPreference').updateImportUserPreference,\r\n },\r\n };\r\n }\r\n }\r\n tasks.scheduledTaskItemBody = {\r\n ..._.pick(taskInfo, 'Cron', 'IsAutoFrequency', 'TimeZoneId'),\r\n ...this.props.withEmailSetting ? _.pick(this.state, 'NotificationType', 'NotificationEmailAddresses') : null,\r\n ...this.props.withImportName ? _.pick(this.state, 'Name') : _.pick(taskInfo, 'defaultName'),\r\n ...customizedComponentData,\r\n };\r\n }\r\n\r\n if (this.getChosenFrequency() === 'Now' || (this.isRunnowShow() && this.state.runnowChecked)) {\r\n tasks.runNowTaskItemBody = taskInfo;\r\n }\r\n\r\n if (_.isFunction(_.get(this.props.customizedComponentConfig, 'onSave'))) {\r\n this.props.customizedComponentConfig.onSave({ tasks });\r\n } else {\r\n if (this.props.deps.setFacScheduleInvalid\r\n && this.state.facScheduleInvalid !== this.props.facScheduleInvalid) {\r\n this.props.deps.setFacScheduleInvalid(this.state.facScheduleInvalid);\r\n }\r\n\r\n this.props.onSave({\r\n tasks,\r\n displaystring: scheduleobj.getDisplayString(),\r\n });\r\n\r\n if (!this.props.skipCloseOnSave) {\r\n this.props.onClose();\r\n }\r\n }\r\n };\r\n\r\n onSave = () => {\r\n if (!this.validation()) {\r\n this.props.onError();\r\n return;\r\n }\r\n\r\n if (this.props.withFooter\r\n && this.state.facScheduleInvalid\r\n && !this.state.showCouponBypassModal) {\r\n this.setState({\r\n showCouponBypassModal: true,\r\n });\r\n } else if (this.state.showCouponBypassModal) {\r\n this.onDismissCouponDialog();\r\n this.onSaveInner();\r\n } else {\r\n this.onSaveInner();\r\n }\r\n };\r\n\r\n getChosenFrequency = () => this.state.chosenFrequency;\r\n\r\n setChosenFrequency = (value) => {\r\n const updatedState = {\r\n chosenFrequency: value,\r\n };\r\n this.setState(updatedState, this.saveData);\r\n\r\n const facScheduleInvalid = value === 'Now' || value === 'Once';\r\n if (this.props.deps.coupon) {\r\n updatedState.facScheduleInvalid = facScheduleInvalid;\r\n }\r\n this.setState(updatedState, this.saveData);\r\n };\r\n\r\n saveData = () => {\r\n if (!this.props.withFooter) {\r\n this.onSave();\r\n }\r\n };\r\n\r\n saveEmail = (obj) => {\r\n this.setState(obj, this.saveData);\r\n };\r\n\r\n saveImportName = (obj) => {\r\n this.setState(obj, this.saveData);\r\n };\r\n\r\n saveImportOptions = (obj) => {\r\n this.setState(obj, this.saveData);\r\n };\r\n\r\n validation = () => (!this.props.withEmailSetting\r\n || this.getChosenFrequency() === 'Now'\r\n || (this.props.withEmailSetting && this.state.isEmailValid))\r\n && this.state.isNameValid\r\n && (!_.isFunction(_.get(this.props.customizedComponentConfig, 'onValidate')) || this.props.customizedComponentConfig.onValidate())\r\n && this.scheduleSettingRef.current.getDisplayString() !== null;\r\n\r\n isRunnowShow = () => !this.props.IsHideRunnowCheckbox && this.getChosenFrequency() !== 'Now';\r\n\r\n render() {\r\n const {\r\n newI18n,\r\n deps: { i18n },\r\n } = this.props;\r\n return (\r\n \r\n {this.props.chosenFrequency === 'Once' &&\r\n \r\n (date ? date.toLocaleDateString() : '')}\r\n ariaLabel={newI18n.getString(_TL_('Day'))}\r\n pickerAriaLabel={newI18n.getString(_TL_('Day picker'))}\r\n />\r\n \r\n }\r\n {this.props.chosenFrequency === 'Weekly' &&\r\n \r\n \r\n \r\n }\r\n {this.props.chosenFrequency === 'Monthly' &&\r\n \r\n \r\n \r\n }\r\n
:\r\n \r\n {newI18n.getString(_TL_('We\\'ll import your campaigns once at the date and time of your preference.'))}\r\n
\r\n \r\n \r\n \r\n \r\n (date ? date.toLocaleDateString() : '')}\r\n ariaLabel={newI18n.getString(_TL_('Day'))}\r\n pickerAriaLabel={newI18n.getString(_TL_('Day picker'))}\r\n />\r\n }\r\n {this.props.chosenFrequency === 'Weekly' && \r\n \r\n {newI18n.getString(_TL_('on day'))}\r\n \r\n \r\n }\r\n \r\n
\r\n }\r\n {\r\n this.props.facScheduleInvalid &&\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {\r\n // TODO: verify if we need to refactor with advanced import container\r\n this.props.withImportName &&\r\n
\r\n {this.props.withFooter &&\r\n \r\n
\r\n {this.props.withEmailSetting && this.getChosenFrequency() !== 'Now' && (this.isImportSmartScheduleStepImprovementEnabled ?\r\n \r\n
\r\n }\r\n {this.state.showCouponBypassModal\r\n && \r\n {this.importOptionsLabel && }\r\n {this.importOptionsDescription &&
\r\n );\r\n }\r\n}\r\n\r\nESCImportOptions.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n options: PropTypes.arrayOf(PropTypes.string).isRequired,\r\n ImportUserPreference: PropTypes.shape({\r\n UpdateCampaignBudgets: PropTypes.bool.isRequired,\r\n UpdateStatusForCampaigns: PropTypes.bool.isRequired,\r\n }).isRequired,\r\n saveImportOptions: PropTypes.func.isRequired,\r\n importOptionsLabel: PropTypes.string,\r\n importOptionsDescription: PropTypes.string,\r\n};\r\n\r\nESCImportOptions.defaultProps = {\r\n importOptionsLabel: '',\r\n importOptionsDescription: '',\r\n};\r\n","import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { ThemedScheduleSettingsWithPanel, ImportSchedulingOptions } from '../index';\r\nimport { ESCImportOptions } from './esc-import-options';\r\n\r\nconst EDIT_PANEL_CONTAINER = 'history-edit-panel';\r\n\r\nexport const closeEditPanel = () =>\r\n ReactDOM.unmountComponentAtNode(document.getElementById(EDIT_PANEL_CONTAINER));\r\n\r\n// used for edit panel in import schedule grid for ESC Import\r\nexport const renderScheduleSettingsEditPanel = ({\r\n gridView,\r\n event,\r\n i18n,\r\n newI18n,\r\n edm,\r\n jsData,\r\n config,\r\n isReadOnly,\r\n timeZoneMapper,\r\n dateUtil,\r\n permissionFactory,\r\n}) => {\r\n event.stopPropagation();\r\n const deps = {\r\n i18n,\r\n newI18n,\r\n config,\r\n timeZoneMapper,\r\n dateUtil,\r\n };\r\n const importSchedulingOptions = new ImportSchedulingOptions(i18n, newI18n);\r\n const withoutScheduleOptions = ['Now', 'Once'];\r\n const currentUser = config.get('CurrentUser');\r\n const customizedImportOptions = [\r\n 'UpdateCampaignBudgets',\r\n 'UpdateStatusForCampaigns',\r\n ];\r\n const columnData = gridView.getColumnData(event);\r\n\r\n const customizedComponentConfig = {\r\n onRender: context => (\r\n {this.importOptionsDescription}
}\r\n { this.toggleOptionElements }
\r\n \r\n
\r\n );\r\n};\r\n\r\nMetaImportBanner.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n onClick: PropTypes.func.isRequired,\r\n};\r\n","/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport React from 'react';\r\nimport _ from 'underscore';\r\nimport classNames from 'classnames';\r\nimport PropTypes from 'prop-types';\r\nimport { routeStore } from '@bingads-webui-campaign/global-context-store';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { setClarityTag } from '@bingads-webui-universal/clarity';\r\nimport { Link } from '@bingads-webui-react/fabric-with-signal';\r\nimport { PrimaryButton } from '@fluentui/react';\r\nimport { download } from '@bingads-webui/download-service';\r\nimport { Alert } from '@bingads-webui-react/alert';\r\nimport { HelpLink } from '@bingads-webui-react/help-link';\r\nimport { Glyphicon } from '@bingads-webui-react/primitive';\r\nimport { notificationApi, NotificationLevel } from '@bingads-webui-react/notification-center';\r\nimport { DraftAlert } from '@bingads-webui-campaign-react/gmc-to-mmc-mapping-grid-shared';\r\nimport { CardsZone } from './cards-zone';\r\nimport { getImportSummaryStyles } from './styles';\r\nimport { ImportDetails } from './import-details/import-details';\r\nimport { CardDetailsWithPanel } from './card-details-panel';\r\nimport { ActionBar } from '../action-bar/action-bar';\r\nimport { ScheduleSettingsWithPanel, ImportSchedulingOptions } from '../schedule-setting';\r\nimport { MetaImportBanner } from './meta-import-banner/meta-import-banner';\r\nimport { getActionBarContainerStyles } from '../styles/action-bar-container-styles';\r\nimport { CARD_TITLES } from './card-constants';\r\nimport { getImportTypeString } from '../index';\r\nimport { isBAEEnabled } from '../util';\r\n\r\nconst defaultTestAppId = 50025;\r\n\r\nconst defaultAppId = 2482;\r\n\r\nconst ActionBarWithStyles = withDefaultStyles(\r\n ActionBar,\r\n getActionBarContainerStyles\r\n);\r\n\r\nclass UnstyledImportSummary extends React.PureComponent {\r\n constructor(props) {\r\n super(props);\r\n\r\n const { importSummaryResult, deps, getStateValue } = props.contextValues;\r\n const permissions = deps.config.get('permissions');\r\n const importData = getStateValue('importData') || {};\r\n this.isBAE = isBAEEnabled();\r\n\r\n this.disableSaveButton = deps.config.get('ReadOnlyMode') ||\r\n deps.config.get('CurrentAccountInActive');\r\n\r\n this.importSummaryResult = importSummaryResult;\r\n\r\n this.calculatedStats = this.importSummaryResult ?\r\n this.calculateStats(this.importSummaryResult, props.contextValues.deps.i18n) : null;\r\n this.campaignAlertMessage = this.getCampaignAlert();\r\n\r\n this.state = {\r\n isSidePanelOpen: false,\r\n isEditSchedulePanelOpen: false,\r\n isFeedbackPanelOpen: false,\r\n entityType: null,\r\n hasErrors: _.any(this.importSummaryResult, row => row.Errors > 0 || row.HasWarning),\r\n };\r\n\r\n _.extend(this.state, {\r\n hasErrorSummary: permissions && permissions.dynamic && permissions.dynamic.ImportNewErrorSummaryDownloadLink && this.state.hasErrors && importData && importData.ErrorSummaryFileIdentifier !== null,\r\n });\r\n\r\n this.importSchedulingOptions = new ImportSchedulingOptions(deps.i18n, deps.newI18n);\r\n\r\n this.logErrorDownload = ({ action, message }) => {\r\n if (this.props.activity) {\r\n this.props.activity.signal(`ErrorDownload, ExecutionId:${importData.Id}, ImportId:${importData.ImportId}, TaskId:${importData.TaskId}, Action:${action}, Mes:${message}`);\r\n }\r\n };\r\n\r\n // logs for error files\r\n if (this.state.hasErrors) {\r\n this.logErrorDownload({ action: 'has', message: 'error file' });\r\n }\r\n\r\n if (this.state.hasErrorSummary) {\r\n this.logErrorDownload({ action: 'has', message: 'error summary file' });\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n const { deps, smartImportSummaryStepPerfMarker } = this.props.contextValues;\r\n\r\n if (smartImportSummaryStepPerfMarker) {\r\n smartImportSummaryStepPerfMarker.done();\r\n }\r\n\r\n // update grid cache\r\n const { dataContextManager } = deps || {};\r\n const summaryDataContextManager = dataContextManager && dataContextManager.default;\r\n if (summaryDataContextManager) {\r\n summaryDataContextManager.successEmitter.trigger('invalidate', 'AdGroup');\r\n summaryDataContextManager.successEmitter.trigger('invalidate', 'AssetGroup');\r\n }\r\n if (this.props.activity) {\r\n this.props.activity.signal('ImportSummaryPageLoaded');\r\n\r\n // Add log to distinguish import type in report\r\n this.props.activity.signal(getImportTypeString(this.props.contextValues));\r\n }\r\n }\r\n\r\n onClickViewDetails = (entityType) => {\r\n this.setState({\r\n isSidePanelOpen: true,\r\n entityType,\r\n });\r\n };\r\n\r\n onCloseSidePanel = () => this.setState({\r\n isSidePanelOpen: false,\r\n entityType: null,\r\n });\r\n\r\n onCloseFeedbackPanel = () => this.setState({\r\n isFeedbackPanelOpen: false,\r\n });\r\n\r\n onEditScheduleClose = () => this.setState({ isEditSchedulePanelOpen: false });\r\n\r\n getImportSummaryActionBarConfig = () => {\r\n const {\r\n deps,\r\n repository,\r\n hasAccountsWithNoCampaigns = false,\r\n isRunNowImport,\r\n isRunOnceImport,\r\n isRunNowWithScheduledImport,\r\n isScheduledImport,\r\n permissionFactory,\r\n } = this.props.contextValues;\r\n const { newI18n } = deps;\r\n\r\n const config = [];\r\n\r\n const { redirectToCampaignsPage, redirectToImportHistoryPage, isSignupMode } = this.props;\r\n const onViewImportedCampaignsClick = () => {\r\n if (redirectToCampaignsPage) {\r\n redirectToCampaignsPage();\r\n } else {\r\n repository.redirectToImportedCampaigns(true);\r\n }\r\n };\r\n const onViewImportScheduleClick = () => {\r\n if (redirectToImportHistoryPage) {\r\n redirectToImportHistoryPage();\r\n } else {\r\n repository.redirectToImportScheduleAndHistory();\r\n }\r\n };\r\n\r\n // todo\r\n const viewImportedCampaignsButtonConfig = {\r\n type: 'button',\r\n onClick: onViewImportedCampaignsClick,\r\n text: newI18n.getString(_TL_('View imported campaigns')),\r\n className: 'view-imported-campaigns',\r\n };\r\n\r\n const viewImportScheduleButtonConfig = {\r\n type: 'button',\r\n onClick: onViewImportScheduleClick,\r\n text: newI18n.getString(_TL_('View import schedule')),\r\n className: 'view-import-schedule',\r\n };\r\n\r\n const setScheduleAndFrequency = {\r\n type: 'button',\r\n onClick: () => this.setState({ isEditSchedulePanelOpen: true }),\r\n primary: true,\r\n text: newI18n.getString(_TL_('Set schedule')),\r\n className: 'set-schedule-freqeuency',\r\n };\r\n\r\n const feedbackPanelButtonConfig = {\r\n type: 'button-link',\r\n onClick: () => this.setState({ isFeedbackPanelOpen: true }),\r\n primary: false,\r\n text: newI18n.getString(_TL_('Provide feedback')),\r\n className: 'provide-feedback',\r\n };\r\n if (isRunNowImport) {\r\n config.push(setScheduleAndFrequency);\r\n\r\n if (\r\n (!hasAccountsWithNoCampaigns || isSignupMode) &&\r\n permissionFactory.isViewImportedCampaignsButtonEnabled() && this.calculatedStats && !this.isBAE\r\n ) {\r\n config.push(viewImportedCampaignsButtonConfig);\r\n }\r\n } else if (isRunNowWithScheduledImport) {\r\n if (\r\n (!hasAccountsWithNoCampaigns || isSignupMode) &&\r\n permissionFactory.isViewImportedCampaignsButtonEnabled() && this.calculatedStats && !this.isBAE\r\n ) {\r\n config.push(viewImportedCampaignsButtonConfig);\r\n }\r\n\r\n config.push(viewImportScheduleButtonConfig);\r\n } else if (isScheduledImport || isRunOnceImport) {\r\n config.push(viewImportScheduleButtonConfig);\r\n }\r\n\r\n if (\r\n (isRunNowWithScheduledImport || isRunNowImport) &&\r\n permissionFactory.isProvideFeedbackButtonEnabled()\r\n ) {\r\n config.push(feedbackPanelButtonConfig);\r\n }\r\n\r\n return config;\r\n };\r\n\r\n getCardDetailsPanelTitle = () => {\r\n const { entityType } = this.state;\r\n const { cardPanelTitles } = this.props;\r\n if (cardPanelTitles && cardPanelTitles[entityType] != null) {\r\n return cardPanelTitles[entityType];\r\n }\r\n return CARD_TITLES[entityType];\r\n };\r\n\r\n getCampaignAlert = () => {\r\n const { IsSmartImport } = this.props.contextValues;\r\n let campaigns = [];\r\n // Show information message for pinterest import as MT doesn't support all targeting for now.\r\n if (this.props.importName === 'pinterestImportSummaryStep') {\r\n const { pinterestCampaigns, CampaignIds } = this.props.contextValues;\r\n campaigns = (IsSmartImport || _.size(CampaignIds) === 0) ? pinterestCampaigns :\r\n _.filter(pinterestCampaigns, campaign => _.includes(CampaignIds, campaign.Id));\r\n\r\n return _.isEmpty(campaigns) ? null : _TL_('Your import includes Pinterest Audience campaigns. We recommend reviewing these campaigns as they may contain targeting settings that could not be imported.');\r\n }\r\n\r\n if (this.props.importName !== 'googleImportSummaryStep') {\r\n return null;\r\n }\r\n const {\r\n deps, repository, googleCampaigns, campaignIds,\r\n } = this.props.contextValues;\r\n\r\n const isAIMImportEnabled = deps.config.get('permissions').IsAIMCampaignEnabled;\r\n\r\n if (!isAIMImportEnabled) {\r\n return null;\r\n }\r\n\r\n campaigns = (IsSmartImport || _.size(campaignIds) === 0) ?\r\n googleCampaigns : _.filter(googleCampaigns, campaign => _.includes(campaignIds, campaign.Id));\r\n\r\n return repository.containDisplayType(campaigns) ? _TL_('Your import includes Google Display Campaigns. We recommend reviewing these campaigns as they may contain targeting settings that could not be imported.') : null;\r\n };\r\n\r\n getEntityStatistic = (key) => {\r\n setClarityTag({ GoogleVideoImportSummaryPage: 'true' });\r\n if (this.props.activity) {\r\n this.props.activity.signal('GoogleImportVideoLoaded');\r\n }\r\n\r\n if (this.entityStatisticsObject) {\r\n return this.entityStatisticsObject[key];\r\n }\r\n\r\n const { getStateValue } = this.props.contextValues;\r\n\r\n const importData = getStateValue('importData') || {};\r\n const entityStatistics = importData.EntityStatistics;\r\n\r\n if (entityStatistics && entityStatistics.Keys && entityStatistics.Values) {\r\n const entities = _.object(_.zip(entityStatistics.Keys, entityStatistics.Values));\r\n this.entityStatisticsObject = entities;\r\n\r\n if (this.props.activity && _.get(this.entityStatisticsObject[key], 'HasWarning')) {\r\n this.props.activity.signal('GoogleImportDisapprovedVideoLoaded');\r\n }\r\n\r\n return this.entityStatisticsObject[key];\r\n }\r\n\r\n return {};\r\n };\r\n\r\n exportErrors = () => {\r\n const { repository, getStateValue, deps } = this.props.contextValues;\r\n const importData = getStateValue('importData');\r\n\r\n this.logErrorDownload({ action: 'click', message: 'error file download link' });\r\n\r\n repository.exportErrorFile(importData.ImportId)\r\n .then((data) => {\r\n if (data) {\r\n download(data);\r\n }\r\n })\r\n .catch((err) => {\r\n repository.logException(err);\r\n notificationApi.add({\r\n severity: NotificationLevel.Error,\r\n title: '',\r\n message: deps.newI18n.getString(_TL_('Something went wrong. Please try again later')),\r\n target: 'FloatingBanner',\r\n });\r\n });\r\n };\r\n\r\n exportErrorSummary = () => {\r\n const { repository, getStateValue, deps } = this.props.contextValues;\r\n const importData = getStateValue('importData');\r\n\r\n this.logErrorDownload({ action: 'click', message: 'error summary file download link' });\r\n\r\n repository.exportErrorSummaryFile(importData.ErrorSummaryFileIdentifier)\r\n .then((data) => {\r\n if (data) {\r\n download(data);\r\n }\r\n })\r\n .catch((err) => {\r\n repository.logException(err);\r\n notificationApi.add({\r\n severity: NotificationLevel.Error,\r\n title: '',\r\n message: deps.newI18n.getString(_TL_('Something went wrong. Please try again later')),\r\n target: 'FloatingBanner',\r\n });\r\n });\r\n };\r\n\r\n saveScheduleInfo = ({ tasks, displaystring }) => {\r\n this.props.onSaveScheduleInfo({\r\n tasks,\r\n contextValues: this.props.contextValues,\r\n displaystring,\r\n onEditScheduleClose: this.onEditScheduleClose,\r\n });\r\n };\r\n\r\n calculateStats = (importSummaryResult, i18n) => {\r\n const statsAggregated = {\r\n Additions: 0,\r\n Deletions: 0,\r\n Changes: 0,\r\n Errors: 0,\r\n };\r\n\r\n const induvidualEntityStats = {\r\n Additions: [],\r\n Deletions: [],\r\n Changes: [],\r\n Errors: [],\r\n };\r\n\r\n _.each(importSummaryResult, (row) => {\r\n statsAggregated.Additions += row.Additions;\r\n statsAggregated.Deletions += row.Deletions;\r\n statsAggregated.Changes += row.Changes;\r\n statsAggregated.Errors += row.Errors;\r\n\r\n const entityKey = row.UINameKey ? row.UINameKey : 'CampaignImport_ImportSummaryTargets'; // since targets doesn't have UI Key.\r\n if (row.Additions !== 0) {\r\n induvidualEntityStats.Additions.push({\r\n entityType: i18n.getString(entityKey),\r\n value: row.Additions,\r\n });\r\n }\r\n\r\n if (row.Deletions !== 0) {\r\n induvidualEntityStats.Deletions.push({\r\n entityType: i18n.getString(entityKey),\r\n value: row.Deletions,\r\n });\r\n }\r\n\r\n if (row.Changes !== 0) {\r\n induvidualEntityStats.Changes.push({\r\n entityType: i18n.getString(entityKey),\r\n value: row.Changes,\r\n });\r\n }\r\n\r\n if (row.Errors !== 0) {\r\n induvidualEntityStats.Errors.push({\r\n entityType: i18n.getString(entityKey),\r\n value: row.Errors,\r\n });\r\n }\r\n });\r\n\r\n return {\r\n statsAggregated,\r\n induvidualEntityStats,\r\n };\r\n };\r\n\r\n handleVideoads = () => {\r\n const disapproveStr = 'filterAlias=filterGoogleImportedVideoNeedRepair';\r\n const { history } = routeStore.state;\r\n\r\n const search = history.location.search ? `${history.location.search}&${disapproveStr}` : `?${disapproveStr}`;\r\n history.push({\r\n pathname: '/campaign/vnext/ads',\r\n search,\r\n });\r\n };\r\n\r\n render() {\r\n const {\r\n classes,\r\n contextValues,\r\n getImportDetailsView,\r\n uniqueImportId,\r\n errorMessage,\r\n learnMoreText,\r\n noCampaignAlert,\r\n learnMoreId,\r\n activity,\r\n } = this.props;\r\n const {\r\n isRunNowImport,\r\n isScheduledImport,\r\n isRunNowWithScheduledImport,\r\n hasAccountsWithNoCampaigns,\r\n hasDraftStore = false,\r\n newUETCreated = false,\r\n permissionFactory,\r\n selectedAccounts,\r\n repository,\r\n } = contextValues;\r\n\r\n const {\r\n newI18n,\r\n i18n,\r\n serverContext,\r\n scope,\r\n onDraftStoreLinkClick,\r\n } = contextValues.deps;\r\n\r\n const {\r\n IsProdEnv,\r\n Omniture,\r\n CurrentUser,\r\n } = serverContext;\r\n\r\n const withoutScheduleOptions = ['Now', ...permissionFactory && permissionFactory.disabledScheduleOptions ?\r\n permissionFactory.disabledScheduleOptions : []];\r\n\r\n const successMessage = newI18n.getString(_TL_(\"Congratulations! Your import was a success. You can now review a summary of this import, schedule another one, or view other campaigns you've recently imported.\"));\r\n const successScheduleMessage = newI18n.getString(_TL_('Congratulations! We\\'ve scheduled your import, and below is a summary.'));\r\n const successMessageWithoutRunnowResult = newI18n.getString(_TL_('We connected to your Google Ads account ({{googleadsaccount}}). Your import is currently running and may take up to 5 minutes to complete. Future imports will run per your selected schedule. See the import summary below.'), { googleadsaccount: selectedAccounts[0].AccountName || selectedAccounts[0].CustomerId });\r\n // eslint-disable-next-line no-nested-ternary\r\n const message = isScheduledImport ? successScheduleMessage : (this.calculatedStats ? successMessage : successMessageWithoutRunnowResult);\r\n const FeedbackPanelComponent = React.lazy(() => import(/* webpackMode: 'eager' */ '@bingads-webui-react/feedback-panel').then(({ FeedbackPanel }) => ({\r\n default: () => (\r\n \r\n 
\r\n
\r\n \r\n
\r\n {i18n.getString(_TL_('Did you know you can boost more campaigns with Meta Import?'))}
\r\n {i18n.getString(_TL_('Unlock new levels of engagement and reach your audience.'))}
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nUnstyledImportSummary.propTypes = {\r\n contextValues: PropTypes.shape({\r\n repository: PropTypes.shape({\r\n exportErrorFile: PropTypes.func.isRequired,\r\n exportErrorSummaryFile: PropTypes.func.isRequired,\r\n logException: PropTypes.func.isRequired,\r\n redirectToMetaImport: PropTypes.func,\r\n }).isRequired,\r\n patchState: PropTypes.func.isRequired,\r\n getStateValue: PropTypes.func,\r\n hasAccountsWithNoCampaigns: PropTypes.bool,\r\n deps: PropTypes.shape({\r\n i18n: PropTypes.shape({}).isRequired,\r\n newI18n: PropTypes.shape({}).isRequired,\r\n }),\r\n googleCampaigns: PropTypes.arrayOf({}),\r\n pinterestCampaigns: PropTypes.arrayOf({}),\r\n permissionFactory: PropTypes.shape({}),\r\n IsSmartImport: PropTypes.bool,\r\n smartImportSummaryStepPerfMarker: PropTypes.shape({}),\r\n importOptions: PropTypes.shape({}),\r\n IsAutoFrequency: PropTypes.bool,\r\n TimeZoneId: PropTypes.string,\r\n campaignIds: PropTypes.arrayOf({}),\r\n CampaignIds: PropTypes.arrayOf(PropTypes.string),\r\n googleEntitiesSelectionData: PropTypes.shape({}),\r\n Name: PropTypes.string,\r\n isNameEdit: PropTypes.bool,\r\n hasDraftStore: PropTypes.bool,\r\n isRunNowImport: PropTypes.bool,\r\n isRunOnceImport: PropTypes.bool,\r\n isRunNowWithScheduledImport: PropTypes.bool,\r\n isScheduledImport: PropTypes.bool,\r\n }).isRequired,\r\n activity: PropTypes.shape({\r\n signal: PropTypes.func,\r\n }),\r\n uniqueImportId: PropTypes.string.isRequired,\r\n classes: PropTypes.shape({}).isRequired,\r\n getImportDetailsView: PropTypes.func.isRequired,\r\n importName: PropTypes.string.isRequired,\r\n redirectToCampaignsPage: PropTypes.func,\r\n redirectToImportHistoryPage: PropTypes.func,\r\n onImportSummaryPageHelpLinkClicked: PropTypes.func,\r\n onSaveScheduleInfo: PropTypes.func.isRequired,\r\n isSignupMode: PropTypes.bool,\r\n errorMessage: PropTypes.string,\r\n learnMoreText: PropTypes.string,\r\n noCampaignAlert: PropTypes.string,\r\n learnMoreId: PropTypes.string,\r\n cardPanelTitles: PropTypes.shape({\r\n Additions: PropTypes.string,\r\n Changes: PropTypes.string,\r\n Deletions: PropTypes.string,\r\n Errors: PropTypes.string,\r\n }),\r\n onSetupUETtagLinkClick: PropTypes.func,\r\n getImportSummaryDisclaimerText: PropTypes.func,\r\n};\r\n\r\nUnstyledImportSummary.defaultProps = {\r\n redirectToCampaignsPage: null,\r\n redirectToImportHistoryPage: null,\r\n isSignupMode: false,\r\n errorMessage: _TL_('Note: Some of your data might have been skipped or modified during import because of differences between Microsoft Advertising and Google Ads.'),\r\n learnMoreText: _TL_('Learn more about importing campaigns from Google Ads.'),\r\n noCampaignAlert: _TL_('We were unable to import any campaigns from this account. Please note that the import of Smart campaigns is not yet supported. Going forward, we\\'ll keep your Google Ads account in sync with this Microsoft Advertising account.'),\r\n learnMoreId: 'help:ext50851',\r\n cardPanelTitles: {},\r\n onImportSummaryPageHelpLinkClicked: null,\r\n onSetupUETtagLinkClick: null,\r\n getImportSummaryDisclaimerText: null,\r\n activity: null,\r\n};\r\n\r\nexport const ImportSummary = withDefaultStyles(UnstyledImportSummary, getImportSummaryStyles);\r\n","export const getImportSummaryStyles = (__, { palette = {} }) => ({\r\n importSummaryRoot: {\r\n paddingLeft: '32px',\r\n paddingRight: '32px',\r\n },\r\n importSummaryResult: {\r\n paddingBottom: '20px',\r\n },\r\n successIcon: {\r\n color: palette.green,\r\n },\r\n errorIcon: {\r\n color: palette.themePrimary,\r\n },\r\n importSummaryStats: {\r\n borderBottom: `1px solid ${palette.neutralQuaternaryAlt}`,\r\n paddingBottom: 10,\r\n },\r\n importSummartErrorLink: {\r\n paddingTop: '24px',\r\n paddingBottom: '24px',\r\n },\r\n importDetailLabel: {\r\n marginBottom: '5px',\r\n fontWeight: '600',\r\n },\r\n importDetailValue: {\r\n marginBottom: '20px',\r\n },\r\n importSummaryDetails: {\r\n marginTop: '10px',\r\n paddingTop: '5px',\r\n },\r\n importSummaryActionBar: {\r\n width: '100%',\r\n paddingRight: '60px',\r\n },\r\n importSummaryActionBarText: {\r\n borderTop: `1px solid ${palette.neutralQuaternaryAlt}`,\r\n paddingTop: '15px',\r\n paddingBottom: '15px',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n gap: '15px',\r\n },\r\n cardsZone: {\r\n paddingBottom: '22px',\r\n },\r\n importSummaryErrorLink: {\r\n marginBottom: 14,\r\n\r\n '& .separator-line': {\r\n margin: '0 10px',\r\n color: `${palette.neutralQuaternaryAlt}`,\r\n },\r\n\r\n '& .draft-store-alert': {\r\n marginTop: '10px',\r\n },\r\n },\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\nimport GoogleIconDisabled from './btn_google_dark_disabled.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 '&[disabled]': {\r\n boxShadow: 'unset',\r\n },\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 '&[disabled]': {\r\n backgroundColor: 'unset',\r\n '&:focus-visible': {\r\n outline: 'none',\r\n },\r\n '& .google-sign-in-image img': {\r\n opacity: 0.4,\r\n },\r\n },\r\n },\r\n});\r\n\r\nfunction UnstyledGoogleLoginButton(props) {\r\n const {\r\n classes, i18n, disabled, buttonText,\r\n } = props;\r\n\r\n return (\r\n \r\n {\r\n this.state.hasErrors ||\r\n
\r\n \r\n {message}\r\n \r\n
\r\n }\r\n \r\n {\r\n this.props.getImportSummaryDisclaimerText &&\r\n this.props.getImportSummaryDisclaimerText()\r\n }\r\n
\r\n {\r\n (isRunNowImport || isRunNowWithScheduledImport) && this.calculatedStats &&\r\n \r\n
\r\n }\r\n \r\n {(this.state.hasErrors &&\r\n \r\n \r\n | \r\n \r\n )\r\n }\r\n {(\r\n hasDraftStore &&\r\n
\r\n {typeof permissionFactory.IsGoogleImportVideoAdsEnabled === 'function' &&\r\n permissionFactory.IsGoogleImportVideoAdsEnabled() &&\r\n _.get(this.getEntityStatistic('Video'), 'HasWarning') &&\r\n \r\n
\r\n \r\n
\r\n \r\n {permissionFactory.IsImportFromMetaButtonEnabled() && !this.isBAE &&\r\n { repository.redirectToMetaImport({ importsrc: 'google' }); }}\r\n />}\r\n {\r\n this.campaignAlertMessage &&\r\n \r\n { newI18n.getString(learnMoreText) } \r\n \r\n \r\n )\r\n }\r\n \r\n \r\n )\r\n }\r\n {\r\n hasAccountsWithNoCampaigns &&\r\n (\r\n \r\n { newI18n.getString(noCampaignAlert)}\r\n \r\n )\r\n }\r\n {\r\n newUETCreated &&\r\n (\r\n
\r\n\r\n \r\n \r\n { i18n.getString('Import_SetUpUETHint')} \r\n {\r\n this.props.onSetupUETtagLinkClick ?\r\n (\r\n \r\n { i18n.getString('Import_SetUpUET') } \r\n \r\n ) :\r\n (\r\n \r\n \r\n { i18n.getString('Import_SetUpUET') } \r\n \r\n \r\n )\r\n }\r\n
\r\n )\r\n }\r\n \r\n
\r\n \r\n {\r\n this.state.entityType &&
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n\r\n \r\n {buttonText || i18n.getString(_TL_('Sign in with Google'))}\r\n
\r\n \r\n \r\n \r\n {tag.text}\r\n \r\n {icon}\r\n
\r\n );\r\n};\r\n\r\nOneClickHorizontalOptionCard.propTypes = {\r\n optionId: PropTypes.string.isRequired,\r\n title: PropTypes.string.isRequired,\r\n description: PropTypes.string.isRequired,\r\n selected: PropTypes.bool.isRequired,\r\n icon: PropTypes.node.isRequired,\r\n tag: PropTypes.shape({\r\n text: PropTypes.string.isRequired,\r\n color: PropTypes.string.isRequired,\r\n backgroundColor: PropTypes.string.isRequired,\r\n border: PropTypes.string.isRequired,\r\n }).isRequired,\r\n};\r\n","import React from 'react';\r\nimport { OneClickHorizontalOptionCard } from './one-click-option-card';\r\nimport customHIcon from './custom-h.png';\r\nimport oneClickIcon from './one-click.png';\r\n\r\nexport const oneClickOptions = {\r\n oneClick: 'oneClick',\r\n custom: 'custom',\r\n};\r\n\r\nexport function isOneClickSelected(selectedOption) {\r\n return selectedOption === oneClickOptions.oneClick;\r\n}\r\n\r\nexport function getHorizontalOptions(i18n) {\r\n const horizontalOptions = [{\r\n id: oneClickOptions.oneClick,\r\n title: _TL_('Quick setup'),\r\n description: _TL_('Import your Google Ads campaigns with our recommended performance settings on a recurring basis with one click'),\r\n imageSrc: oneClickIcon,\r\n imageAlt: _TL_('one click icon'),\r\n tagText: _TL_('Recommended for most advertisers'),\r\n tagColor: '#0E700E',\r\n tagBackgroundColor: '#F1FAF1',\r\n tagBorder: '1px solid #9FD89F',\r\n },\r\n {\r\n id: oneClickOptions.custom,\r\n title: _TL_('Customize'),\r\n description: _TL_('Customize your import settings, set of campaigns to import, and import schedule'),\r\n imageSrc: customHIcon,\r\n imageAlt: _TL_('custom click icon'),\r\n tagText: _TL_('For advanced advertisers'),\r\n tagColor: '#616161',\r\n tagBackgroundColor: '#F0F0F0',\r\n tagBorder: '1px solid #E0E0E0',\r\n // styles: { field: { marginLeft: 20 } },\r\n }].map(({\r\n id, title, description, imageSrc, imageAlt, tagText, tagColor, tagBackgroundColor, tagBorder,\r\n }) => ({\r\n className: `${id}Card`,\r\n key: id,\r\n text: '',\r\n onRenderLabel: () => null,\r\n onRenderField: optionProps => (\r\n \r\n {title}\r\n
\r\n \r\n {\r\n this.props.getLoginPageDisclaimer !== null ?\r\n (\r\n \r\n { this.newI18n.getString(_TL_('what will be imported')) }.\r\n \r\n }\r\n \r\n \r\n
);\r\n\r\n return !isLoggedIn && this.IsOneClickImportEnabled ? (\r\n { this.props.getLoginPageDisclaimer() }
\r\n ) : null\r\n }\r\n \r\n {this.newI18n.getString(_TL_('Get your campaigns up and running quickly by importing them directly from Google Ads.'))} \r\n \r\n \r\n {this.newI18n.getString(_TL_('Before you start, make sure you understand')) } \r\n \r\n {\r\n this.props.onLoginPageHelpLinkClick !== null ?\r\n (\r\n \r\n { this.newI18n.getString(_TL_('what will be imported')) }.\r\n \r\n ) :\r\n \r\n
) : (\r\n \r\n
\r\n \r\n { this.newI18n.getString(_TL_('Hi {{accountName}}, what kind of import would you like to run?'), { accountName: this.deps.config.get('CurrentAccount').Name })}\r\n
\r\n {descriptions}\r\n \r\n
\r\n { (this.state.errorMsg || isInActiveAccount) &&\r\n \r\n { isInActiveAccount && { this.newI18n.getString(_TL_('Imports can only be ran from active accounts.'))}}\r\n {\r\n // eslint-disable-next-line react/no-danger\r\n \r\n }\r\n
\r\n }\r\n \r\n
\r\n \r\n {descriptions}\r\n
\r\n );\r\n }\r\n}\r\n\r\nUnstyledLoginContainer.defaultProps = {\r\n activity: null,\r\n context: PropTypes.shape({\r\n loginErrorMessage: null,\r\n }),\r\n onSignInToGoogle: null,\r\n onGoogleAuthSuccess: null,\r\n onContinue: null,\r\n onLoginPageHelpLinkClick: null,\r\n getLoginPageDisclaimer: null,\r\n};\r\n\r\nUnstyledLoginContainer.propTypes = {\r\n context: PropTypes.shape({\r\n loginRepository: PropTypes.shape({}).isRequired,\r\n deps: PropTypes.shape({\r\n logTrace: PropTypes.func,\r\n newI18n: PropTypes.shape({}),\r\n }).isRequired,\r\n loginErrorMessage: PropTypes.string,\r\n repository: PropTypes.shape({}).isRequired,\r\n permissionFactory: PropTypes.shape({\r\n IsOneClickImportEnabled: PropTypes.func,\r\n }),\r\n patchState: PropTypes.func.isRequired,\r\n goToNextStep: PropTypes.func.isRequired,\r\n handleGenericError: PropTypes.func.isRequired,\r\n }),\r\n classes: PropTypes.shape().isRequired,\r\n activity: PropTypes.shape({\r\n signal: PropTypes.func,\r\n }),\r\n nextStepPath: PropTypes.string.isRequired,\r\n rootContainerClassName: PropTypes.string.isRequired,\r\n onSignInToGoogle: PropTypes.func,\r\n onGoogleAuthSuccess: PropTypes.func,\r\n onContinue: PropTypes.func,\r\n onLoginPageHelpLinkClick: PropTypes.func,\r\n getLoginPageDisclaimer: PropTypes.func,\r\n};\r\n\r\nexport const LoginContainer = withDefaultStyles(\r\n withActivityContext(UnstyledLoginContainer),\r\n getLoginContainerStyles\r\n);\r\n\r\nexport const LoginDescription = ({\r\n signOut,\r\n i18n,\r\n stepName,\r\n accountName,\r\n isLoggedIn,\r\n hideLogoutLink,\r\n}) => (\r\n \r\n { isLoggedIn\r\n ? (\r\n
\r\n \r\n \r\n
\r\n )\r\n :\r\n \r\n
\r\n \r\n { isInActiveAccount && { this.newI18n.getString(_TL_('Imports can only be ran from active accounts.'))}}\r\n {\r\n // eslint-disable-next-line react/no-danger\r\n \r\n }\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {accountName}\r\n
\r\n \r\n { isLoggedIn && !hideLogoutLink\r\n &&\r\n signOut(contextValues)}\r\n >\r\n { i18n.getString(_TL_('Sign out')) }\r\n \r\n }\r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nUnstyledLoginContainer.defaultProps = {\r\n activity: null,\r\n context: PropTypes.shape({\r\n loginErrorMessage: null,\r\n selectedAccounts: null,\r\n }),\r\n};\r\n\r\nUnstyledLoginContainer.propTypes = {\r\n context: PropTypes.shape({\r\n loginRepository: PropTypes.shape({}).isRequired,\r\n deps: PropTypes.shape({\r\n newI18n: PropTypes.shape({}),\r\n }).isRequired,\r\n permissionFactory: PropTypes.shape({}).isRequired,\r\n repository: PropTypes.shape({}).isRequired,\r\n loginErrorMessage: PropTypes.string,\r\n handleGenericError: PropTypes.func.isRequired,\r\n patchState: PropTypes.func.isRequired,\r\n selectedAccounts: PropTypes.array,\r\n isLoggedIn: PropTypes.bool.isRequired,\r\n }),\r\n classes: PropTypes.shape().isRequired,\r\n activity: PropTypes.shape({\r\n signal: PropTypes.func,\r\n }),\r\n rootContainerClassName: PropTypes.string.isRequired,\r\n logout: PropTypes.func.isRequired,\r\n continueToImportPromise: PropTypes.func.isRequired,\r\n getDescriptionBox: PropTypes.func.isRequired,\r\n};\r\n\r\nexport const LoginContainer = withDefaultStyles(\r\n withActivityContext(UnstyledLoginContainer),\r\n getLoginContainerStyles\r\n);\r\n","export const getStyles = () => ({\r\n confirmDialog: {\r\n '& .closeimage': {\r\n fontSize: '12px',\r\n },\r\n '& .confirm-dialog-header': {\r\n fontWeight: '600px',\r\n fontSize: '20px',\r\n lineHeight: '28px',\r\n },\r\n '& .content': {\r\n lineHeight: '22px',\r\n },\r\n '& .btn': {\r\n marginRight: '8px',\r\n '&[disabled]': {\r\n pointerEvents: 'none',\r\n },\r\n },\r\n '& .expert-mode-learn-more': {\r\n marginBottom: '19px',\r\n },\r\n '& .switch-account-note': {\r\n fontSize: '14px',\r\n marginBottom: '19px',\r\n paddingTop: '10px',\r\n },\r\n },\r\n});\r\n\r\nexport const modalStyle = {\r\n overlay: {\r\n zIndex: 1099,\r\n backgroundColor: 'rgba(51,51,51,0.5)',\r\n },\r\n content: {\r\n top: '50%',\r\n left: '50%',\r\n right: 'auto',\r\n bottom: 'auto',\r\n border: '1px solid #d9d9d9',\r\n borderRadius: '0px',\r\n transform: 'translate(-50%, -50%)',\r\n marginRight: '-50%',\r\n width: '663px',\r\n },\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport Modal from 'react-modal';\r\nimport classNames from 'classnames';\r\nimport { getStyles, modalStyle } from './styles';\r\n\r\nexport function UnstyledConfirmDialog(props) {\r\n const {\r\n title,\r\n onConfirm,\r\n confirmText,\r\n onCancel,\r\n cancelText,\r\n onClose,\r\n i18n,\r\n content,\r\n isOpen,\r\n classes,\r\n isConfirmButtonDisabled,\r\n } = props;\r\n\r\n return (\r\n \r\n {descriptionBox}\r\n
\r\n \r\n { isLoggedIn\r\n ? (\r\n
\r\n \r\n
\r\n )\r\n :\r\n \r\n { isInActiveAccount && {this.newI18n.getString(_TL_('Imports can only be ran from active accounts.'))} }\r\n {\r\n // eslint-disable-next-line react/no-danger\r\n \r\n }\r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n );\r\n}\r\n\r\nUnstyledConfirmDialog.propTypes = {\r\n classes: PropTypes.shape().isRequired,\r\n title: PropTypes.string,\r\n content: PropTypes.node,\r\n onConfirm: PropTypes.func.isRequired,\r\n confirmText: PropTypes.string,\r\n onCancel: PropTypes.func.isRequired,\r\n cancelText: PropTypes.string,\r\n onClose: PropTypes.func.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n isOpen: PropTypes.bool,\r\n isConfirmButtonDisabled: PropTypes.bool,\r\n};\r\n\r\nUnstyledConfirmDialog.defaultProps = {\r\n confirmText: null,\r\n cancelText: null,\r\n title: null,\r\n content: null,\r\n isOpen: false,\r\n isConfirmButtonDisabled: false,\r\n};\r\n\r\nexport const ConfirmDialog = withDefaultStyles(\r\n UnstyledConfirmDialog,\r\n getStyles\r\n);\r\n","import React from 'react';\r\nimport classNames from 'classnames';\r\nimport { ReactTemplate } from '@bingads-webui-react/react-template';\r\n\r\n// templates for popup content\r\nconst templates = {\r\n // phase 1\r\n MultipleAccountsNotSupported: _TL_('We connected to your Google account {{account}} and found it contains multiple ads accounts. We are working on providing this support and it will be available shortly. Apologize for the inconvienences and we\\'ll notify you once it is available.'),\r\n ExpertCampaignsOnlyNotSupported: _TL_('We connected to your Google account {{account}} and found out it only has expert campaign, and currently your account only support smart campaigns.'),\r\n UpgradeToExpertModeSuggestion: _TL_('If you still want to import, you can upgrade your account to Expert mode and proceed the import.{{br}}{{helpLink}}Learn more about Smart mode vs. Expert mode{{/helpLink}}'),\r\n // phase 2\r\n HasExpertCampaignsNotSupported: _TL_('We connected to your Google Ads account {{account}} and noticed you\\'re trying to import campaigns that are not supported by your Microsoft Advertising {{helpLink}}Smart mode account{{/helpLink}}.{{br}}You can either:'),\r\n SwitchAccountModeNote: _TL_('{{i}}Note:{{/i}} Once you switch from Smart mode to Expert mode, {{b}}you can\\'t switch back{{/b}}. However, you can always edit your smart campaigns from Expert Mode, just like you could with any other campaign.'),\r\n SwitchAccountModeOption: _TL_('Switch to Expert Mode, so you can import {{i}}all{{/i}} campaigns.'),\r\n OnlyImportSmartCampaignsOption: _TL_('Or, import only your smart campaigns.'),\r\n CancelImportOption: _TL_('Or, because we cannot support your Google Ads campaigns if you don\\'t switch account modes, you can cancel your import. Then, you can create new Microsoft Advertising smart campaigns from scratch, which could replicate the information from your Google Ads campaigns.'),\r\n // ESC import no smart campaigns\r\n ESCNoSmartCampaigns: _TL_('Your account {{account}} seems to only contain expert campaigns. However, you can only import smart campaigns here.'),\r\n ESCSwitchToExpertModeSuggestion: _TL_('To import your expert campaigns, {{helpLink}}switch to Expert mode{{/helpLink}}.'),\r\n\r\n // ESC import switch to single expert account\r\n ESCSwitchToSingleExpertAccount: _TL_('Your Google Ads account {{account}} doesn\\'t contain any smart campaigns.\\nYou can either:'),\r\n ESCSwitchToSingleExpertAccountOption_1: _TL_('Switch to Expert mode, so you can import all existing campaigns. {{googleImportHelpLink}}Learn more about importing your campaigns from Google Ads in Expert mode.{{/googleImportHelpLink}}'),\r\n ESCSwitchToSingleExpertAccountOption_2: _TL_('Or, cancel your import and {{smartCampaignHelpLink}}create new smart campaigns{{/smartCampaignHelpLink}}, which could replicate the information from your Google Ads campaigns.'),\r\n\r\n // ESC import switch to account summary\r\n ESCSwitchToAccountSummary: _TL_('It looks like you have several Expert accounts. Please navigate to {{b}}Account summary{{/b}} and choose which Expert account you\\'d like to import from.{{br}}{{googleImportHelpLink}}Learn more about importing your campaigns from Google Ads in Expert mode.{{/googleImportHelpLink}}'),\r\n\r\n // ESC create create expert account\r\n ESCCreateExpertAccountContent: _TL_('We didn\\'t find any Expert mode accounts for you. {{br}}Expert mode lets you take advantage of all the features Microsoft Advertising has to offer. It lets you:'),\r\n ESCCreateExpertAccountBenefitOptions: _TL_('{{li}}Add more content to your ads{{/li}}{{li}}Benefit from detailed reporting and conversion tracking{{/li}}{{li}}Utilize automated bid strategies and other tools to increase efficiency{{/li}}'),\r\n ESCCreateExpertAccountWarning: _TL_('If you create an Expert mode account, you\\'ll be able to access your Multi-platform account. However:'),\r\n ESCCreateExpertAccountWarningFirstItem: _TL_('Your Multi-platform account information (including all campaigns, coupons, data, promo codes, etc.) won\\'t {{b}}switch over to your new Expert mode account{{/b}}'),\r\n ESCCreateExpertAccountWarningItems: _TL_('{{li}}You\\'ll be given a brand new Expert mode account, which doesn\\'t support Multi-platform at this time.{{/li}}{{li}}You\\'ll need to create new campaigns in your Expert mode account; your current Multi-platform campaigns will exist only in your Multi-platform account. You can toggle between the two accounts by using the account selector in the top menu.{{/li}}'),\r\n ESCCreateExpertAccountLearnMore: _TL_('{{escAccountModeHelpLink}}Learn more about Multi-platform vs. Expert mode{{/escAccountModeHelpLink}}'),\r\n};\r\n\r\n// common model\r\nconst model = googleAccount => ({\r\n i: text => ({text}),\r\n b: text => ({text}),\r\n li: text => (\r\n \r\n
\r\n {i18n.getString(title)}
\r\n \r\n
\r\n {content}\r\n
\r\n \r\n \r\n {i18n.getString(confirmText)}\r\n \r\n \r\n {i18n.getString(cancelText)}\r\n \r\n
\r\n ),\r\n account: ({googleAccount}),\r\n helpLink: text => (),\r\n escAccountModeHelpLink: text => (),\r\n googleImportHelpLink: text => (),\r\n smartCampaignHelpLink: text => (),\r\n});\r\n\r\n// wrap template to generate contents\r\nconst templateWrapper = (template, googleAccount, i18n) => (\r\n
\r\n
\r\n
\r\n);\r\n\r\nconst getExpertAccountDialogContent = (googleAccount, i18n) => (\r\n \r\n {templateWrapper(templates.MultipleAccountsNotSupported, googleAccount, i18n)}\r\n
\r\n \r\n
\r\n {templateWrapper(templates.UpgradeToExpertModeSuggestion, googleAccount, i18n)}\r\n
\r\n \r\n
\r\n
\r\n);\r\n\r\nconst getMixedCampaignDialogContent = (googleAccount, i18n) => (\r\n \r\n {templateWrapper(templates.ExpertCampaignsOnlyNotSupported, googleAccount, i18n)}\r\n
\r\n \r\n
\r\n {templateWrapper(templates.UpgradeToExpertModeSuggestion, googleAccount, i18n)}\r\n
\r\n \r\n
\r\n
\r\n);\r\n\r\nconst getExpertCampaignsOnlySwitchToExpert = (googleAccount, i18n) => (\r\n \r\n {templateWrapper(templates.HasExpertCampaignsNotSupported, googleAccount, i18n)}\r\n
\r\n \r\n
- \r\n
- \r\n {templateWrapper(templates.SwitchAccountModeOption, googleAccount, i18n)}\r\n \r\n
- \r\n {templateWrapper(templates.OnlyImportSmartCampaignsOption, googleAccount, i18n)}\r\n \r\n
\r\n {templateWrapper(templates.SwitchAccountModeNote, googleAccount, i18n)}\r\n
\r\n \r\n
\r\n
\r\n);\r\n\r\nconst getESCNoSmartCampaignsDialogContent = (googleAccount, i18n) => (\r\n \r\n {templateWrapper(templates.HasExpertCampaignsNotSupported, googleAccount, i18n)}\r\n
\r\n \r\n
- \r\n
- \r\n {templateWrapper(templates.SwitchAccountModeOption, googleAccount, i18n)}\r\n \r\n
- \r\n {templateWrapper(templates.CancelImportOption, googleAccount, i18n)}\r\n \r\n
\r\n {templateWrapper(templates.SwitchAccountModeNote, googleAccount, i18n)}\r\n
\r\n \r\n
\r\n
\r\n);\r\n\r\nconst getESCSwitchToSingleExpertAccountDialogContent = (googleAccount, i18n) => (\r\n \r\n {templateWrapper(templates.ESCNoSmartCampaigns, googleAccount, i18n)}\r\n
\r\n \r\n
\r\n {templateWrapper(templates.ESCSwitchToExpertModeSuggestion, googleAccount, i18n)}\r\n
\r\n \r\n
\r\n
\r\n
\r\n);\r\n\r\nconst getESCSwitchToAccountSummaryDialogContent = (googleAccount, i18n) => (\r\n \r\n {templateWrapper(templates.ESCSwitchToSingleExpertAccount, googleAccount, i18n)}\r\n
\r\n \r\n
- \r\n
- \r\n {templateWrapper(templates.ESCSwitchToSingleExpertAccountOption_1, googleAccount, i18n)}\r\n \r\n
- \r\n {templateWrapper(templates.ESCSwitchToSingleExpertAccountOption_2, googleAccount, i18n)}\r\n \r\n
\r\n
\r\n
\r\n
\r\n);\r\n\r\nconst getESCCreateExpertAccountDialogContent = (googleAccount, i18n) => (\r\n \r\n {templateWrapper(templates.ESCSwitchToAccountSummary, googleAccount, i18n)}\r\n
\r\n \r\n
\r\n
\r\n
\r\n);\r\n\r\nconst getDialogTitle = (type) => {\r\n if (type === 'MultiAccount') {\r\n return _TL_(\"Sorry, we don't support multiple accounts right now\");\r\n } else if (type === 'ExpertCampaignsOnly' || type === 'ExpertCampaignsOnlySwitchToExpert' || type === 'MixedCampaignSwitchToExpert') {\r\n return _TL_('Sorry, but we ran into an issue');\r\n } else if (type === 'ESCNoSmartCampaigns') {\r\n return _TL_(\"We didn't find any smart campaigns in your Google Ads account\");\r\n } else if (type === 'ESCSwitchToSingleExpertAccount') {\r\n return _TL_('We didn\\'t find any smart campaigns to import in your Google Ads account');\r\n } else if (type === 'ESCSwitchToAccountSummary') {\r\n return _TL_('Please choose an Expert account');\r\n } else if (type === 'ESCCreateExpertAccount') {\r\n return _TL_('Do you want to create an Expert mode account?');\r\n }\r\n return '';\r\n};\r\n\r\nconst getDialogContent = (type, googleAccount, i18n) => {\r\n if (type === 'MultiAccount') {\r\n return getMultiAccountDialogContent(googleAccount, i18n);\r\n } else if (type === 'ExpertCampaignsOnly') {\r\n return getExpertAccountDialogContent(googleAccount, i18n);\r\n } else if (type === 'MixedCampaignSwitchToExpert') {\r\n return getMixedCampaignDialogContent(googleAccount, i18n);\r\n } else if (type === 'ExpertCampaignsOnlySwitchToExpert') {\r\n return getExpertCampaignsOnlySwitchToExpert(googleAccount, i18n);\r\n } else if (type === 'ESCNoSmartCampaigns') {\r\n return getESCNoSmartCampaignsDialogContent(googleAccount, i18n);\r\n } else if (type === 'ESCSwitchToSingleExpertAccount') {\r\n return getESCSwitchToSingleExpertAccountDialogContent(googleAccount, i18n);\r\n } else if (type === 'ESCSwitchToAccountSummary') {\r\n return getESCSwitchToAccountSummaryDialogContent(googleAccount, i18n);\r\n } else if (type === 'ESCCreateExpertAccount') {\r\n return getESCCreateExpertAccountDialogContent(googleAccount, i18n);\r\n }\r\n return '';\r\n};\r\n\r\nconst getDialogConfirmText = (type) => {\r\n if (type === 'MixedCampaignSwitchToExpert'\r\n || type === 'ExpertCampaignsOnlySwitchToExpert') {\r\n return _TL_('Switch to Expert Mode');\r\n } else if (type === 'ESCSwitchToAccountSummary') {\r\n return _TL_('Go to Account summary');\r\n } else if (type === 'ESCSwitchToSingleExpertAccount') {\r\n return _TL_('Switch to Expert mode');\r\n } else if (type === 'ESCCreateExpertAccount') {\r\n return _TL_('Stay in Multi-platform');\r\n }\r\n return _TL_('Try with another account');\r\n};\r\n\r\nconst getDialogCancelText = (type) => {\r\n if (type === 'MixedCampaignSwitchToExpert') {\r\n return _TL_('Only import smart campaigns');\r\n } else if (type === 'ESCCreateExpertAccount') {\r\n return _TL_('Create an Expert mode account');\r\n }\r\n return _TL_('Cancel import');\r\n};\r\n\r\nexport {\r\n getDialogTitle,\r\n getDialogContent,\r\n getDialogConfirmText,\r\n getDialogCancelText\r\n};\r\n","/* eslint-disable max-len */\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport Promise from 'bluebird';\r\nimport { HelpLink } from '@bingads-webui-react/help-link';\r\nimport { Activity, withActivityContext } from '@bingads-webui-react/hoc-with-signal';\r\nimport { QueryParam } from '@bingads-webui-react/scope-service';\r\nimport { isAccountStatusValidToSwitch, hasEditPermissions } from '@bingads-webui-react/smart-switch-to-expert';\r\nimport { getLocalizedCampaignTypeStringUtil } from '@bingads-webui-campaign/import-shared-repositories';\r\n\r\nimport {\r\n startRunnowImportTask,\r\n getDefaultImportName,\r\n getGoogleLoginErrorMessage,\r\n} from '../../index';\r\n\r\nimport { convertSmartToExpertMode } from '../../util/convert-smart-to-expert-mode';\r\nimport { fetchInitData, getParams } from '../../util';\r\nimport { StepContainer } from '../../step-container/step-container';\r\nimport { ImportCoreContext } from '../../base-import-context';\r\n\r\nimport { LoginContainer } from '../../login-container/smart-campaign-google-login-container';\r\nimport { ConfirmDialog,\r\n getDialogTitle,\r\n getDialogContent,\r\n getDialogConfirmText,\r\n getDialogCancelText } from '../../confirm-dialog/index';\r\n\r\nclass SmartCampaignGoogleLoginStepInternal extends React.PureComponent {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = this.initState();\r\n\r\n // data needed when creating import task\r\n this.importTaskData = {\r\n deps: this.deps,\r\n patchState: this.patchState,\r\n activity: this.props.activity,\r\n setImportStatus: this.props.setImportStatus,\r\n rootContainerClassName: this.props.rootContainerClassName,\r\n showErrorMessage: this.props.contextValues.showErrorMessage,\r\n getNextStepName: () => this.props.nextStepPath,\r\n IsSmartCampaignOnly: true,\r\n };\r\n }\r\n\r\n onConfirm = () => {\r\n if (this.state.dialogType === 'MixedCampaignSwitchToExpert' || this.state.dialogType === 'ExpertCampaignsOnlySwitchToExpert') {\r\n // if user clicks switch to expert button\r\n this.logSignal('SwitchToExpert');\r\n\r\n const { cid, aid, uid } = this.scope;\r\n const { ClientCenterBaseUrl } = this.deps.serverContext.Urls;\r\n\r\n convertSmartToExpertMode({\r\n ccuiEndpoint: ClientCenterBaseUrl,\r\n customerId: cid,\r\n accountId: aid,\r\n userId: uid,\r\n }).then(() => {\r\n this.logSignal('SwitchToExpertSuccess');\r\n\r\n // send API call and pass didSwitchToExpertFromImport param to server side\r\n // server side will clean account cache and reset\r\n const paramData = getParams(this.deps.serverContext);\r\n paramData.didSwitchToExpertFromImport = true;\r\n return fetchInitData(this.deps.serverContext.ServicesEndpoints.CampaignUIAPI, paramData);\r\n }).then(() => {\r\n // add didSwitchToExpertFromImport flag and refresh page to get the updated account mode\r\n window.location.href = `${window.location.href}&didSwitchToExpertFromImport=true`;\r\n }).catch((error) => {\r\n this.logSignal(`[Error] Switch to expert error: ${JSON.stringify(error)}`);\r\n this.handleGenericError(error);\r\n });\r\n } else {\r\n // if user clicks try with another account button\r\n this.logSignal('TryWithAnotherAccount');\r\n }\r\n\r\n // close popup and reset state\r\n this.resetState();\r\n };\r\n\r\n onCancel = () => {\r\n if (this.state.dialogType === 'MixedCampaignSwitchToExpert') {\r\n // if user clicks only import smart campaigns button\r\n this.logSignal('OnlyImportSmartCampaigns');\r\n this.resetState();\r\n\r\n // create schedule runnow task\r\n this.createRunNowImportTask(_.extend({}, this.importTaskData, { contextValues: this.props.contextValues }));\r\n } else {\r\n // if user clicks cancel import button\r\n this.logSignal('CancelImport');\r\n this.cancelImport();\r\n }\r\n };\r\n\r\n onClose = () => {\r\n // if user clicks popup close button\r\n this.logSignal('ClosePopup');\r\n this.cancelImport();\r\n };\r\n\r\n get handleGenericError() { return this.props.contextValues.handleGenericError; }\r\n get repository() { return this.props.contextValues.repository; }\r\n get patchState() { return this.props.contextValues.patchState; }\r\n get scope() { return this.props.contextValues.deps.scope.values; }\r\n get deps() { return this.props.contextValues.deps; }\r\n get newI18n() { return this.props.contextValues.deps.newI18n; }\r\n get permissionFactory() { return this.props.contextValues.permissionFactory; }\r\n\r\n getGoogleAccountName = () => this.repository.getGoogleAccountName();\r\n\r\n setInvalidType = (showDialog, unsupportedGoogleAccount, type, hasAccountUpdatePermission = true) => {\r\n this.setState({\r\n showDialog, unsupportedGoogleAccount, dialogType: type, hasAccountUpdatePermission,\r\n });\r\n\r\n // log out for multiple accounts scenario or expert campaigns only phase1 scenario\r\n if (type === 'MultiAccount' || type === 'ExpertCampaignsOnly') {\r\n this.logout();\r\n }\r\n };\r\n\r\n initState() {\r\n return {\r\n showDialog: false,\r\n unsupportedGoogleAccount: null,\r\n dialogType: '',\r\n };\r\n }\r\n\r\n resetState() {\r\n this.setState(this.initState());\r\n }\r\n\r\n hasAccountUpdatePermission() {\r\n // this logic is same as smart campaigns side for switch to expert mode button in global menu\r\n return hasEditPermissions(this.permissionFactory.permissions) && isAccountStatusValidToSwitch(this.deps.config.get('CurrentAccount'));\r\n }\r\n\r\n // TODO: clean SmartCampaignsImportPhase2 pilot\r\n // get accounts and get campaigns and start import\r\n continueToSmartCampaignsImportPromise = ({ sessionId, handleError }) => this.repository.getGoogleAccounts(sessionId)\r\n .then((googleAccounts) => {\r\n if (googleAccounts.length === 1) {\r\n this.patchState({ selectedAccounts: googleAccounts });\r\n this.logSignal('SingleAccount');\r\n\r\n // get campaigns if only 1 account\r\n return this.repository.getGoogleCampaigns(googleAccounts[0].CustomerId);\r\n } else if (!googleAccounts.length) {\r\n // show error message if no accounts\r\n handleError(getGoogleLoginErrorMessage({\r\n code: 'ImportSyncNoAdsAccounts',\r\n i18n: this.newI18n,\r\n email: this.getGoogleAccountName(),\r\n }));\r\n this.logSignal('NoGoogleAccount');\r\n return Promise.reject();\r\n }\r\n\r\n // show unsupported popup if multiple accounts\r\n this.setInvalidType(true, this.getGoogleAccountName(), 'MultiAccount');\r\n this.logSignal('MultipleGoogleAccounts');\r\n return Promise.reject();\r\n })\r\n .then((googleCampaigns) => {\r\n // judge if there is no campaigns or any smart campaigns or any expert campaigns\r\n const hasAccountsWithNoCampaigns = googleCampaigns.length === 0;\r\n const hasSmartCampaign = _.any(googleCampaigns, campaign =>\r\n campaign.Type === getLocalizedCampaignTypeStringUtil('Smart', this.deps.i18n));\r\n const hasExpertCampaign = _.any(googleCampaigns, campaign =>\r\n campaign.Type !== getLocalizedCampaignTypeStringUtil('Smart', this.deps.i18n));\r\n\r\n // No campaigns scenario\r\n if (hasAccountsWithNoCampaigns) {\r\n this.logSignal('HasAccountsWithNoCampaigns');\r\n this.patchState({ hasAccountsWithNoCampaigns });\r\n\r\n // start import for no campaigns\r\n return this.createRunNowImportTask(_.extend({}, this.importTaskData, { contextValues: this.props.contextValues }));\r\n }\r\n\r\n // Only smart campaigns scenario and mixed campaigns scenario\r\n if (hasSmartCampaign) {\r\n this.logSignal('HasSmartCampaign');\r\n\r\n if (hasExpertCampaign) {\r\n this.logSignal('MixedCampaigns');\r\n } else {\r\n this.logSignal('OnlySmartCampaigns');\r\n }\r\n\r\n // support converting to expert for mixed campaigns\r\n if (hasExpertCampaign) {\r\n // show mixed campaigns switch to expert popup\r\n this.setInvalidType(true, this.getGoogleAccountName(), 'MixedCampaignSwitchToExpert', this.hasAccountUpdatePermission());\r\n return Promise.reject();\r\n }\r\n\r\n // start import for only smart campaigns and mixed campaigns in phase 1 or for only smart campaigns in phase 2\r\n return this.createRunNowImportTask(_.extend({}, this.importTaskData, { contextValues: this.props.contextValues }));\r\n }\r\n\r\n // Only expert campaigns scenario\r\n if (hasExpertCampaign) {\r\n this.logSignal('NoSmartCampaigns');\r\n\r\n // show expert campaigns only switch to expert popup\r\n this.setInvalidType(true, this.getGoogleAccountName(), 'ExpertCampaignsOnlySwitchToExpert', this.hasAccountUpdatePermission());\r\n return Promise.reject();\r\n }\r\n return Promise.reject();\r\n });\r\n\r\n createRunNowImportTask({\r\n deps,\r\n patchState,\r\n activity,\r\n contextValues,\r\n setImportStatus,\r\n rootContainerClassName,\r\n showErrorMessage,\r\n getNextStepName,\r\n }) {\r\n const importName = getDefaultImportName('Now', deps);\r\n\r\n // will patch more state for import summary step\r\n patchState({\r\n IsSmartImport: true,\r\n isRunNowImport: true,\r\n IsSmartCampaignOnly: true,\r\n Name: importName,\r\n });\r\n\r\n if (activity) {\r\n activity.signal('CreateRunNowImportTask');\r\n }\r\n\r\n // create runnow import task\r\n return startRunnowImportTask({\r\n contextValues,\r\n setImportStatus,\r\n activity,\r\n rootContainerClassName,\r\n accountTimeZone: deps.config.get('AccountTimeZone'),\r\n importName,\r\n showErrorMessage,\r\n getNextStepName,\r\n IsSmartCampaignOnly: true,\r\n });\r\n }\r\n\r\n logout = () => {\r\n this.repository.logout();\r\n this.patchState({\r\n isLoggedIn: false,\r\n selectedAccounts: [],\r\n });\r\n };\r\n\r\n cancelImport = () => {\r\n const { cid, aid, uid } = this.scope;\r\n\r\n // log out when clicking cancel import button or close button for expert campaigns only phase2 scenario\r\n if (this.state.dialogType === 'ExpertCampaignsOnlySwitchToExpert') {\r\n this.logout();\r\n }\r\n\r\n this.resetState();\r\n window.location.href = `/campaign/smart?cid=${cid}&aid=${aid}&uid=${uid}`;\r\n };\r\n\r\n logSignal(msg) {\r\n if (this.props.activity) {\r\n this.props.activity.signal(msg);\r\n }\r\n }\r\n\r\n render() {\r\n const { stepTitle, contextValues } = this.props;\r\n\r\n const getDescriptionBox = ({\r\n classes, microsoftAccountName, isLoggedIn, googleAccountName,\r\n }) => (\r\n \r\n {templateWrapper(templates.ESCCreateExpertAccountContent, googleAccount, i18n)}\r\n
\r\n - \r\n {templateWrapper(templates.ESCCreateExpertAccountBenefitOptions, googleAccount, i18n)}\r\n
\r\n {templateWrapper(templates.ESCCreateExpertAccountWarning, googleAccount, i18n)}\r\n
\r\n - \r\n
- \r\n {templateWrapper(templates.ESCCreateExpertAccountWarningFirstItem, googleAccount, i18n)}\r\n \r\n {templateWrapper(templates.ESCCreateExpertAccountWarningItems, googleAccount, i18n)}\r\n
\r\n {templateWrapper(templates.ESCCreateExpertAccountLearnMore, googleAccount, i18n)}\r\n
\r\n \r\n
\r\n
\r\n );\r\n\r\n return (\r\n \r\n {this.newI18n.getString(_TL_('Get your campaigns up and running quickly by importing them directly from Google Ads into the following Microsoft Advertising account:'))} \r\n {microsoftAccountName}\r\n
\r\n \r\n {this.newI18n.getString(_TL_('Before you start, make sure you understand'))} \r\n \r\n \r\n { this.newI18n.getString(_TL_('what will be imported.')) }\r\n \r\n \r\n {this.newI18n.getString(_TL_('Let\\'s begin by signing into Google.'))}\r\n
\r\n \r\n {this.newI18n.getString(_TL_('Start importing in one step'))}\r\n
\r\n \r\n {this.newI18n.getString(_TL_('To import your Google Ads campaign to Microsoft Advertising, all you need to do is to login to your Google account so we can connect to it and we will start the import for you automatically.'))}\r\n
\r\n {isLoggedIn ? (\r\n \r\n {this.newI18n.getString(_TL_('You are signed in to this Google account:'))} \r\n {googleAccountName}\r\n
\r\n ) : null}\r\n \r\n
\r\n );\r\n\r\n return (\r\n \r\n {this.newI18n.getString(_TL_('Get your smart campaigns up and running quickly by importing them directly from Google Ads. Before you start, make sure you understand '))}\r\n \r\n \r\n { this.newI18n.getString(_TL_('what will get imported.')) }\r\n \r\n \r\n
\r\n \r\n {this.newI18n.getString(_TL_('Please note that this campaign import wizard is only for smart campaigns. If you want to import expert campaigns, switch to Expert mode.'))}\r\n
\r\n \r\n \r\n { this.newI18n.getString(_TL_('Learn about the differences between Expert mode and Smart mode.')) }\r\n \r\n
\r\n {isLoggedIn ? (\r\n \r\n {this.newI18n.getString(_TL_('You are signed in to this Google account:'))} \r\n {googleAccountName}\r\n
\r\n ) : null}\r\n \r\n \r\n }\r\n {this.isImportSmartScheduleStepImprovementEnabled &&\r\n \r\n \r\n \r\n \r\n \r\n {this.newI18n.getString(_TL_('Advanced settings'))}\r\n \r\n \r\n \r\n }\r\n {brandName === this.newI18n.getString(_TL_('Google')) &&\r\n \r\n }\r\n
\r\n );\r\n }\r\n}\r\n\r\nUnstyledSmartImportContainer.propTypes = {\r\n context: PropTypes.shape({\r\n deps: PropTypes.shape({\r\n newI18n: PropTypes.shape({}),\r\n i18n: PropTypes.shape({}),\r\n config: PropTypes.shape({\r\n get: PropTypes.func,\r\n }),\r\n }),\r\n goToNextStep: PropTypes.func.isRequired,\r\n toggleImportType: PropTypes.func.isRequired,\r\n patchState: PropTypes.func.isRequired,\r\n isNameEdit: PropTypes.bool,\r\n hasAccountsWithNoCampaigns: PropTypes.bool,\r\n permissionFactory: PropTypes.shape({\r\n disabledScheduleOptions: PropTypes.arrayOf(PropTypes.string),\r\n IsImportSmartScheduleStepImprovementEnabled: PropTypes.func,\r\n IsImportSmartScheduleStepImprovementPhaseTwoEnabled: PropTypes.func,\r\n IsImportSmartScheduleStepPanelImprovementEnabled: PropTypes.func,\r\n IsImportSmartScheduleStepPanelDataRestoreImprovementEnabled: PropTypes.func,\r\n }),\r\n importOptions: PropTypes.shape({}),\r\n defaultImportOptions: PropTypes.shape({}),\r\n SmartOptionSettingsKeys: PropTypes.shape({}),\r\n lastSelectedPanelImportOptions: PropTypes.shape({}),\r\n }).isRequired,\r\n showError: PropTypes.bool.isRequired,\r\n setShowError: PropTypes.func.isRequired,\r\n classes: PropTypes.shape({\r\n advancedImportPanel: PropTypes.string,\r\n descriptionBox: PropTypes.string,\r\n googleAdvancedSettingsAlert: PropTypes.string,\r\n link: PropTypes.string,\r\n customOptionsSettings: PropTypes.string,\r\n }).isRequired,\r\n activity: PropTypes.shape({\r\n signal: PropTypes.func,\r\n }),\r\n facScheduleInvalid: PropTypes.bool,\r\n getSchedulePageDisclaimer: PropTypes.func,\r\n couponDialogMessage: PropTypes.string,\r\n getDefaultSchedule: PropTypes.func,\r\n brandName: PropTypes.string.isRequired,\r\n onSwitchCustomizeMode: PropTypes.func,\r\n};\r\n\r\nUnstyledSmartImportContainer.defaultProps = {\r\n facScheduleInvalid: false,\r\n activity: null,\r\n getSchedulePageDisclaimer: null,\r\n couponDialogMessage: 'FAC_GImport_Lightbox_MustBeRecurring',\r\n getDefaultSchedule: null,\r\n onSwitchCustomizeMode: null,\r\n};\r\n\r\nexport const SmartImportContainer = withDefaultStyles(\r\n withActivityContext(UnstyledSmartImportContainer),\r\n getSmartImportContainerStyles\r\n);\r\n","\r\nimport { first, isArray, isFunction, noop, chain, once, map } from 'underscore';\r\nimport $ from 'jquery';\r\nimport Promise from 'bluebird';\r\nimport { Constants as CCUIConstants } from '@bingads-webui-clientcenter/entity-utils';\r\nimport { generateSetMappingsRequest, setMappings } from '@bingads-webui-campaign-react/gmc-to-mmc-mapping-grid-shared';\r\nimport { withUiBlock } from '@bingads-webui/uiblocker';\r\nimport { getAutoImportTaskName } from '../../util';\r\n\r\nimport {\r\n mapCronToFrequency,\r\n ImportTypeString,\r\n} from '../../index';\r\n\r\nconst FAC_STATUS_ACTIVE = CCUIConstants.RecommendationAdoptionStatus.Active;\r\nconst FAC_STATUS_ADOPTED = CCUIConstants.RecommendationAdoptionStatus.Adopted;\r\nconst FAC_STATUS_PICKEDUP = CCUIConstants.RecommendationAdoptionStatus.PickedUp;\r\n\r\nconst StartImportErrorCodes = {\r\n DuplicateDomainNameErr: _TL_('An error occurred while saving the store mappings. Another store with the same domain name exists.'),\r\n DuplicateStoreNameErr: _TL_('An error occured while saving the store mappings. Duplicate store name'),\r\n InvalidStoreNameErr: _TL_('An error occured while saving the store mappings. Store name is invalid.'),\r\n InvalidStoreDescriptionErr: _TL_('An error occured while saving the store mappings. Store description is invalid.'),\r\n InvalidStoreDestinationUrlErr: _TL_('An error occured while saving the store mappings. Store destination URL is invalid.'),\r\n ExceededMaxStoresForCustomerErr: _TL_('An error occured while saving the store mappings. Exceeded max stores for customers.'),\r\n MarketNotSupportedErr: _TL_('An error occured while saving the store mappings. Market is not supported.'),\r\n GenericMMCError: _TL_('An error occurred while saving the store mappings. Any existing mappings will be used during the Import.'),\r\n GenericImportError: _TL_('Microsoft Ads has encountered an error. Please try again later or contact support.'),\r\n TaskSchedulingInvalid: _TL_('An error occured while saving the import. Time chosen to schedule the import is invalid.'),\r\n TaskThrottlingLimitReached: _TL_('We are unable to schedule this import because you have exceeded the maximum of 100 active scheduled imports. To create a new scheduled import, please pause or delete some of your active scheduled imports on the Import Schedule And History page.'),\r\n GoogleImportExceededMaxNumberOfStores: _TL_('An error occured while saving the store mappings. Exceeded max stores for customers.'),\r\n GoogleImportGMCDomainUnclaimed: _TL_('We were unable to save one or more of your store mappings as some of the domains in your Google Merchant Center stores are unclaimed.'),\r\n};\r\n\r\nexport const formatTaskData = (contextValues, taskData) => {\r\n const {\r\n selectedAccounts,\r\n } = contextValues;\r\n\r\n const scheduleStepState = {\r\n googleCustomerId: selectedAccounts[0].CustomerId,\r\n campaignIds: [],\r\n loginCustomerId: selectedAccounts[0].LoginCustomerId,\r\n };\r\n\r\n return {\r\n ...taskData,\r\n scheduleStepState,\r\n };\r\n};\r\n\r\nconst setMappingsAndGoNextWhenReady = ({\r\n serverContext,\r\n contextValues,\r\n i18n,\r\n scope,\r\n}) => {\r\n const {\r\n CurrentAccount,\r\n Token: smallToken,\r\n OAuthToken: oAuthToken,\r\n DeveloperToken: devToken,\r\n } = serverContext;\r\n\r\n const { AdvertiserCustomerID: ParentCustomerId } = CurrentAccount;\r\n\r\n const customerId = ParentCustomerId;\r\n\r\n const { uid, aid } = scope.values;\r\n\r\n const {\r\n GMCEmail,\r\n mappingGridRows,\r\n placeholderMerchantIds,\r\n repository,\r\n } = contextValues;\r\n\r\n const logger = {\r\n logError: repository.logError,\r\n logTrace: repository.logTrace,\r\n };\r\n\r\n let customerIdAndEmailMap;\r\n if (placeholderMerchantIds && placeholderMerchantIds.length > 0) {\r\n customerIdAndEmailMap = {\r\n CustomerIdAndEmailMap:\r\n {\r\n Mappings: map(placeholderMerchantIds, merchantId => ({\r\n GMCId: merchantId,\r\n MMCId: null,\r\n MMCEnum: 'Placeholder',\r\n })),\r\n },\r\n };\r\n } else {\r\n customerIdAndEmailMap = generateSetMappingsRequest({\r\n gmcEmailAddress: GMCEmail,\r\n i18n,\r\n mappingGridRows,\r\n logger,\r\n });\r\n }\r\n\r\n return setMappings({\r\n customerIdAndEmailMap,\r\n uid,\r\n cid: customerId,\r\n aid,\r\n logger,\r\n smallToken,\r\n oAuthToken,\r\n devToken,\r\n });\r\n};\r\n\r\nconst createScheduledImportAndGoNextWhenReady = (\r\n taskItemBody,\r\n state,\r\n facScheduleInvalid,\r\n facNoActiveCampaigns\r\n) => {\r\n const { repository, deps } = state;\r\n let taskItemPromise;\r\n\r\n if (state.isEditingScheduledImport) {\r\n taskItemPromise = repository.updateScheduledImportTaskItem(\r\n taskItemBody,\r\n state.initialSettings.taskItemId\r\n );\r\n } else {\r\n taskItemPromise = repository.createScheduledImportTaskItem(taskItemBody);\r\n }\r\n\r\n // if there is a coupon, mark as adopted and show a success/alert banner\r\n if (deps.coupon && deps.coupon.rawData.Status === FAC_STATUS_ACTIVE && !facScheduleInvalid && !facNoActiveCampaigns) {\r\n // only apply to recurring jobs\r\n taskItemPromise = repository.updateCouponStatus(\r\n taskItemPromise,\r\n FAC_STATUS_ADOPTED,\r\n false\r\n );\r\n }\r\n\r\n // runnow/once/recurring jobs are all update coupon status.\r\n if (deps.calloutcardCoupon) {\r\n taskItemPromise = repository.updateCouponStatus(\r\n taskItemPromise,\r\n FAC_STATUS_PICKEDUP,\r\n true\r\n );\r\n }\r\n\r\n return taskItemPromise;\r\n};\r\n\r\nconst createRunNowImportAndGoNextWhenReady = (\r\n taskItemBody,\r\n state,\r\n setImportStatus,\r\n getNextStepName,\r\n isRunNowImport\r\n) => {\r\n const {\r\n repository,\r\n deps,\r\n goToNextStep,\r\n patchState,\r\n } = state;\r\n\r\n let taskItemPromise = repository.createRunNowImportTaskItem(taskItemBody);\r\n // runnow/once/recurring jobs are all update coupon status.\r\n if (isRunNowImport && deps.calloutcardCoupon) {\r\n taskItemPromise = repository.updateCouponStatus(\r\n taskItemPromise,\r\n FAC_STATUS_PICKEDUP,\r\n true\r\n );\r\n }\r\n\r\n return taskItemPromise\r\n .then((response) => {\r\n setImportStatus({\r\n taskItemExecutionId: first(response.TaskItemExecutions).Id,\r\n });\r\n // go to import summmary or import status views and hide progress list\r\n if (isFunction(getNextStepName)) {\r\n const nextStepName = getNextStepName({ isRunNowImport: true });\r\n // remove hard code\r\n if (nextStepName === 'importStatusStep') {\r\n deps.toggleShowImportStatusStep(true);\r\n } else if (nextStepName === 'importSummaryStep') {\r\n deps.toggleShowImportSummary(true);\r\n }\r\n patchState({\r\n hideProgressList: true,\r\n });\r\n goToNextStep(nextStepName);\r\n }\r\n return Promise.resolve(response);\r\n });\r\n};\r\n\r\nexport const createImportAndGoNextWhenReady = ({\r\n state,\r\n generateTaskData,\r\n setImportStatus,\r\n activity,\r\n getNextStepName,\r\n rootContainerClassName,\r\n showErrorMessage = noop,\r\n facScheduleInvalid,\r\n facNoActiveCampaigns = false,\r\n}) => {\r\n const {\r\n repository,\r\n patchState,\r\n goToNextStep,\r\n deps,\r\n permissionFactory,\r\n campaignsWithMerchantId,\r\n placeholderMerchantIds,\r\n skipSetMappings = false,\r\n } = state;\r\n\r\n const {\r\n isRunNowWithScheduledImport,\r\n isRunNowImport,\r\n isScheduledImport,\r\n scheduleStepState,\r\n importOptions,\r\n importOptionsRunnow,\r\n } = generateTaskData();\r\n\r\n // adopt import callout card recommendation\r\n const adoptResumeImportCalloutCardRecommendation = once((info) => {\r\n const { defaultLogActivity, odata, adoptResumeImportRecommendation } = deps;\r\n if (defaultLogActivity && odata && adoptResumeImportRecommendation) {\r\n adoptResumeImportRecommendation({ odata, loggerApi: defaultLogActivity, info });\r\n }\r\n });\r\n\r\n let setMappingsMMCPromise;\r\n\r\n const scheduleOption = isRunNowWithScheduledImport || isScheduledImport ? mapCronToFrequency(importOptions.cron, importOptions.IsAutoFrequency) : 'Now';\r\n repository.applyOpportunityIfApplicable({ scheduleOption });\r\n\r\n // set mappings call is not blocking and happens sequentially in the wizard.\r\n if ((permissionFactory.isMerchantCenterStoreMappingStepEnabled(campaignsWithMerchantId)\r\n && !skipSetMappings)\r\n || (placeholderMerchantIds && placeholderMerchantIds.length > 0)) {\r\n setMappingsMMCPromise = setMappingsAndGoNextWhenReady({\r\n serverContext: deps.serverContext,\r\n contextValues: state,\r\n i18n: deps.newI18n,\r\n scope: deps.scope || { values: { aid: repository.aid, uid: repository.uid } },\r\n });\r\n } else {\r\n setMappingsMMCPromise = Promise.resolve([]);\r\n }\r\n\r\n return setMappingsMMCPromise\r\n .catch((response) => {\r\n // if setmappings has an error\r\n let errorMessage = StartImportErrorCodes.GenericMMCError;\r\n if (response && response.responseJSON &&\r\n isArray(response.responseJSON) && response.responseJSON.length > 0) {\r\n errorMessage =\r\n StartImportErrorCodes[response.responseJSON[0].ErrorCode] ||\r\n StartImportErrorCodes.GenericMMCError;\r\n }\r\n\r\n showErrorMessage(deps.newI18n.getString(errorMessage));\r\n\r\n if (activity) {\r\n activity.signal(`step wizard encountered an error while importing - ${JSON.stringify(response)}`);\r\n }\r\n })\r\n .then((mmcResponse) => {\r\n if (mmcResponse && isArray(mmcResponse) && mmcResponse.length > 0) {\r\n const setMappingsError =\r\n StartImportErrorCodes[mmcResponse[0].ErrorCode] ||\r\n StartImportErrorCodes.GenericMMCError;\r\n\r\n showErrorMessage(deps.newI18n.getString(setMappingsError));\r\n }\r\n if (isRunNowWithScheduledImport || isScheduledImport) {\r\n return repository.prepareGoogleImportTaskItem({\r\n importOptions,\r\n stepState: scheduleStepState,\r\n }).then((scheduleBody) => {\r\n adoptResumeImportCalloutCardRecommendation(scheduleBody);\r\n return createScheduledImportAndGoNextWhenReady(\r\n scheduleBody,\r\n state,\r\n facScheduleInvalid,\r\n facNoActiveCampaigns\r\n );\r\n }).tap((taskItem) => {\r\n const { Id } = taskItem || {};\r\n if (activity) {\r\n activity.signal(`scheduled task created: ${Id}`);\r\n }\r\n repository.logApplyOpportunityInfoIfIfApplicable(Id);\r\n });\r\n }\r\n\r\n return Promise.resolve(true);\r\n })\r\n .then(() => {\r\n if (isRunNowImport || isRunNowWithScheduledImport) {\r\n return repository.prepareGoogleImportTaskItem({\r\n importOptions: importOptionsRunnow,\r\n stepState: scheduleStepState,\r\n }).then((runNowBody) => {\r\n adoptResumeImportCalloutCardRecommendation(runNowBody);\r\n return createRunNowImportAndGoNextWhenReady(runNowBody, state, setImportStatus, getNextStepName, isRunNowImport) // eslint-disable-line\r\n }).tap((taskItem) => {\r\n const { Id } = taskItem || {};\r\n if (activity) {\r\n activity.signal(`runnow task created: ${Id}`);\r\n }\r\n // if only runnow, then log it here. Otherwise, it has been loged before.\r\n if (isRunNowImport) {\r\n repository.logApplyOpportunityInfoIfIfApplicable(Id);\r\n }\r\n });\r\n }\r\n\r\n // go to import summmary or import status views and hide progress list\r\n if (isFunction(getNextStepName)) {\r\n patchState({\r\n hideProgressList: true,\r\n });\r\n deps.toggleShowImportSummary(true);\r\n goToNextStep(getNextStepName({ isRunNowImport: false }));\r\n }\r\n return Promise.resolve(false);\r\n })\r\n .catch((errors) => {\r\n const ODataError = chain(errors)\r\n .result('responseJSON')\r\n .result('value')\r\n .result('0')\r\n .result('Code')\r\n .value();\r\n const errorMessage = StartImportErrorCodes[ODataError] ||\r\n StartImportErrorCodes.GenericImportError;\r\n\r\n // save expert task on smart schedule step, show workaround error message first.\r\n // bug will fix later.\r\n if (ODataError === 'InvalidAdWordsImportContext' &&\r\n state.isEditingScheduledImport &&\r\n activity && activity.name.indexOf('googleSmartImportScheduleStep') === 0) {\r\n const ODataErrorMessage = chain(errors)\r\n .result('responseJSON')\r\n .result('value')\r\n .result('0')\r\n .result('Message')\r\n .value();\r\n if (ODataErrorMessage === 'Invalid GoogleEntitiesBlob file in GoogleApiImport TaskItem. No campaignId are found.') {\r\n showErrorMessage(deps.newI18n.getString(_TL_('Please click Advanced import to review the option values and complete the task setup.')));\r\n }\r\n } else {\r\n showErrorMessage(deps.newI18n.getString(errorMessage));\r\n }\r\n if (activity) {\r\n activity.signal(`step wizard encountered an error while importing - ${JSON.stringify(errors)}`);\r\n }\r\n return Promise.reject(errors);\r\n })\r\n .finally(withUiBlock($(`.${rootContainerClassName}`), deps.newI18n.getString(_TL_('Loading'))));\r\n};\r\n\r\nconst startImportTask = ({\r\n contextValues,\r\n setImportStatus,\r\n activity,\r\n rootContainerClassName,\r\n getNextStepName = null,\r\n showErrorMessage = noop,\r\n importOptions,\r\n state,\r\n}) => {\r\n const importOptionsRunnow = {\r\n ...importOptions,\r\n IsAutoFrequency: false,\r\n taskItemState: 'Active',\r\n };\r\n\r\n const taskData = formatTaskData(contextValues, {\r\n ...state,\r\n importOptions,\r\n importOptionsRunnow,\r\n });\r\n\r\n return createImportAndGoNextWhenReady({\r\n state: contextValues,\r\n generateTaskData: () => taskData,\r\n setImportStatus,\r\n activity,\r\n getNextStepName,\r\n rootContainerClassName,\r\n showErrorMessage,\r\n });\r\n};\r\n\r\n// auto with runnow\r\nexport const startAutoImportTask = ({\r\n contextValues,\r\n setImportStatus,\r\n activity,\r\n rootContainerClassName,\r\n accountNumber,\r\n accountTimeZone,\r\n importName,\r\n ScenarioIdentifier,\r\n DefaultImportSettings = null,\r\n showErrorMessage = noop,\r\n getNextStepName = null,\r\n IsSmartCampaignOnly = null,\r\n}) => {\r\n const state = {\r\n isRunNowWithScheduledImport: true,\r\n isRunNowImport: false,\r\n isScheduledImport: false,\r\n };\r\n\r\n const {\r\n isEscImport,\r\n } = contextValues;\r\n\r\n const importOptions = {\r\n notificationType: 'None',\r\n notificationEmailAddresses: '',\r\n timeZoneId: accountTimeZone,\r\n name: importName || getAutoImportTaskName(accountNumber),\r\n cron: null,\r\n IsAutoFrequency: true,\r\n IsSmartImport: true,\r\n IsSmartCampaignOnly,\r\n IsEscImport: isEscImport,\r\n ScenarioIdentifier,\r\n DefaultImportSettings,\r\n };\r\n\r\n if (activity) {\r\n activity.signal('StartImportButtonClicked - Auto');\r\n // Add log to distinguish import type in report\r\n activity.signal(ImportTypeString.Smart);\r\n }\r\n\r\n return startImportTask({\r\n contextValues,\r\n setImportStatus,\r\n activity,\r\n rootContainerClassName,\r\n getNextStepName,\r\n showErrorMessage,\r\n state,\r\n importOptions,\r\n });\r\n};\r\n\r\nexport const startRunnowImportTask = ({\r\n contextValues,\r\n setImportStatus,\r\n activity,\r\n rootContainerClassName,\r\n accountTimeZone,\r\n importName,\r\n showErrorMessage = noop,\r\n getNextStepName = null,\r\n IsSmartCampaignOnly = null,\r\n}) => {\r\n const state = {\r\n isRunNowWithScheduledImport: false,\r\n isRunNowImport: true,\r\n isScheduledImport: false,\r\n };\r\n\r\n const importOptions = {\r\n notificationType: 'None',\r\n notificationEmailAddresses: null,\r\n timeZoneId: accountTimeZone,\r\n name: importName,\r\n cron: null,\r\n IsAutoFrequency: false,\r\n IsSmartImport: true,\r\n IsSmartCampaignOnly,\r\n };\r\n\r\n return startImportTask({\r\n contextValues,\r\n setImportStatus,\r\n activity,\r\n rootContainerClassName,\r\n getNextStepName,\r\n showErrorMessage,\r\n state,\r\n importOptions,\r\n });\r\n};\r\n","import React, { Fragment } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Activity, withActivityContext } from '@bingads-webui-react/hoc-with-signal';\r\nimport { ByPassConfirmationModal } from '@bingads-webui-react/feature-adoption-coupon';\r\nimport { SmartImportContainer } from './smart-import-container';\r\nimport {\r\n createImportAndGoNextWhenReady as defaultCreateImportAndGoNextWhenReady,\r\n formatTaskData as defaultFormatTaskData,\r\n} from './create-schedule-runnow-job';\r\n\r\nimport {\r\n StepContainer,\r\n ImportCoreContext,\r\n mapCronToFrequency,\r\n ImportType,\r\n ImportTypeString,\r\n} from '../../index';\r\n\r\nexport class StartImportStepInternal extends React.PureComponent {\r\n constructor(props) {\r\n super(props);\r\n const { permissionFactory } = this.props.contextValues;\r\n\r\n this.state = {\r\n showError: false,\r\n showScheduleInvalidFacModal: false,\r\n };\r\n\r\n this.WrappedStartImportContainer =\r\n props.stepPrefetchHoc ? props.stepPrefetchHoc(SmartImportContainer) : SmartImportContainer;\r\n\r\n this.isImportSmartScheduleStepImprovementEnabled = permissionFactory && permissionFactory.IsImportSmartScheduleStepImprovementEnabled\r\n && permissionFactory.IsImportSmartScheduleStepImprovementEnabled();\r\n }\r\n\r\n onSwitchCustomizeMode = () => {\r\n const {\r\n deps,\r\n patchState,\r\n toggleImportType,\r\n goToNextStep,\r\n isSchedulePageValid,\r\n hasAccountsWithNoCampaigns,\r\n } = this.props.contextValues;\r\n\r\n const { perfMarker } = deps;\r\n\r\n const campaignSelectionPerfMarker = perfMarker.createChild('Smart_Import_Campaign_Selection_Step');\r\n campaignSelectionPerfMarker.willInit();\r\n\r\n patchState({\r\n campaignSelectionPerfMarker,\r\n });\r\n\r\n if (isSchedulePageValid) {\r\n if (this.props.activity) {\r\n this.props.activity.signal('CustomizeImportButtonClicked');\r\n }\r\n\r\n toggleImportType(ImportType.Advanced);\r\n goToNextStep(this.props.getAdvancedCustomizingStepName(hasAccountsWithNoCampaigns));\r\n }\r\n };\r\n\r\n onStartClick = () => {\r\n this.setShowError();\r\n const {\r\n contextValues: { deps: { coupon }, isSchedulePageValid },\r\n facScheduleInvalid,\r\n } = this.props;\r\n if (!isSchedulePageValid) {\r\n return;\r\n }\r\n\r\n if (this.isImportSmartScheduleStepImprovementEnabled && coupon && facScheduleInvalid) {\r\n this.setState({ showScheduleInvalidFacModal: true });\r\n } else {\r\n this.startImporting();\r\n }\r\n };\r\n\r\n onNoActiveCampaignFacModalConfirm = () => {\r\n this.onNoActiveCampaignFacModalDismiss();\r\n this.startImporting();\r\n };\r\n\r\n onNoActiveCampaignFacModalDismiss = () => {\r\n this.setState({ showScheduleInvalidFacModal: false });\r\n };\r\n\r\n setShowError = () => {\r\n this.setState({\r\n showError: true,\r\n });\r\n };\r\n\r\n getImportInformation() {\r\n const {\r\n Cron,\r\n IsAutoFrequency,\r\n } = this.props.contextValues;\r\n const chosenFrequency = mapCronToFrequency(Cron, IsAutoFrequency);\r\n const isRunNowWithScheduledImport = this.isImportSmartScheduleStepImprovementEnabled ? IsAutoFrequency :\r\n (IsAutoFrequency || (Cron && chosenFrequency !== 'Once'));\r\n const isRunNowImport = !(IsAutoFrequency || Cron);\r\n const isScheduledImport = this.isImportSmartScheduleStepImprovementEnabled ? (chosenFrequency !== 'Auto' && chosenFrequency !== 'Now') : chosenFrequency === 'Once';\r\n\r\n return {\r\n isRunNowWithScheduledImport,\r\n isRunNowImport,\r\n isScheduledImport,\r\n chosenFrequency,\r\n };\r\n }\r\n\r\n generateTaskData = () => {\r\n const {\r\n patchState,\r\n Name,\r\n IsAutoFrequency,\r\n TimeZoneId,\r\n Cron,\r\n NotificationType,\r\n NotificationEmailAddresses,\r\n } = this.props.contextValues;\r\n const { formatTaskData, activity } = this.props;\r\n\r\n const {\r\n isRunNowWithScheduledImport,\r\n isRunNowImport,\r\n isScheduledImport,\r\n } = this.getImportInformation();\r\n\r\n patchState({\r\n isRunNowWithScheduledImport,\r\n isRunNowImport,\r\n isScheduledImport,\r\n IsSmartImport: true,\r\n IsExpertModeImport: false,\r\n });\r\n\r\n const importOptions = {\r\n notificationType: NotificationType,\r\n notificationEmailAddresses: NotificationEmailAddresses,\r\n timeZoneId: TimeZoneId,\r\n name: Name,\r\n cron: Cron,\r\n IsAutoFrequency,\r\n IsSmartImport: true,\r\n };\r\n const importOptionsRunnow = {\r\n notificationType: 'None',\r\n notificationEmailAddresses: null,\r\n timeZoneId: TimeZoneId,\r\n name: Name,\r\n cron: null,\r\n taskItemState: 'Active',\r\n IsAutoFrequency: false,\r\n IsSmartImport: true,\r\n };\r\n\r\n return formatTaskData(this.props.contextValues, {\r\n isRunNowWithScheduledImport,\r\n isRunNowImport,\r\n isScheduledImport,\r\n importOptions,\r\n importOptionsRunnow,\r\n }, activity);\r\n };\r\n\r\n startImporting = () => {\r\n const {\r\n isSchedulePageValid,\r\n deps,\r\n patchState,\r\n } = this.props.contextValues;\r\n\r\n const { activity, createImportAndGoNextWhenReady } = this.props;\r\n\r\n const { perfMarker } = deps;\r\n\r\n if (isSchedulePageValid) {\r\n const smartImportSummaryStepPerfMarker = perfMarker.createChild('Smart_Import_ImportSummary_Step');\r\n const {\r\n isRunNowWithScheduledImport,\r\n isRunNowImport,\r\n isScheduledImport: scheduleOnly,\r\n chosenFrequency,\r\n } = this.getImportInformation();\r\n\r\n if (!(isRunNowWithScheduledImport || isRunNowImport)) {\r\n smartImportSummaryStepPerfMarker.willInit();\r\n }\r\n\r\n if (activity && scheduleOnly) {\r\n activity.signal(`SaveButtonClicked - ${chosenFrequency} `);\r\n } else {\r\n activity.signal(`StartImportButtonClicked - ${chosenFrequency}`);\r\n }\r\n\r\n // Add log to distinguish import type in report\r\n if (activity) {\r\n activity.signal(ImportTypeString.Smart);\r\n }\r\n\r\n patchState({\r\n startImportFrom: ImportTypeString.Smart,\r\n smartImportSummaryStepPerfMarker,\r\n });\r\n\r\n createImportAndGoNextWhenReady({\r\n state: this.props.contextValues,\r\n generateTaskData: this.generateTaskData,\r\n setImportStatus: this.props.setImportStatus,\r\n activity,\r\n getNextStepName: this.props.getNextStepName,\r\n rootContainerClassName: this.props.rootContainerClassName,\r\n showErrorMessage: (errMsg) => {\r\n const { alertCenter } = deps;\r\n alertCenter.showError(errMsg);\r\n },\r\n facScheduleInvalid: this.props.facScheduleInvalid,\r\n });\r\n }\r\n };\r\n\r\n render() {\r\n const {\r\n contextValues,\r\n stepTitle,\r\n getPrevStepName,\r\n showCancelButton,\r\n getActionBarItems,\r\n isCustomizingModeEnabled,\r\n } = this.props;\r\n const {\r\n campaignsWithMerchantId,\r\n permissionFactory,\r\n } = contextValues;\r\n const { isScheduledImport: scheduleOnly } = this.getImportInformation();\r\n const onSwitchCustomizeMode = isCustomizingModeEnabled ? this.onSwitchCustomizeMode : null;\r\n\r\n const { WrappedStartImportContainer } = this;\r\n\r\n return (\r\n \r\n {this.isImportSmartScheduleStepImprovementEnabled ?\r\n \r\n \r\n {this.newI18n.getString(_TL_('We\\'ll fine-tune the import settings to best optimize your campaigns.'))} \r\n \r\n \r\n {this.newI18n.getString(_TL_('In the meantime,'))} \r\n \r\n \r\n {this.newI18n.getString(_TL_('learn more about how we import items from {{brandName}} Ads.'), { brandName })}\r\n \r\n \r\n \r\n :\r\n \r\n {this.newI18n.getString(_TL_(\"You're ready! Start the import, sit back, and we'll fine tune the import settings so that your campaigns do their best on Microsoft Advertising.\"))}\r\n }\r\n
\r\n {\r\n this.props.getSchedulePageDisclaimer &&\r\n ( { this.props.getSchedulePageDisclaimer() }
)\r\n }\r\n \r\n \r\n :\r\n
\r\n {this.isImportSmartScheduleStepImprovementPhaseTwoEnabled && this.props.context.importOptions &&\r\n \r\n \r\n
\r\n {this.state.IsAutoFrequency || (\r\n \r\n {this.newI18n.getString(_TL_('Choose when you want your import to happen.'))}\r\n
\r\n \r\n (\r\n
\r\n \r\n {render(props)}\r\n {props.checked &&\r\n
),\r\n }, {\r\n key: 'custom',\r\n text: this.newI18n.getString(_TL_('Custom schedule')),\r\n onRenderField: (props, render) => (\r\n \r\n {this.newI18n.getString(_TL_(\"We'll automatically run your imports on a regular basis to ensure changes you make on {{brandName}} Ads are synced with your Microsoft Advertising campaigns.\"), { brandName })}\r\n
}\r\n \r\n {render(props)}\r\n {props.checked &&\r\n
),\r\n }]}\r\n defaultSelectedKey={this.state.IsAutoFrequency ? 'automatic' : 'custom'}\r\n onChange={this.onFrequencySettingsChange}\r\n />\r\n \r\n {this.newI18n.getString(_TL_('You choose exactly when you want your imports to run.'))}\r\n
}\r\n \r\n \r\n \r\n \r\n \r\n {parseCronToDisplayString(\r\n this.newI18n,\r\n this.state.IsAutoFrequency,\r\n this.state.Cron,\r\n this.state.TimeZoneId,\r\n this.importSchedulingOptions,\r\n false,\r\n this.props.context.deps.timeZoneMapper,\r\n true\r\n )}\r\n \r\n }\r\n \r\n {\r\n this.props.facScheduleInvalid &&\r\n {text},\r\n }}\r\n template={this.newI18n.getString(_TL_('You must select {{bold}}Auto{{/bold}}, {{bold}}Daily{{/bold}}, {{bold}}Weekly{{/bold}} or {{bold}}Monthly{{/bold}} to qualify for this promotional offer.'))}\r\n />}\r\n />\r\n }\r\n
)}\r\n \r\n \r\n \r\n
}\r\n {(this.state.IsAutoFrequency || this.state.Cron) && (this.isImportSmartScheduleStepImprovementEnabled ?\r\n \r\n {this.state.scheduleSummaryString}\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n - \r\n
- {this.newI18n.getString(_TL_('Choose which items you\\'d like imported, updated, or ignored.'))} \r\n
- {this.newI18n.getString(_TL_('Find and replace text in tracking templates or URLs.'))} \r\n
- {this.newI18n.getString(_TL_('Fine-tune bids and budgets.'))} \r\n
\r\n
\r\n );\r\n};\r\n\r\nCollapsiblePanel.propTypes = {\r\n name: PropTypes.string.isRequired,\r\n helpId: PropTypes.string,\r\n renderContent: PropTypes.func.isRequired,\r\n getDetails: PropTypes.func,\r\n isActive: PropTypes.bool,\r\n setPanelActiveCallback: PropTypes.func,\r\n};\r\n\r\nCollapsiblePanel.defaultProps = {\r\n helpId: '',\r\n getDetails: () => {},\r\n isActive: false,\r\n setPanelActiveCallback: null,\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Collapse, TextTitle } from '@bingads-webui-campaign/wizard-jumbo-card';\r\n\r\nexport const FixedPanel = (props) => {\r\n const {\r\n name,\r\n helpId,\r\n renderContent,\r\n } = props;\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nFixedPanel.propTypes = {\r\n name: PropTypes.string.isRequired,\r\n helpId: PropTypes.string,\r\n renderContent: PropTypes.func.isRequired,\r\n};\r\n\r\nFixedPanel.defaultProps = {\r\n helpId: '',\r\n};\r\n","import React, { useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { ToggleTitle } from '@bingads-webui-campaign/wizard-jumbo-card';\r\n\r\nexport const CommonToggleTitle = (props) => {\r\n const {\r\n id,\r\n name,\r\n helpId = '',\r\n onToggle,\r\n activeKeys,\r\n setActiveKeys,\r\n getDetails,\r\n isChecked,\r\n setIsChecked,\r\n ifSeparateActiveAndToggleStatus,\r\n } = props;\r\n\r\n const details = useMemo(() => getDetails && getDetails(isChecked), [getDetails, isChecked]);\r\n\r\n return (\r\n \r\n setPanelActiveCallback(isActive)}\r\n {...props}\r\n >\r\n {renderContent({ disabled: ifSeparateActiveAndToggleStatus && !isChecked })}\r\n \r\n
\r\n );\r\n};\r\n\r\nTogglePanel.propTypes = {\r\n renderContent: PropTypes.func.isRequired,\r\n isActive: PropTypes.bool,\r\n ifSeparateActiveAndToggleStatus: PropTypes.bool,\r\n isToggleOn: PropTypes.bool,\r\n setPanelActiveCallback: PropTypes.func,\r\n};\r\n\r\nTogglePanel.defaultProps = {\r\n isActive: false,\r\n ifSeparateActiveAndToggleStatus: false,\r\n isToggleOn: false,\r\n setPanelActiveCallback: null,\r\n};\r\n","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { ValidatedPanel, getPanelErrorProps } from '@bingads-webui-campaign/wizard-jumbo-card';\r\n\r\nimport { CommonToggleTitle } from './shared';\r\n\r\nexport const ValidatedTogglePanel = (props) => {\r\n const {\r\n renderContent,\r\n isActive,\r\n ifSeparateActiveAndToggleStatus,\r\n isToggleOn,\r\n setPanelActiveCallback,\r\n } = props;\r\n\r\n // if separate, use toggle status; if not, use active status as the default status\r\n const [isChecked, setIsChecked] = useState(ifSeparateActiveAndToggleStatus ? isToggleOn : isActive);\r\n\r\n const toggleTitle = CommonToggleTitle({\r\n ...props, isChecked, setIsChecked,\r\n });\r\n\r\n return (\r\n \r\n setPanelActiveCallback(isActive)}\r\n {...props}\r\n >\r\n {renderContent({ disabled: ifSeparateActiveAndToggleStatus && !isChecked })}\r\n \r\n
\r\n );\r\n};\r\n\r\nValidatedTogglePanel.propTypes = {\r\n renderContent: PropTypes.func.isRequired,\r\n isActive: PropTypes.bool,\r\n ifSeparateActiveAndToggleStatus: PropTypes.bool,\r\n isToggleOn: PropTypes.bool,\r\n setPanelActiveCallback: PropTypes.func,\r\n};\r\n\r\nValidatedTogglePanel.defaultProps = {\r\n isActive: false,\r\n ifSeparateActiveAndToggleStatus: false,\r\n isToggleOn: false,\r\n setPanelActiveCallback: null,\r\n};\r\n","import _ from 'underscore';\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Collapse, useCollapseState } from '@bingads-webui-campaign/wizard-jumbo-card';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { CollapsiblePanel, FixedPanel, TogglePanel, ValidatedTogglePanel } from './index';\r\n\r\nconst getPanelComponent = (panel) => {\r\n switch (panel.type) {\r\n case 'collapsible':\r\n return \r\n \r\n {childrenPanels}\r\n \r\n
\r\n );\r\n};\r\n\r\nPanelContainer.propTypes = {\r\n panelData: PropTypes.shape({\r\n allKeys: PropTypes.arrayOf(PropTypes.string),\r\n defaultActiveKeys: PropTypes.arrayOf(PropTypes.string),\r\n panelSettings: PropTypes.arrayOf(PropTypes.shape({})),\r\n }).isRequired,\r\n getOverridePanelStyles: PropTypes.func,\r\n};\r\n\r\nPanelContainer.defaultProps = {\r\n getOverridePanelStyles: () => {},\r\n};\r\n","// this file is used for override panel styles for different panels\r\n\r\nexport const getSmartScheduleStepPanelStyles = () => ({\r\n ImportPanelContainer: {\r\n '& .collapse-panel': {\r\n width: '800px !important',\r\n boxShadow: 'none !important',\r\n padding: '0 !important',\r\n borderBottom: '#edebe9 1px solid',\r\n },\r\n\r\n '& .ms-Stack:has(> .title-text)': {\r\n marginLeft: '0',\r\n },\r\n\r\n '& .title-text': {\r\n whiteSpace: 'normal',\r\n wordBreak: 'break-all',\r\n },\r\n },\r\n});\r\n","import {\r\n Stack,\r\n} from '@fluentui/react';\r\nimport React, { useCallback } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { isFunction } from 'underscore';\r\nimport { Checkbox } from '@bingads-webui-react/fabric-with-signal';\r\nimport { HelpPopup } from '@bingads-webui-react/help-popup';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nconst getStyles = () => ({\r\n formCheckBoxContainer: {\r\n margin: '3px 0',\r\n\r\n '& .checkbox-label': {\r\n marginLeft: '8px',\r\n display: 'flex',\r\n alignItems: 'center',\r\n },\r\n\r\n '& .checkbox-description': {\r\n marginLeft: '33px',\r\n color: '#605E5C',\r\n },\r\n },\r\n});\r\n\r\nconst UnstyledFormCheckbox = ({\r\n property,\r\n prefix,\r\n config,\r\n data,\r\n checked,\r\n disabled,\r\n i18n,\r\n save,\r\n classes,\r\n}) => {\r\n const {\r\n message, helpId, description, customCallback,\r\n } = config;\r\n\r\n const callback = useCallback((e, isChecked) => {\r\n if (isFunction(customCallback)) {\r\n customCallback(isChecked);\r\n }\r\n if (isFunction(save)) {\r\n save({ [property]: isChecked });\r\n }\r\n }, [customCallback, save, property]);\r\n\r\n return (\r\n {typeof description === 'string' ? i18n.getString(description) : description}
}\r\n {errorMsg}
}\r\n {showRecommendation &&\r\n \r\n setValue({ ...value, EnablePrefixAndSuffix: val })} />\r\n {value.EnablePrefixAndSuffix && setValue({ ...value, SuffixString: val })} /> }\r\n
\r\n );\r\n }\r\n if (value.EnableSearchAndReplace !== undefined) {\r\n return (\r\n \r\n setValue({ ...value, EnableSearchAndReplace: val })} />\r\n {value.EnableSearchAndReplace && setValue({ ...value, SearchString: val })} /> }\r\n {value.EnableSearchAndReplace && setValue({ ...value, ReplaceString: val })} /> }\r\n
\r\n );\r\n }\r\n return null;\r\n });\r\n}\r\n\r\nCheckboxWithFormsGroup.propTypes = {\r\n config: PropTypes.arrayOf(PropTypes.shape({\r\n title: PropTypes.string.isRequired,\r\n value: PropTypes.shape({\r\n EnablePrefixAndSuffix: PropTypes.bool,\r\n SuffixString: PropTypes.string,\r\n EnableSearchAndReplace: PropTypes.bool,\r\n SearchString: PropTypes.string,\r\n ReplaceString: PropTypes.string,\r\n }).isRequired,\r\n setValue: PropTypes.func.isRequired,\r\n })).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n};\r\n","/* eslint-disable react/no-danger */\r\n\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { getStyles } from './styles';\r\n\r\nexport function Example(props) {\r\n const {\r\n i18n, titles, suffix, replace,\r\n } = props;\r\n const classes = useDefaultStyles(getStyles);\r\n\r\n const { EnablePrefixAndSuffix, SuffixString } = suffix;\r\n const { EnableSearchAndReplace, SearchString, ReplaceString } = replace;\r\n\r\n const initialUrl = 'https://example.com/buynow?utm_source=google';\r\n const originURLHTML = EnablePrefixAndSuffix ? initialUrl : initialUrl.replaceAll(SearchString || null, `${SearchString}`);\r\n let importedURLHTML = initialUrl;\r\n if (EnableSearchAndReplace) {\r\n importedURLHTML = `${initialUrl.replaceAll(SearchString || null, `${ReplaceString || ''}`)}`;\r\n }\r\n if (EnablePrefixAndSuffix) {\r\n importedURLHTML = `${importedURLHTML}${SuffixString || ''}`;\r\n }\r\n\r\n return (\r\n \r\n
\r\n );\r\n}\r\n\r\nExample.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n titles: PropTypes.shape({\r\n origin: PropTypes.string,\r\n imported: PropTypes.string,\r\n }).isRequired,\r\n suffix: PropTypes.shape({\r\n EnablePrefixAndSuffix: PropTypes.bool,\r\n SuffixString: PropTypes.string,\r\n }).isRequired,\r\n replace: PropTypes.shape({\r\n EnableSearchAndReplace: PropTypes.bool,\r\n SearchString: PropTypes.string,\r\n ReplaceString: PropTypes.string,\r\n }).isRequired,\r\n};\r\n","\r\nimport _ from 'underscore';\r\nimport React, { useMemo, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Panel, PanelType } from '@fluentui/react';\r\nimport { PrimaryButton, DefaultButton } from '@bingads-webui-react/fabric-with-signal';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { getStyles } from './styles';\r\nimport { CheckboxWithFormsGroup } from './checkbox-with-forms-group';\r\nimport { Example } from './example';\r\n\r\nexport function URLTrackingPanel(props) {\r\n const {\r\n i18n, data, config, save, disabled,\r\n } = props;\r\n const classes = useDefaultStyles(getStyles);\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [form, setForm] = useState(_.pick(data, config.keys));\r\n const formConfig = useMemo(() => config.keys.map((v, i) => ({\r\n title: config.options.items[i],\r\n value: data[v],\r\n state: [form[v], val => setForm({ ...form, [v]: val })],\r\n })), [config, data, form]);\r\n\r\n const isEdit = useMemo(() => {\r\n for (let i = 0; i < formConfig.length; i += 1) {\r\n if (formConfig[i].value.EnablePrefixAndSuffix || formConfig[i].value.EnableSearchAndReplace) {\r\n return true;\r\n }\r\n }\r\n return false;\r\n }, [formConfig]);\r\n\r\n const onRenderFooterContent = React.useCallback(\r\n () => (\r\n \r\n
\r\n \r\n
\r\n {i18n.getString(titles.origin)}
\r\n \r\n\r\n
\r\n {i18n.getString(titles.imported)}
\r\n \r\n{i18n.getString(_TL_('Example for how this rule will apply'))}
\r\n\r\n {\r\n save(form);\r\n setIsOpen(false);\r\n }}\r\n styles={{ root: { marginRight: 8 } }}\r\n >\r\n Save\r\n \r\n setIsOpen(false)}>Cancel \r\n
\r\n ),\r\n [form, save]\r\n );\r\n\r\n\r\n return (\r\n \r\n setIsOpen(true)}\r\n />\r\n setIsOpen(false)}\r\n className={config.className}\r\n type={PanelType.custom}\r\n customWidth=\"800px\"\r\n headerText={i18n.getString(config.panelTitle)}\r\n closeButtonAriaLabel={i18n.getString(_TL_('Close'))}\r\n onRenderFooterContent={onRenderFooterContent}\r\n isFooterAtBottom\r\n >\r\n
\r\n );\r\n}\r\n\r\nURLTrackingPanel.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n data: PropTypes.shape({}).isRequired,\r\n config: PropTypes.shape({\r\n panelTitle: PropTypes.string.isRequired,\r\n className: PropTypes.string,\r\n exampleTitles: PropTypes.shape({}).isRequired,\r\n keys: PropTypes.arrayOf(PropTypes.string),\r\n exampleKeys: PropTypes.shape({\r\n suffix: PropTypes.string,\r\n replace: PropTypes.string,\r\n }).isRequired,\r\n options: PropTypes.shape({\r\n title: PropTypes.arrayOf(PropTypes.string),\r\n items: PropTypes.arrayOf(PropTypes.string.isRequired),\r\n }).isRequired,\r\n }).isRequired,\r\n save: PropTypes.func.isRequired,\r\n disabled: PropTypes.bool.isRequired,\r\n};\r\n","import _ from 'underscore';\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { FormCheckbox } from '../custom-controls';\r\n\r\nexport function AccountLevelUrlOptions(props) {\r\n const {\r\n i18n, data, save, disabled,\r\n } = props;\r\n\r\n const { UserPreferenceTrackingTemplate } = data;\r\n const AccountLevelTrackingTemplateCheckboxEnabled = !(_.isNull(UserPreferenceTrackingTemplate) || _.isUndefined(UserPreferenceTrackingTemplate));\r\n\r\n const description = (\r\n <>\r\n {config.options.title}
\r\n {\r\n formConfig.map(v => (\r\n\r\n {v.value.EnablePrefixAndSuffix && <>{v.title}: "{v.value.SuffixString}" }\r\n {v.value.EnableSearchAndReplace &&\r\n <>\r\n {v.title}: \r\n \r\n {i18n.getString(_TL_('\"{{SearchString}}\" with \"{{ReplaceString}}\"'), {\r\n SearchString: v.value.SearchString,\r\n ReplaceString: v.value.ReplaceString,\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_('Tracking template: '))}{data.AdWordsAccountTrackingTemplate || i18n.getString(_TL_('Not available'))}
\r\n{i18n.getString(_TL_('Final URL suffix: '))}{data.AdWordsAccountFinalUrlSuffix || i18n.getString(_TL_('Not available'))}
\r\n \r\n );\r\n\r\n const checkboxConfig = {\r\n message: _TL_('Import and sync account-level URL tracking'),\r\n helpId: 'pop_BA_Import_URL_Synch',\r\n description,\r\n customCallback: (checked) => {\r\n save({\r\n AdWordsAccountTrackingTemplate: checked ? data.AdWordsAccountTrackingTemplate || '' : undefined,\r\n AdWordsAccountFinalUrlSuffix: checked ? data.AdWordsAccountFinalUrlSuffix || '' : undefined,\r\n UserPreferenceTrackingTemplate: checked ? data.AdWordsAccountTrackingTemplate || data.AdWordsAccountFinalUrlSuffix || '' : undefined,\r\n });\r\n },\r\n };\r\n\r\n return (\r\n{key}
; // can't go here.\r\n }\r\n };\r\n\r\n render() {\r\n const panelSettings = this.props.makeUserPreferencePanelSettings({\r\n renderContent: this.renderCardContent,\r\n onToggle: this.props.onToggle,\r\n onValidate: this.props.onValidate,\r\n model: this.props.preferenceValue,\r\n i18n: this.i18n,\r\n defaultToggleOnKeys: this.props.defaultToggleOnKeys,\r\n setPanelActiveCallback: this.props.logExpandStatusChange,\r\n fieldBlackList: this.props.fieldBlackList,\r\n });\r\n const panelData = {\r\n allKeys: this.props.preferenceGroupKeys,\r\n defaultActiveKeys: this.props.defaultActiveKeys,\r\n panelSettings,\r\n };\r\n\r\n return (\r\n \r\n {\r\n loading ? :
\r\n );\r\n});\r\n\r\nexport const getSmartImportStepPrefetchHOC = ({\r\n rootContainerClassName,\r\n merchantCenterStoreMappingStepPath = '',\r\n skipPreferencesRequests = false,\r\n prevStepNameIfPrefetchFail,\r\n loginStepName,\r\n}) => PreExecuteComponent => withSmartImportStepPrefetch(\r\n PreExecuteComponent,\r\n rootContainerClassName,\r\n merchantCenterStoreMappingStepPath,\r\n skipPreferencesRequests,\r\n prevStepNameIfPrefetchFail,\r\n loginStepName\r\n);\r\n","/* eslint-disable jsx-a11y/no-static-element-interactions */\r\n/* eslint-disable max-len */\r\nimport React from 'react';\r\nimport Promise from 'bluebird';\r\nimport PropTypes from 'prop-types';\r\nimport $ from 'jquery';\r\nimport _ from 'underscore';\r\nimport { ImportOptionsForm } from '@bingads-webui-campaign/import-components';\r\nimport { Activity, withActivityContext } from '@bingads-webui-react/hoc-with-signal';\r\nimport { BackboneInstanceWrapper } from '@bingads-webui-react/backbone-instance-wrapper';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { withUiBlock } from '@bingads-webui/uiblocker';\r\n\r\n// import { getActionBarItems } from './action-bar-config';\r\n// import { StepConstants } from '../../page/step-config';\r\nimport { getImportOptionsStepStyles } from './import-options-styles';\r\n// import { withSmartImportStepPrefetch } from '../start-import-smart-step/smart-import-step-prefetch';\r\nimport {\r\n StepContainer,\r\n ImportCoreContext,\r\n ImportType,\r\n} from '../../index';\r\n\r\nexport class ImportOptionsStepInternal extends React.PureComponent {\r\n constructor(props) {\r\n super(props);\r\n const {\r\n deps, contextValues, isGoogleImport, getImportOptionFields, subFieldsBlacklist,\r\n isPauseAdGroupIfNoLocationSupportedEnabled, isAudienceTargetForFBImportOptionEnabled,\r\n importAccountCurrencyTitle,\r\n } = props;\r\n const {\r\n otherFieldsExpanded = false,\r\n permissionFactory,\r\n repository,\r\n } = contextValues;\r\n\r\n if (subFieldsBlacklist != null) {\r\n deps.subFieldsBlacklist = subFieldsBlacklist;\r\n }\r\n\r\n const accountCurrencyMap = {\r\n // google/facebook/amazon account currency\r\n externalAccountCurrency:\r\n !_.isEmpty(contextValues.selectedAccounts[0]) && contextValues.selectedAccounts[0].Currency,\r\n microsoftAccountCurrency: deps.config.get('AccountCurrencyCode'),\r\n };\r\n this.shouldShowCurrencyConvertor = false;\r\n if (permissionFactory.isCurrencyConvertorRelocateEnabled()) {\r\n // only show currency convertor when (google/facebook/amazon)/microsoft currency not match\r\n this.shouldShowCurrencyConvertor =\r\n accountCurrencyMap.externalAccountCurrency !== accountCurrencyMap.microsoftAccountCurrency;\r\n }\r\n\r\n // For single account smart import, should show currency converter in import option form\r\n // Need to pass Google Ads account currency and Microsoft Ads account currency to the import option form\r\n // TODO: for multi account import, need to pass a map of Google/Microsoft account currency\r\n this.importOptionsForm = new ImportOptionsForm({\r\n deps,\r\n logTrace: repository.logTrace,\r\n previousImportOptions: contextValues.previousImportOptions,\r\n jsonFormatEditTaskItemOptions: contextValues.importOptions,\r\n includePausedCampaigns: contextValues.includePausedCampaigns,\r\n toggleContinueButton: this.toggleNextButton,\r\n otherFieldsExpanded,\r\n getImportOptionFields,\r\n isPauseAdGroupIfNoLocationSupportedEnabled,\r\n isAudienceTargetForFBImportOptionEnabled,\r\n isGoogleImport,\r\n shouldShowCurrencyConvertor: this.shouldShowCurrencyConvertor,\r\n accountCurrencyMap,\r\n importAccountCurrencyTitle,\r\n });\r\n\r\n this.importOptionsForm.render();\r\n this.lastOptions = this.importOptionsForm.getImportUserPreferences();\r\n\r\n this.i18n = deps.newI18n;\r\n this.showErrorMessage = (errMsg) => {\r\n const { alertCenter } = deps;\r\n alertCenter.showError(errMsg);\r\n };\r\n\r\n this.state = {\r\n isNextButtonEnabled: true,\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n const { contextValues } = this.props;\r\n\r\n const { expertImportOptionsPerfMarker } = contextValues;\r\n\r\n if (expertImportOptionsPerfMarker) {\r\n expertImportOptionsPerfMarker.done();\r\n }\r\n\r\n if (this.props.activity) {\r\n this.props.activity.signal('OptionPageLoaded');\r\n }\r\n }\r\n\r\n onClickOptions = () => {\r\n if (!this.props.activity) {\r\n return;\r\n }\r\n\r\n const currentOptions = this.importOptionsForm.getImportUserPreferences();\r\n // both last and current are generated from getImportUserPreferences\r\n // the order of keys are guaranteed to be the same, so we just walk through props\r\n // and compare each prop, print props different, no need to do deep comparison\r\n // for performance sake\r\n _.each(Object.keys(this.lastOptions), (key) => {\r\n if (!_.isEqual(this.lastOptions[key], currentOptions[key])) {\r\n const newValue = currentOptions[key];\r\n const oldValue = this.lastOptions[key];\r\n if (this.props.activity) {\r\n this.props.activity.signal(`ImportOptionsChanged - ${key}, old: ${JSON.stringify(oldValue)}, new: ${JSON.stringify(newValue)}`);\r\n }\r\n }\r\n });\r\n this.lastOptions = currentOptions;\r\n };\r\n\r\n // directly copied from import-options-step under import-components and use newI18n instead, may need further check later\r\n getUETErrorMessage(errorCode) {\r\n const defaultMessage = _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: _TL_('A tag with this name already exists. Enter a different name.'),\r\n InvalidTagName: _TL_(\"We can't save the UET tag because the name has invalid characters. Enter a different name and try again.\"),\r\n TagNameNullOrEmpty: _TL_(\"We can't save the UET tag because the name has invalid characters. Enter a different name and try again.\"),\r\n InvalidTagDescription: _TL_(\"We can't save the UET tag because the description has invalid characters. Enter a different description and try again.\"),\r\n CustomerUnderMigration: _TL_('Conversion tracking tags and goals data is currently being migrated to a better system. Please try again later.'),\r\n SharedLibraryUserPermissionDenied: _TL_(\"You don't have permission.\"),\r\n };\r\n\r\n return this.i18n.getString(messageMap[errorCode] || defaultMessage);\r\n }\r\n\r\n validate = (shouldSwitchMode = false) => {\r\n const {\r\n contextValues,\r\n rootContainerClassName,\r\n } = this.props;\r\n const {\r\n patchState,\r\n autoConvertCurrencyEnabled,\r\n deps,\r\n hasAccountsWithNoCampaigns,\r\n toggleImportType,\r\n } = contextValues;\r\n\r\n const expertImportScheduleStep = deps.perfMarker.createChild('Smart_Import_Expert_Import_Schedule_Step');\r\n expertImportScheduleStep.willInit();\r\n\r\n if (this.importOptionsForm && this.importOptionsForm.validate()) {\r\n return this.importOptionsForm.createUETTag()\r\n .then((result) => {\r\n let importUserPreferences = this.importOptionsForm.getImportUserPreferences();\r\n\r\n // if show currency converter in import options step,\r\n // should the respect currency convertion option in this step\r\n if (!this.shouldShowCurrencyConvertor &&\r\n !_.isUndefined(autoConvertCurrencyEnabled) &&\r\n !_.isNull(autoConvertCurrencyEnabled)) {\r\n importUserPreferences = _.defaults(\r\n importUserPreferences,\r\n { EnableAutoCurrencyConversion: autoConvertCurrencyEnabled }\r\n );\r\n }\r\n patchState({\r\n newUETCreated: result.newUETCreated,\r\n importOptions: importUserPreferences,\r\n expertImportScheduleStep,\r\n });\r\n\r\n if (shouldSwitchMode && hasAccountsWithNoCampaigns) {\r\n toggleImportType(ImportType.Smart);\r\n }\r\n return true;\r\n }, (response) => {\r\n this.showErrorMessage(this.getUETErrorMessage(response && response.errorResponseBody &&\r\n response.errorResponseBody.value && response.errorResponseBody.value[0] &&\r\n response.errorResponseBody.value[0].Code));\r\n this.toggleNextButton(false);\r\n return false;\r\n }).finally(withUiBlock($(`.${rootContainerClassName}`), this.i18n.getString(_TL_('Loading'))));\r\n }\r\n this.toggleNextButton(false);\r\n return new Promise(resolve => resolve(false));\r\n };\r\n\r\n toggleNextButton = (state) => {\r\n this.setState({\r\n isNextButtonEnabled: state,\r\n });\r\n };\r\n\r\n render() {\r\n const {\r\n contextValues, classes, stepTitle, getActionBarItems,\r\n } = this.props;\r\n\r\n const { hasAccountsWithNoCampaigns } = contextValues;\r\n\r\n return (\r\n \r\n {contextValues.deps.newI18n.getString(_TL_('Choose the items and options in the following categories to customize your import.'))}\r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nDoubleListBoxInternal.defaultProps = {\r\n defaultSelectedItem: [],\r\n searchBoxPlaceholderText: '',\r\n searchBoxAriaLabelText: '',\r\n isSingleSelectionEnabled: false,\r\n isRadioSelectionEnabled: false,\r\n};\r\n\r\nDoubleListBoxInternal.propTypes = {\r\n classes: PropTypes.shape({}).isRequired,\r\n items: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\r\n leftColumns: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\r\n rightColumns: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\r\n onSelectedItemsChange: PropTypes.func.isRequired,\r\n i18n: PropTypes.shape({}).isRequired,\r\n defaultSelectedItem: PropTypes.arrayOf(PropTypes.shape({})),\r\n searchBoxPlaceholderText: PropTypes.string,\r\n searchBoxAriaLabelText: PropTypes.string,\r\n maxSelectedItems: PropTypes.number.isRequired,\r\n sortableColumns: PropTypes.arrayOf(PropTypes.string).isRequired,\r\n primaryField: PropTypes.string.isRequired,\r\n searchableField: PropTypes.string.isRequired,\r\n isSingleSelectionEnabled: PropTypes.bool,\r\n isRadioSelectionEnabled: PropTypes.bool,\r\n};\r\n\r\nexport const DoubleListBox = withDefaultStyles(DoubleListBoxInternal, getSelectionBoxStyles);\r\n","export const getSelectionBoxStyles = (__, { palette = {} }) => ({\r\n doubleListBox: {\r\n minWidth: '800px',\r\n '& .ms-DetailsRow': {\r\n cursor: 'pointer',\r\n },\r\n },\r\n selectionBox: {\r\n border: `1px solid ${palette.neutralTertiary}`,\r\n height: 400,\r\n float: 'left',\r\n },\r\n singleBox: {\r\n width: '80%',\r\n },\r\n doubleBox: {\r\n width: '69%',\r\n },\r\n searchBar: {\r\n height: 48,\r\n },\r\n buttonAsLink: {\r\n border: 'none',\r\n backgroundColor: 'inherit',\r\n color: palette.themePrimary,\r\n },\r\n selectedStatus: {\r\n height: 35,\r\n display: 'flex',\r\n alignItems: 'center',\r\n width: 168,\r\n fontSize: '14px',\r\n fontWeight: '600',\r\n marginRight: '5px',\r\n marginLeft: '5px',\r\n },\r\n addButton: {\r\n height: 16,\r\n width: 31,\r\n },\r\n radioButtonOn: {\r\n color: palette.themePrimary,\r\n },\r\n radioButtonOff: {\r\n color: palette.neutralPrimary,\r\n },\r\n radioButtonDisabled: {\r\n color: palette.neutralTertiaryAlt,\r\n },\r\n accountSelector: {\r\n borderTop: `1px solid ${palette.neutralTertiary}`,\r\n overflowX: 'auto',\r\n overflowY: 'auto',\r\n maxHeight: 350,\r\n '& .ms-DetailsHeader': {\r\n '& .account-selector-add-column-header': {\r\n opacity: 0,\r\n },\r\n },\r\n '& .ms-DetailsList': {\r\n overflowX: 'visible',\r\n },\r\n },\r\n selectedRow: {\r\n backgroundColor: palette.neutralLight,\r\n },\r\n gridRow: {\r\n fontSize: '14px',\r\n height: 36,\r\n },\r\n rightBox: {\r\n width: '30%',\r\n height: 400,\r\n border: `1px solid ${palette.neutralTertiary}`,\r\n float: 'right',\r\n },\r\n removeAllLink: {\r\n margin: 'auto',\r\n marginRight: '0px',\r\n width: '120px',\r\n },\r\n removeButton: {\r\n height: '20px',\r\n width: '120px',\r\n },\r\n});\r\n","import classNames from 'classnames';\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { ChoiceGroup } from '@bingads-webui-react/fabric-with-signal';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { onWrapDefaultLabelWithHelpIconRenderer } from '../base-component/label-with-helpicon';\r\n\r\nconst getCurrencyConvertorStyles = () => ({\r\n currencyConvertor: {\r\n height: 300,\r\n marginTop: '15px',\r\n },\r\n currencyInfo: {\r\n marginTop: '10px',\r\n },\r\n currencyLabel: {\r\n marginBottom: '5px',\r\n fontWeight: '600',\r\n },\r\n currencyValue: {\r\n marginBottom: '5px',\r\n },\r\n currencyRadioButtons: {\r\n marginTop: '30px',\r\n width: 600,\r\n '& .ms-ChoiceField-field': {\r\n padding: 0,\r\n fontWeight: 'normal',\r\n },\r\n },\r\n});\r\n\r\nexport const ConversionType = {\r\n convert: 0,\r\n doNotConvert: 1,\r\n};\r\n\r\nconst CurrencyValueView = (props) => {\r\n const {\r\n classes,\r\n label,\r\n currency,\r\n } = props;\r\n\r\n return (\r\n \r\n
\r\n { !isSingleSelectionEnabled &&\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n }\r\n \r\n
\r\n \r\n {\r\n this.state.selectedItems.length === 0\r\n ? {i18n.getString(_TL_('None selected'))} \r\n : {i18n.getString(_TL_('Selected:'))} \r\n }\r\n
\r\n {\r\n this.state.selectedItems.length !== 0 &&\r\n (\r\n \r\n
\r\n )\r\n }\r\n \r\n {this.state.selectedItems.length > 1 &&\r\n (
\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nCurrencyValueView.propTypes = {\r\n classes: PropTypes.shape({}).isRequired,\r\n label: PropTypes.string.isRequired,\r\n currency: PropTypes.string.isRequired,\r\n};\r\n\r\nconst CurrencyValueViewMemo = React.memo(CurrencyValueView);\r\n\r\nclass CurrencyConvertorInternal extends React.PureComponent {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n convert: props.autoConvertCurrencyEnabled ?\r\n ConversionType.convert : ConversionType.doNotConvert,\r\n };\r\n }\r\n\r\n onChange = (e, option) => {\r\n const { key } = option;\r\n const { onChange } = this.props;\r\n this.setState({\r\n convert: key,\r\n }, () => (\r\n onChange(this.state.convert)\r\n ));\r\n }\r\n\r\n getOptions = i18n => ([{\r\n key: ConversionType.convert,\r\n text: i18n.getString(_TL_('Convert to my Microsoft Advertising currency upon import.')),\r\n ariaLabel: i18n.getString(_TL_('Convert to my Microsoft Advertising currency upon import.')),\r\n }, {\r\n key: ConversionType.doNotConvert,\r\n text: i18n.getString(_TL_(\"Don't convert. I'll manually adjust my bids and budgets.\")),\r\n ariaLabel: i18n.getString(_TL_(\"Don't convert. I'll manually adjust my bids and budgets.\")),\r\n onRenderField: onWrapDefaultLabelWithHelpIconRenderer,\r\n helpId: 'Pop_BA_ImportRF_CurrencyDoNotConvert',\r\n helpAriaLabel: i18n.getString(_TL_('Click to learn more about {{item}}', { item: i18n.getString(_TL_(\"Don't convert. I'll manually adjust my bids and budgets.\")) })),\r\n }])\r\n\r\n render() {\r\n const {\r\n i18n,\r\n adsCurrency,\r\n microsoftAdsCurrency,\r\n classes,\r\n description,\r\n importAccountCurrencyTitle,\r\n } = this.props;\r\n\r\n return (\r\n {label}
\r\n {currency}
\r\n \r\n {i18n.getString(description)}\r\n
\r\n );\r\n }\r\n}\r\n\r\nCurrencyConvertorInternal.propTypes = {\r\n adsCurrency: PropTypes.string.isRequired,\r\n microsoftAdsCurrency: PropTypes.string.isRequired,\r\n i18n: PropTypes.shape({}).isRequired,\r\n onChange: PropTypes.func.isRequired,\r\n classes: PropTypes.shape({}).isRequired,\r\n autoConvertCurrencyEnabled: PropTypes.bool.isRequired,\r\n description: PropTypes.string.isRequired,\r\n importAccountCurrencyTitle: PropTypes.string.isRequired,\r\n};\r\n\r\nexport const CurrencyConvertor = withDefaultStyles(\r\n CurrencyConvertorInternal,\r\n getCurrencyConvertorStyles\r\n);\r\n","import React, { useContext, useState } from 'react';\r\nimport $ from 'jquery';\r\nimport { withUiBlock } from '@bingads-webui/uiblocker';\r\nimport { ActivityContext } from '@bingads-webui-react/hoc-with-signal';\r\n\r\nimport { ImportCoreContext } from '../base-import-context';\r\n\r\nexport const withAccountSelectionStepPrefetch = (PreExecuteStep, {\r\n getExistingAccounts,\r\n getExistingSelectedAccount,\r\n getSelectedAccounts,\r\n getNewStateAfterAccountsLoaded,\r\n fetchAccounts,\r\n handleError,\r\n}) => {\r\n const AccountSelectionPrefetch = (props) => {\r\n const importCoreContext = useContext(ImportCoreContext);\r\n const activityContext = useContext(ActivityContext);\r\n\r\n const {\r\n repository,\r\n patchState,\r\n handleGenericError,\r\n deps,\r\n goToPrevStep,\r\n goToNextStep,\r\n autoConvertCurrencyEnabled = true,\r\n initialSettings = {},\r\n skipAccountSelectionDueToDirectJump = false,\r\n keepAccountSelectionDueToDifferentEmail = false,\r\n } = importCoreContext;\r\n\r\n const existingAccounts = getExistingAccounts(importCoreContext);\r\n const existingSelectedAccounts = getExistingSelectedAccount(importCoreContext);\r\n\r\n const {\r\n // eslint-disable-next-line react/prop-types\r\n prevStepNameIfPrefetchFail,\r\n // eslint-disable-next-line react/prop-types\r\n nextStepNameIfPrefetchOnlyOneAccount,\r\n // eslint-disable-next-line react/prop-types\r\n rootContainerClassName,\r\n } = props;\r\n\r\n const {\r\n perfMarker,\r\n newI18n,\r\n } = deps;\r\n\r\n const [loading, setLoading] = useState(true); // to notify api is loading.\r\n const [dispatchedOdataCall, setDispatchedOdataCall] = useState(false);\r\n\r\n if (loading && !dispatchedOdataCall && !existingAccounts) {\r\n setDispatchedOdataCall(true);\r\n const accountChooserPerfMarker = perfMarker.createChild('Smart_Import_AccountChoose_Step');\r\n accountChooserPerfMarker.willInit();\r\n fetchAccounts(repository)\r\n .then((accounts) => {\r\n // For Edit import scenario.\r\n // selectedAccounts will have previously selected accounts.\r\n let selectedAccounts = getSelectedAccounts(accounts, initialSettings);\r\n\r\n // if no account throw error\r\n if (accounts.length === 0) {\r\n const noAccountError = {\r\n body: [{\r\n Code: 'ImportSyncNoAdsAccounts',\r\n Message: null,\r\n Property: null,\r\n }],\r\n };\r\n throw noAccountError;\r\n }\r\n\r\n // if only one account skip the step and go to start import.\r\n // if keepAccountSelectionDueToDifferentEmail is true, then we don't select account by default.\r\n if (accounts.length === 1 && !keepAccountSelectionDueToDifferentEmail) {\r\n selectedAccounts = accounts;\r\n }\r\n\r\n patchState(getNewStateAfterAccountsLoaded(accounts, selectedAccounts, {\r\n accountChooserPerfMarker,\r\n autoConvertCurrencyEnabled,\r\n loginErrorMessage: null,\r\n selectedAccounts,\r\n }));\r\n\r\n // if only one account skip the step and go to start import.\r\n // skip this code if this is a jump to step scenario\r\n // ( this impacts if the account only has one google account)-\r\n // - we do another goToNextStep here.\r\n // if keepAccountSelectionDueToDifferentEmail is true, then we won't skip account selection step.\r\n if (accounts.length === 1 &&\r\n !skipAccountSelectionDueToDirectJump &&\r\n !keepAccountSelectionDueToDifferentEmail\r\n ) {\r\n if (activityContext) {\r\n activityContext.signal('AccountGridLoaded'); // indicate account grid was loaded. but we skipped over to start import step.\r\n }\r\n accountChooserPerfMarker.done();\r\n goToNextStep(nextStepNameIfPrefetchOnlyOneAccount);\r\n }\r\n\r\n setLoading(false);\r\n })\r\n .catch((err) => {\r\n // handle api error and go back to previous step.\r\n handleError({\r\n err, newI18n, repository, handleGenericError, patchState,\r\n });\r\n repository.logout();\r\n goToPrevStep(prevStepNameIfPrefetchFail);\r\n })\r\n .finally(withUiBlock($(`.${rootContainerClassName}`), newI18n.getString(_TL_('Loading'))));\r\n } else if (existingAccounts && !dispatchedOdataCall) {\r\n // display googleAccounts from cache rather than calling API again.\r\n return (\r\n
\r\n \r\n
\r\n \r\n {\r\n loading\r\n ? \r\n :
\r\n );\r\n };\r\n\r\n return React.memo(AccountSelectionPrefetch);\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport _ from 'underscore';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { withActivityContext } from '@bingads-webui-react/hoc-with-signal';\r\nimport { Alert } from '@bingads-webui-react/alert';\r\nimport { MessageBar } from '@fluentui/react';\r\n\r\nimport { DoubleListBox } from '../double-list-box';\r\nimport {\r\n CurrencyConvertor,\r\n ConversionType,\r\n} from '../currency-conversion-view';\r\nimport { getAccountSelectionStepStyles } from './account-selection-styles';\r\n\r\nexport class AccountSelectorInternal extends React.PureComponent {\r\n constructor(props) {\r\n super(props);\r\n this.newI18n = props.context.deps.newI18n;\r\n this.patchState = props.context.patchState;\r\n this.getAccountListColumns = props.getAccountListColumns.bind(this);\r\n this.getSelectedListColumns = props.getSelectedListColumns.bind(this);\r\n\r\n this.state = {\r\n selectedAccounts: _.size(props.selectedAccounts) ?\r\n props.selectedAccounts : [],\r\n autoConvertCurrencyEnabled: _.isUndefined(props.context.autoConvertCurrencyEnabled) ?\r\n true : props.context.autoConvertCurrencyEnabled,\r\n leftColumns: this.getAccountListColumns(this.newI18n),\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n const { context } = this.props;\r\n const { accountChooserPerfMarker } = context;\r\n\r\n if (accountChooserPerfMarker) {\r\n accountChooserPerfMarker.done();\r\n }\r\n\r\n if (this.props.activity) {\r\n this.props.activity.signal('AccountGridLoaded');\r\n this.props.activity.signal(`AccountGridLoaded with count: ${this.props.accounts.length}`);\r\n }\r\n }\r\n\r\n onSelectedItemsChange = (selectedItems) => {\r\n const { clearError } = this.props;\r\n\r\n this.setState({\r\n selectedAccounts: selectedItems || [],\r\n }, () => {\r\n // if selected items change, we will set previousImportOptions as null\r\n // and we will call api to get it\r\n this.patchState({\r\n selectedAccounts: this.state.selectedAccounts,\r\n previousImportOptions: null,\r\n importOptions: null,\r\n defaultImportOptions: null,\r\n });\r\n clearError();\r\n });\r\n };\r\n\r\n onCurrencyOptionChange = (chosenOption) => {\r\n const selectedOption = chosenOption;\r\n this.setState({\r\n autoConvertCurrencyEnabled: selectedOption === ConversionType.convert, // eslint-disable-line\r\n }, () => {\r\n this.patchState({ autoConvertCurrencyEnabled: this.state.autoConvertCurrencyEnabled });\r\n });\r\n };\r\n\r\n render() {\r\n const {\r\n context,\r\n classes,\r\n rootClassName,\r\n isCurrencyConvertorDisabled,\r\n maxSelectedItems,\r\n accounts,\r\n sortableColumns,\r\n primaryField,\r\n description,\r\n currencyViewDescription,\r\n importAccountCurrencyTitle,\r\n searchableField,\r\n isSingleSelectionEnabled,\r\n isRadioSelectionEnabled,\r\n } = this.props;\r\n const { permissionFactory, isOneClickTypeSelected, repository } = context;\r\n\r\n if (!accounts) {\r\n // return empty div until googleAccounts call has finished.\r\n return ;\r\n }\r\n\r\n // for sign up flow, should never show currency converter\r\n // otherwise, should judge from selected google account and bing account currency\r\n // if isCurrencyConvertorRelocateEnabled, will show currency convertor in import option step\r\n let shouldShowCurrencyConvertor = false;\r\n let microsoftAdsCurrency;\r\n const adsCurrency = !_.isEmpty(this.state.selectedAccounts[0]) && this.state.selectedAccounts[0].Currency;\r\n if (!permissionFactory.isCurrencyConvertorRelocateEnabled() && !isCurrencyConvertorDisabled) {\r\n microsoftAdsCurrency = context.deps.config.get('AccountCurrencyCode');\r\n shouldShowCurrencyConvertor = !_.isEmpty(this.state.selectedAccounts[0]) &&\r\n (this.state.selectedAccounts[0].Currency !== microsoftAdsCurrency);\r\n }\r\n\r\n const isImportOneClickMultiAdAccountEnabled = repository.permissions && repository.permissions.dynamic && repository.permissions.dynamic.ImportOneClickMultiAdAccount;\r\n\r\n if (this.props.activity) {\r\n this.props.activity.signal(`ImportOneClickMultiAdAccount: ${isImportOneClickMultiAdAccountEnabled}`);\r\n }\r\n\r\n // show alert if one click import is selected and user has multiple google accounts\r\n const showOneClickAlert = permissionFactory.IsOneClickImportEnabled() && isOneClickTypeSelected && accounts.length > 1 && !isImportOneClickMultiAdAccountEnabled;\r\n if (this.props.activity && isOneClickTypeSelected && accounts.length > 1) {\r\n this.props.activity.signal('OneClick.custom.account');\r\n }\r\n\r\n return (\r\n \r\n \r\n {this.newI18n.getString(this.props.messageBarInformation)}\r\n \r\n }\r\n
\r\n );\r\n }\r\n}\r\n\r\nAccountSelectorInternal.defaultProps = {\r\n selectedAccounts: [],\r\n activity: null,\r\n accounts: null,\r\n};\r\n\r\nAccountSelectorInternal.propTypes = {\r\n context: PropTypes.shape({\r\n deps: PropTypes.shape({\r\n newI18n: PropTypes.shape({}),\r\n }),\r\n patchState: PropTypes.func.isRequired,\r\n autoConvertCurrencyEnabled: PropTypes.bool,\r\n selectedAccounts: PropTypes.array,\r\n accounts: PropTypes.arrayOf(PropTypes.shape({})),\r\n permissionFactory: PropTypes.shape({}),\r\n }).isRequired,\r\n // in prefetch HOC, this prop can be null,\r\n // to avoid error in UT/CT, we need to make it optional\r\n accounts: PropTypes.arrayOf(PropTypes.shape({})),\r\n clearError: PropTypes.func.isRequired,\r\n classes: PropTypes.shape({}).isRequired,\r\n rootClassName: PropTypes.string.isRequired,\r\n activity: PropTypes.shape({\r\n signal: PropTypes.func,\r\n }),\r\n selectedAccounts: PropTypes.arrayOf(PropTypes.shape({})),\r\n // eslint-disable-next-line react/no-unused-prop-types\r\n prevStepNameIfPrefetchFail: PropTypes.string.isRequired,\r\n // eslint-disable-next-line react/no-unused-prop-types\r\n nextStepNameIfPrefetchOnlyOneAccount: PropTypes.string.isRequired,\r\n // eslint-disable-next-line react/no-unused-prop-types\r\n rootContainerClassName: PropTypes.string.isRequired,\r\n getAccountListColumns: PropTypes.func.isRequired,\r\n getSelectedListColumns: PropTypes.func.isRequired,\r\n isCurrencyConvertorDisabled: PropTypes.bool,\r\n maxSelectedItems: PropTypes.number,\r\n sortableColumns: PropTypes.arrayOf(PropTypes.string).isRequired,\r\n primaryField: PropTypes.string.isRequired,\r\n description: PropTypes.string.isRequired,\r\n currencyViewDescription: PropTypes.string.isRequired,\r\n messageBarInformation: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.shape({})]),\r\n importAccountCurrencyTitle: PropTypes.string.isRequired,\r\n searchableField: PropTypes.string.isRequired,\r\n isSingleSelectionEnabled: PropTypes.bool,\r\n isRadioSelectionEnabled: PropTypes.bool,\r\n};\r\n\r\nAccountSelectorInternal.defaultProps = {\r\n isCurrencyConvertorDisabled: false,\r\n maxSelectedItems: 1,\r\n isSingleSelectionEnabled: false,\r\n isRadioSelectionEnabled: false,\r\n messageBarInformation: undefined,\r\n};\r\n\r\nexport const AccountSelector = withDefaultStyles(\r\n withActivityContext(AccountSelectorInternal),\r\n getAccountSelectionStepStyles\r\n);\r\n\r\nexport { withAccountSelectionStepPrefetch } from './account-selection-prefetch';\r\n","export const getAccountSelectionStepStyles = () => ({\r\n doublListBox: {\r\n height: 400,\r\n },\r\n acocuntSelectionStep: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n height: 'auto',\r\n gap: '10px',\r\n },\r\n});\r\n","import _ from 'underscore';\r\nimport React, { useCallback } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { AccountSelector } from '../../account-selector';\r\nimport {\r\n ADD_COLUMN,\r\n REMOVE_COLUMN,\r\n RADIO_BUTTON,\r\n} from '../../double-list-box';\r\nimport { ImportMode } from '../../import-constants';\r\n\r\nconst MAX_MULTI_ACCOUNT_GOOGLE_ACCOUNTS = 5;\r\nconst SINGLE_ACCOUNT_GOOGLE_ACCOUNTS = 1;\r\nconst CURRENCY_USD = 'USD';\r\n\r\nconst getStyles = () => ({\r\n accountSelectorStepContainer: {\r\n // hide the column title, but keep the text for accessibility\r\n '& .google-account-selector-add-column': {\r\n opacity: 0,\r\n },\r\n },\r\n});\r\n\r\nconst getSelectedListColumns = i18n => ([{\r\n key: 'account-name',\r\n name: i18n.getString(_TL_('Account name')),\r\n fieldName: 'AccountName',\r\n backupFieldName: 'CustomerId',\r\n}, {\r\n key: REMOVE_COLUMN,\r\n name: '',\r\n fieldName: REMOVE_COLUMN,\r\n}]);\r\n\r\nconst getCommonAccountListColumns = i18n => ([{\r\n key: 'account-name',\r\n name: i18n.getString(_TL_('Google Ads account name')),\r\n fieldName: 'AccountName',\r\n backupFieldName: 'CustomerId',\r\n minWidth: 180,\r\n maxWidth: 600,\r\n isResizable: true,\r\n}, {\r\n key: 'customer-id',\r\n name: i18n.getString(_TL_('Google Ads account ID')),\r\n fieldName: 'CustomerId',\r\n minWidth: 170,\r\n maxWidth: 170,\r\n isResizable: false,\r\n}, {\r\n key: 'currency',\r\n name: i18n.getString(_TL_('Google Ads currency')),\r\n fieldName: 'Currency',\r\n minWidth: 140,\r\n maxWidth: 140,\r\n isResizable: false,\r\n}]);\r\n\r\nexport function SmartGoogleImportAccountSelector(props) {\r\n const { isRadioSelectionEnabled } = props;\r\n const classes = useDefaultStyles(getStyles);\r\n\r\n const getAccountListColumns = useCallback((i18n) => {\r\n if (props.context.isEscImport) {\r\n return [{\r\n key: RADIO_BUTTON,\r\n name: '',\r\n headerClassName: 'google-account-radio-button',\r\n fieldName: RADIO_BUTTON,\r\n minWidth: 28,\r\n maxWidth: 28,\r\n }, {\r\n key: 'account-name',\r\n name: i18n.getString(_TL_('Google Ads account name')),\r\n fieldName: 'AccountName',\r\n backupFieldName: 'CustomerId',\r\n minWidth: 100,\r\n maxWidth: 600,\r\n isResizable: true,\r\n }, {\r\n key: 'customer-id',\r\n name: i18n.getString(_TL_('Google Ads account ID')),\r\n fieldName: 'CustomerId',\r\n minWidth: 170,\r\n maxWidth: 170,\r\n isResizable: false,\r\n }, {\r\n key: 'currency',\r\n name: i18n.getString(_TL_('Google Ads currency')),\r\n fieldName: 'Currency',\r\n minWidth: 155,\r\n maxWidth: 155,\r\n isResizable: false,\r\n }, {\r\n key: 'smart-campaign-count',\r\n name: i18n.getString(_TL_('Number of smart campaigns')),\r\n fieldName: 'SmartCampaignCount',\r\n minWidth: 170,\r\n maxWidth: 170,\r\n }];\r\n }\r\n\r\n if (isRadioSelectionEnabled) {\r\n return [{\r\n key: RADIO_BUTTON,\r\n name: '',\r\n headerClassName: 'google-account-radio-button',\r\n fieldName: RADIO_BUTTON,\r\n minWidth: 28,\r\n maxWidth: 28,\r\n }, ...getCommonAccountListColumns(i18n)];\r\n }\r\n\r\n return [...getCommonAccountListColumns(i18n), {\r\n key: ADD_COLUMN,\r\n name: i18n.getString(_TL_('Add Button')),\r\n headerClassName: 'google-account-selector-add-column',\r\n fieldName: ADD_COLUMN,\r\n minWidth: 70,\r\n maxWidth: 70,\r\n }];\r\n }, [isRadioSelectionEnabled, props.context.isEscImport]);\r\n\r\n const {\r\n permissionFactory,\r\n getImportMode,\r\n googleAccount,\r\n isEscImport,\r\n } = props.context;\r\n\r\n // will remove this condition later once we want to enable multi-single conversion scenarios.\r\n const maxSelectedItems =\r\n (permissionFactory.isImportModeSwitchEnabled() && getImportMode() === ImportMode.Multi) ?\r\n MAX_MULTI_ACCOUNT_GOOGLE_ACCOUNTS :\r\n SINGLE_ACCOUNT_GOOGLE_ACCOUNTS;\r\n\r\n const selectedGoogleAccountCurrency = _.get(props, ['selectedAccounts', 0, 'Currency']);\r\n const isShowMessageBar = isEscImport && _.isString(selectedGoogleAccountCurrency) && selectedGoogleAccountCurrency !== CURRENCY_USD;\r\n let description = _TL_('Select a Google Ads accounts that you want to import data from.');\r\n if (isEscImport) {\r\n description = _TL_('Your Google Ads account contains multiple accounts. Please select one account to import.');\r\n }\r\n\r\n return (\r\n \r\n {isImportOneClickMultiAdAccountEnabled && isOneClickTypeSelected ? this.newI18n.getString(_TL_(\"Choose which Google Ads account(s) with which you'd like to set up your recurring import. Once you choose an account/your accounts, we'll do the rest of the setup work for you.\"))\r\n : this.newI18n.getString(description, { count: maxSelectedItems })}\r\n
\r\n\r\n {showOneClickAlert &&\r\n \r\n \r\n {`${this.newI18n.getString(_TL_(\"Since you have multiple Google Ads accounts, we can't continue with Quick import. You'll need to select an account first.\"))} `}\r\n \r\n }\r\n level=\"Warning\"\r\n icon={()}\r\n dismissible={false}\r\n />\r\n
\r\n }\r\n\r\n \r\n
\r\n\r\n {\r\n shouldShowCurrencyConvertor &&\r\n \r\n
\r\n }\r\n\r\n {\r\n !!this.props.messageBarInformation &&\r\n \r\n
\r\n );\r\n}\r\n\r\nSmartGoogleImportAccountSelector.propTypes = {\r\n context: PropTypes.shape({\r\n permissionFactory: PropTypes.shape({\r\n isImportModeSwitchEnabled: PropTypes.func.isRequired,\r\n }).isRequired,\r\n getImportMode: PropTypes.func.isRequired,\r\n googleAccount: PropTypes.shape({}).isRequired,\r\n isEscImport: PropTypes.bool.isRequired,\r\n }).isRequired,\r\n isRadioSelectionEnabled: PropTypes.bool,\r\n};\r\n\r\nSmartGoogleImportAccountSelector.defaultProps = {\r\n isRadioSelectionEnabled: false,\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport Promise from 'bluebird';\r\nimport $ from 'jquery';\r\nimport { Activity, withActivityContext } from '@bingads-webui-react/hoc-with-signal';\r\nimport { Alert } from '@bingads-webui-react/alert';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { withUiBlock } from '@bingads-webui/uiblocker';\r\nimport { HelpLink } from '@bingads-webui-react/help-link';\r\nimport { StepContainer } from '../../step-container/step-container';\r\nimport { ImportCoreContext } from '../../base-import-context';\r\nimport { ErrorContainer } from '../../error-container';\r\nimport { ImportMode } from '../../import-constants';\r\nimport {\r\n startAutoImportTask,\r\n getDefaultImportName,\r\n} from '../../index';\r\n\r\nimport { getActionBarItems } from './action-bar-config';\r\nimport { SmartGoogleImportAccountSelector as AccountSelector } from './account-selector';\r\n\r\nconst getStyles = () => ({\r\n alertContainer: {\r\n opacity: 1,\r\n marginTop: 10,\r\n },\r\n accountSelectorContainer: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n height: '100%',\r\n },\r\n});\r\n\r\nclass GoogleAccountStepInternal extends React.PureComponent {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n containPerfMaxCampaignWithMerchant: false,\r\n containPerfMaxCampaignWithoutMerchant: false,\r\n error: false,\r\n errorMsg: '',\r\n };\r\n this.WrappedAccountSelector =\r\n props.stepPrefetchHoc ?\r\n props.stepPrefetchHoc(AccountSelector) :\r\n AccountSelector;\r\n }\r\n\r\n componentDidMount() {\r\n const {\r\n selectedAccounts, permissionFactory,\r\n } = this.props.contextValues;\r\n\r\n if (permissionFactory.permissions\r\n && permissionFactory.permissions.dynamic\r\n && permissionFactory.permissions.dynamic.ImportPerformanceMaxCampaignAsSmartShopping\r\n && selectedAccounts) {\r\n this.getAccountCampaignType();\r\n }\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n const {\r\n accountsPageError, selectedAccounts, permissionFactory,\r\n } = this.props.contextValues;\r\n\r\n if (accountsPageError) {\r\n this.setError(accountsPageError);\r\n }\r\n\r\n if (permissionFactory.permissions\r\n && permissionFactory.permissions.dynamic\r\n && permissionFactory.permissions.dynamic.ImportPerformanceMaxCampaignAsSmartShopping\r\n && selectedAccounts !== prevProps.contextValues.selectedAccounts) {\r\n this.getAccountCampaignType();\r\n }\r\n }\r\n\r\n getAccountCampaignType = () => {\r\n const {\r\n selectedAccounts,\r\n repository,\r\n deps,\r\n isEscImport,\r\n } = this.props.contextValues;\r\n\r\n const { newI18n } = deps;\r\n\r\n if (!_.isEmpty(selectedAccounts) && !isEscImport) {\r\n const promiseObject = {};\r\n selectedAccounts.forEach((selectedAccount) => {\r\n promiseObject[selectedAccount.CustomerId] = repository.prepareForCampaignSelectionStep(selectedAccount.CustomerId, null);\r\n });\r\n Promise.props(promiseObject)\r\n .then((results) => {\r\n let findPMaxWithMerchant = false;\r\n let findPMaxWithoutMerchant = false;\r\n _.find(results, (customerId) => {\r\n if (findPMaxWithMerchant && findPMaxWithoutMerchant) {\r\n return false;\r\n }\r\n const cams = customerId.googleCampaigns;\r\n for (let i = 0; i < cams.length; i += 1) {\r\n if (cams[i].TypeId === 7) {\r\n if (cams[i].MerchantId) {\r\n findPMaxWithMerchant = true;\r\n } else {\r\n findPMaxWithoutMerchant = true;\r\n }\r\n }\r\n }\r\n return true;\r\n });\r\n this.setState({\r\n containPerfMaxCampaignWithMerchant: findPMaxWithMerchant,\r\n containPerfMaxCampaignWithoutMerchant: findPMaxWithoutMerchant,\r\n });\r\n })\r\n .finally(withUiBlock($(`.${this.props.rootContainerClassName}`), newI18n.getString(_TL_('Loading'))));\r\n } else if (this.state.containPerfMaxCampaignWithMerchant || this.state.containPerfMaxCampaignWithoutMerchant) {\r\n this.setState({\r\n containPerfMaxCampaignWithMerchant: false,\r\n containPerfMaxCampaignWithoutMerchant: false,\r\n });\r\n }\r\n };\r\n\r\n setError = msg => (\r\n this.setState({\r\n error: true,\r\n errorMsg: msg,\r\n })\r\n );\r\n\r\n clearError = () => (\r\n this.setState({\r\n error: false,\r\n })\r\n );\r\n\r\n validate = () => {\r\n const {\r\n contextValues,\r\n } = this.props;\r\n\r\n const {\r\n deps,\r\n selectedAccounts,\r\n } = contextValues;\r\n\r\n const i18n = deps.newI18n;\r\n\r\n if (_.isEmpty(selectedAccounts) || selectedAccounts.length === 0) {\r\n this.setError(i18n.getString(_TL_('Please choose a Google Ads account')));\r\n return new Promise(resolve => resolve(false));\r\n }\r\n\r\n return new Promise(resolve => resolve(true));\r\n };\r\n\r\n shouldGoToMerchantCenterStoreMappingStep = () => {\r\n const {\r\n contextValues,\r\n } = this.props;\r\n\r\n const {\r\n accountToCampaignsOptionsMapping = {},\r\n selectedAccounts = [],\r\n deps,\r\n permissionFactory,\r\n getImportMode,\r\n } = contextValues;\r\n\r\n const {\r\n toggleMerchantCenterStoreMappingStep,\r\n } = deps;\r\n\r\n // change this when we implement multi account google import.\r\n // need to validate if this is a multiaccount import. if So we should return false,\r\n // since we dont plan on showing this step for multiaccount yet.\r\n if (getImportMode() === ImportMode.Multi || selectedAccounts.length !== 1) {\r\n return false;\r\n }\r\n\r\n const customerId = selectedAccounts[0].CustomerId;\r\n\r\n // we use this function only when we have already cached the response for the account.\r\n if (!_.has(accountToCampaignsOptionsMapping, customerId)) {\r\n return false;\r\n }\r\n\r\n const accountData = accountToCampaignsOptionsMapping[customerId];\r\n\r\n const {\r\n campaignsWithMerchantId = [],\r\n } = accountData;\r\n\r\n if (permissionFactory.isMerchantCenterStoreMappingStepEnabled(campaignsWithMerchantId)) {\r\n toggleMerchantCenterStoreMappingStep(true);\r\n return true;\r\n }\r\n\r\n toggleMerchantCenterStoreMappingStep(false);\r\n return false;\r\n };\r\n\r\n startImporting = () => {\r\n const {\r\n contextValues,\r\n getNextStepName,\r\n rootContainerClassName,\r\n activity,\r\n } = this.props;\r\n const { deps, patchState, showErrorMessage } = contextValues;\r\n const importName = getDefaultImportName('Auto', deps);\r\n const accountTimeZone = deps.config.get('AccountTimeZone');\r\n\r\n if (activity) {\r\n activity.signal('CreateAutoImportTask');\r\n }\r\n\r\n // will patch more state for import summary step\r\n patchState({\r\n IsSmartImport: true,\r\n isRunNowWithScheduledImport: true,\r\n IsSmartCampaignOnly: true,\r\n Name: importName,\r\n IsAutoFrequency: true,\r\n timeZoneId: accountTimeZone,\r\n });\r\n\r\n return startAutoImportTask({\r\n contextValues,\r\n setImportStatus: _.noop,\r\n activity,\r\n rootContainerClassName,\r\n accountTimeZone,\r\n importName,\r\n showErrorMessage,\r\n getNextStepName,\r\n IsSmartCampaignOnly: true,\r\n });\r\n };\r\n\r\n render() {\r\n const {\r\n contextValues,\r\n stepTitle,\r\n getPrevStepName,\r\n getNextStepName,\r\n prevStepNameIfPrefetchFail,\r\n nextStepNameIfPrefetchOnlyOneAccount,\r\n rootContainerClassName,\r\n isCurrencyConvertorDisabled,\r\n showCancelButton,\r\n StepContentContainer,\r\n additionalActionBarComponent,\r\n isRadioSelectionEnabled,\r\n } = this.props;\r\n\r\n const { WrappedAccountSelector } = this;\r\n const {\r\n deps,\r\n accountsPageError,\r\n getImportMode,\r\n selectedAccounts,\r\n permissionFactory,\r\n isEscImport,\r\n isOneClickTypeSelected,\r\n repository,\r\n } = contextValues;\r\n\r\n const { newI18n } = deps;\r\n\r\n const isImportOneClickMultiAdAccountEnabled = repository.permissions && repository.permissions.dynamic && repository.permissions.dynamic.ImportOneClickMultiAdAccount;\r\n\r\n const nextButtonDisabled = _.isEmpty(selectedAccounts);\r\n\r\n const getNonRetailPMaxImportBanner = () => {\r\n if (this.state.containPerfMaxCampaignWithMerchant && this.state.containPerfMaxCampaignWithoutMerchant) {\r\n return newI18n.getString(_TL_(\"We'll import your Performance Max campaign as either smart shopping campaigns or search campaigns.\"));\r\n } else if (this.state.containPerfMaxCampaignWithMerchant) {\r\n return newI18n.getString(_TL_(\"We'll import your Performance Max campaign as smart shopping campaigns.\"));\r\n }\r\n return newI18n.getString(_TL_(\"We'll import your Performance Max campaign as search campaigns.\"));\r\n };\r\n\r\n const alertMessage = permissionFactory.permissions\r\n && permissionFactory.permissions.dynamic\r\n && permissionFactory.permissions.dynamic.ImportNonRetailPMaxCampaignAsDynamicSearch ?\r\n getNonRetailPMaxImportBanner() :\r\n newI18n.getString(_TL_(\"We'll import your Performance Max campaign as smart shopping campaigns.\"));\r\n\r\n const isEnabledPmaxCampaign = permissionFactory.permissions\r\n && permissionFactory.permissions.dynamic\r\n && permissionFactory.permissions.dynamic.PerformanceMaxCampaigns;\r\n\r\n const isShowAlert = !isEnabledPmaxCampaign\r\n && (this.state.containPerfMaxCampaignWithMerchant\r\n || this.state.containPerfMaxCampaignWithoutMerchant);\r\n\r\n return (\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nGoogleAccountStepInternal.propTypes = {\r\n contextValues: PropTypes.shape({\r\n isEscImport: PropTypes.bool,\r\n }).isRequired,\r\n activity: PropTypes.shape({\r\n signal: PropTypes.func,\r\n }),\r\n stepTitle: PropTypes.string.isRequired,\r\n getPrevStepName: PropTypes.func.isRequired,\r\n getNextStepName: PropTypes.func.isRequired,\r\n stepPrefetchHoc: PropTypes.func,\r\n prevStepNameIfPrefetchFail: PropTypes.string.isRequired,\r\n nextStepNameIfPrefetchOnlyOneAccount: PropTypes.string.isRequired,\r\n rootContainerClassName: PropTypes.string.isRequired,\r\n isCurrencyConvertorDisabled: PropTypes.bool,\r\n showCancelButton: PropTypes.bool,\r\n StepContentContainer: PropTypes.func,\r\n additionalActionBarComponent: PropTypes.node,\r\n isRadioSelectionEnabled: PropTypes.bool,\r\n};\r\n\r\nGoogleAccountStepInternal.defaultProps = {\r\n stepPrefetchHoc: null,\r\n isCurrencyConvertorDisabled: false,\r\n showCancelButton: true,\r\n activity: null,\r\n StepContentContainer: undefined,\r\n additionalActionBarComponent: null,\r\n isRadioSelectionEnabled: false,\r\n};\r\n\r\nconst GoogleAccountStepWithStyle = withActivityContext(withDefaultStyles(GoogleAccountStepInternal, getStyles));\r\n\r\nexport const GoogleAccountStep = React.memo(props => (\r\n \r\n
\r\n \r\n {isShowAlert &&\r\n \r\n {`${alertMessage} `}\r\n {newI18n.getString(_TL_('Learn more'))} \r\n \r\n }\r\n level=\"Info\"\r\n icon={()}\r\n dismissible={false}\r\n />\r\n }\r\n
\r\n \r\n {\r\n this.props.getSchedulePageDisclaimer &&\r\n (
\r\n );\r\n }\r\n}\r\n\r\nUnstyledAdvancedImportContainer.propTypes = {\r\n context: PropTypes.shape({\r\n deps: PropTypes.shape({\r\n newI18n: PropTypes.shape({}),\r\n i18n: PropTypes.shape({}),\r\n config: PropTypes.shape({}),\r\n }),\r\n patchState: PropTypes.func.isRequired,\r\n isNameEdit: PropTypes.bool,\r\n permissionFactory: PropTypes.shape({}),\r\n }).isRequired,\r\n showError: PropTypes.bool.isRequired,\r\n setShowError: PropTypes.func.isRequired,\r\n classes: PropTypes.shape({}).isRequired,\r\n activity: PropTypes.shape({\r\n signal: PropTypes.func,\r\n }),\r\n facScheduleInvalid: PropTypes.bool,\r\n facNoActiveCampaigns: PropTypes.bool,\r\n noCampaignErrorMessage: PropTypes.string.isRequired,\r\n noFacAlert: PropTypes.bool,\r\n getSchedulePageDisclaimer: PropTypes.func,\r\n couponDialogMessage: PropTypes.string,\r\n};\r\n\r\nUnstyledAdvancedImportContainer.defaultProps = {\r\n facScheduleInvalid: false,\r\n facNoActiveCampaigns: false,\r\n activity: null,\r\n noFacAlert: false,\r\n getSchedulePageDisclaimer: null,\r\n couponDialogMessage: 'FAC_GImport_Lightbox_MustBeRecurring',\r\n};\r\n\r\nexport const AdvancedImportContainer = withDefaultStyles(\r\n withActivityContext(UnstyledAdvancedImportContainer),\r\n getAdvancedImportContainerStyles\r\n);\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Activity, withActivityContext } from '@bingads-webui-react/hoc-with-signal';\r\nimport { AlertHelper } from '@bingads-webui-campaign/alert-helper';\r\nimport { ByPassConfirmationModal } from '@bingads-webui-react/feature-adoption-coupon';\r\nimport {\r\n StepContainer,\r\n ImportCoreContext,\r\n mapCronToFrequency,\r\n ImportTypeString,\r\n} from '../../index';\r\nimport { AdvancedImportContainer } from './advanced-import-container';\r\n\r\nexport class AdvancedScheduleImportStepInternal extends React.PureComponent {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n showError: false,\r\n showScheduleInvalidFacModal: false,\r\n };\r\n }\r\n\r\n onStartClick = () => {\r\n this.setShowError();\r\n const {\r\n contextValues: { deps: { coupon }, isSchedulePageValid },\r\n facNoActiveCampaigns,\r\n facScheduleInvalid,\r\n } = this.props;\r\n if (!isSchedulePageValid) {\r\n return;\r\n }\r\n\r\n if (coupon && !facNoActiveCampaigns && facScheduleInvalid) {\r\n this.setState({ showScheduleInvalidFacModal: true });\r\n } else {\r\n this.startImporting();\r\n }\r\n };\r\n\r\n onNoActiveCampaignFacModalConfirm = () => {\r\n this.onNoActiveCampaignFacModalDismiss();\r\n this.startImporting();\r\n };\r\n\r\n onNoActiveCampaignFacModalDismiss = () => {\r\n this.setState({ showScheduleInvalidFacModal: false });\r\n };\r\n\r\n setShowError = () => {\r\n this.setState({\r\n showError: true,\r\n });\r\n };\r\n\r\n getImportInformation() {\r\n const {\r\n Cron,\r\n IsAutoFrequency,\r\n isRunNowChecked,\r\n } = this.props.contextValues;\r\n const isRunNowWithScheduledImport = isRunNowChecked;\r\n const isRunNowImport = !(IsAutoFrequency || Cron);\r\n\r\n return { isRunNowWithScheduledImport, isRunNowImport };\r\n }\r\n\r\n generateTaskData = () => {\r\n const {\r\n patchState,\r\n Name,\r\n IsAutoFrequency,\r\n TimeZoneId,\r\n Cron,\r\n NotificationType,\r\n NotificationEmailAddresses,\r\n isRunNowChecked,\r\n importOptions: importUserPreferences,\r\n } = this.props.contextValues;\r\n const { formatTaskData } = this.props;\r\n\r\n const isScheduledImport = !isRunNowChecked && (IsAutoFrequency || Cron);\r\n\r\n const {\r\n isRunNowWithScheduledImport,\r\n isRunNowImport,\r\n } = this.getImportInformation();\r\n\r\n patchState({\r\n isRunNowWithScheduledImport,\r\n isRunNowImport,\r\n isScheduledImport,\r\n IsSmartImport: false,\r\n IsExpertModeImport: true,\r\n });\r\n\r\n const importOptions = {\r\n notificationType: NotificationType,\r\n notificationEmailAddresses: NotificationEmailAddresses,\r\n timeZoneId: TimeZoneId,\r\n name: Name,\r\n cron: Cron,\r\n IsAutoFrequency,\r\n IsSmartImport: false,\r\n importUserPreferences,\r\n };\r\n const importOptionsRunnow = {\r\n notificationType: 'None',\r\n notificationEmailAddresses: null,\r\n timeZoneId: TimeZoneId,\r\n name: Name,\r\n cron: null,\r\n taskItemState: 'Active',\r\n IsAutoFrequency: false,\r\n IsSmartImport: false,\r\n importUserPreferences,\r\n };\r\n\r\n return formatTaskData(this.props.contextValues, {\r\n isRunNowWithScheduledImport,\r\n isRunNowImport,\r\n isScheduledImport,\r\n // scheduleStepState,\r\n importOptions,\r\n importOptionsRunnow,\r\n });\r\n };\r\n\r\n startImporting = () => {\r\n const {\r\n isSchedulePageValid,\r\n patchState,\r\n deps,\r\n isRunNowChecked,\r\n IsAutoFrequency,\r\n Cron,\r\n } = this.props.contextValues;\r\n\r\n const {\r\n activity,\r\n facScheduleInvalid,\r\n facNoActiveCampaigns,\r\n getNextStepName,\r\n rootContainerClassName,\r\n createImportAndGoNextWhenReady,\r\n } = this.props;\r\n\r\n const chosenFrequency = IsAutoFrequency ? 'Auto' : mapCronToFrequency(Cron);\r\n\r\n const scheduleOnly = !isRunNowChecked && (IsAutoFrequency || Cron);\r\n\r\n const { perfMarker } = deps;\r\n\r\n\r\n if (isSchedulePageValid) {\r\n if (scheduleOnly && activity) {\r\n activity.signal(`SaveButtonClicked - ${chosenFrequency} `);\r\n } else if (activity) {\r\n activity.signal(`StartImportButtonClicked - ${chosenFrequency} `);\r\n }\r\n\r\n // Add log to distinguish import type in report\r\n if (activity) {\r\n activity.signal(ImportTypeString.Advanced);\r\n }\r\n\r\n const smartImportSummaryStepPerfMarker = perfMarker.createChild('Smart_Import_ImportSummary_Step');\r\n const {\r\n isRunNowWithScheduledImport,\r\n isRunNowImport,\r\n } = this.getImportInformation();\r\n\r\n if (!(isRunNowWithScheduledImport || isRunNowImport)) {\r\n smartImportSummaryStepPerfMarker.willInit();\r\n }\r\n\r\n patchState({\r\n startImportFrom: ImportTypeString.Advanced,\r\n smartImportSummaryStepPerfMarker,\r\n });\r\n\r\n createImportAndGoNextWhenReady({\r\n state: this.props.contextValues,\r\n generateTaskData: this.generateTaskData,\r\n setImportStatus: this.props.setImportStatus,\r\n activity,\r\n getNextStepName,\r\n rootContainerClassName,\r\n showErrorMessage: (errMsg) => {\r\n const alertHelper = new AlertHelper({ i18n: deps.newI18n });\r\n alertHelper.showError(errMsg);\r\n },\r\n facScheduleInvalid,\r\n facNoActiveCampaigns,\r\n });\r\n }\r\n };\r\n\r\n render() {\r\n const {\r\n contextValues,\r\n facScheduleInvalid,\r\n facNoActiveCampaigns,\r\n stepTitle,\r\n getActionBarItems,\r\n noCampaignErrorMessage,\r\n couponDialogMessage,\r\n } = this.props;\r\n const {\r\n isRunNowChecked,\r\n IsAutoFrequency,\r\n Cron,\r\n deps,\r\n } = contextValues;\r\n\r\n const scheduleOnly = !isRunNowChecked && (IsAutoFrequency || Cron);\r\n return (\r\n { this.props.getSchedulePageDisclaimer() }
)\r\n }\r\n \r\n { this.newI18n.getString(noCampaignErrorMessage)}\r\n
\r\n )}\r\n \r\n \r\n
: null }\r\n { this.state.currentStatusOrder === i ?\r\n \r\n {`${this.stepText} ${step.TitleNumber}. ${step.Text}`}\r\n
\r\n \r\n \r\n
: null }\r\n { this.state.currentStatusOrder < i ?\r\n \r\n {`${this.stepText} ${step.TitleNumber}. ${step.Text}`}\r\n
\r\n \r\n
: null }\r\n \r\n {`${this.stepText} ${step.TitleNumber}. ${step.Text}`}\r\n
\r\n \r\n { this.state.shouldShow ? (\r\n
);\r\n }\r\n}\r\n\r\nImportStatusContainerInternal.propTypes = {\r\n importStatus: PropTypes.shape({\r\n importId: PropTypes.number,\r\n taskItemExecutionId: PropTypes.number,\r\n }),\r\n deps: PropTypes.shape({\r\n newI18n: PropTypes.shape({}),\r\n }).isRequired,\r\n repository: PropTypes.shape({}).isRequired,\r\n classes: PropTypes.shape({}).isRequired,\r\n contextValues: PropTypes.shape({\r\n goToNextStep: PropTypes.func,\r\n patchState: PropTypes.func,\r\n deps: PropTypes.shape({}),\r\n repository: PropTypes.shape({}).isRequired,\r\n smartImportSummaryStepPerfMarker: PropTypes.shape({}),\r\n startImportFrom: PropTypes.string,\r\n selectedAccounts: PropTypes.array,\r\n isSmartCampaignImport: PropTypes.bool,\r\n showErrorMessage: PropTypes.func,\r\n handleGenericError: PropTypes.func,\r\n }).isRequired,\r\n activity: PropTypes.shape({\r\n signal: PropTypes.func,\r\n }),\r\n rootContainerClassName: PropTypes.string.isRequired,\r\n nextStepPath: PropTypes.string.isRequired,\r\n redirectToImportHistoryPage: PropTypes.func,\r\n getImportStatusPageDisclaimer: PropTypes.func,\r\n getOverwriteImportStatusOrderToStepTitleMap: PropTypes.func,\r\n};\r\n\r\nImportStatusContainerInternal.defaultProps = {\r\n importStatus: {},\r\n redirectToImportHistoryPage: null,\r\n getImportStatusPageDisclaimer: null,\r\n getOverwriteImportStatusOrderToStepTitleMap: null,\r\n activity: null,\r\n};\r\n\r\nexport const ImportStatusContainer = withDefaultStyles(\r\n ImportStatusContainerInternal,\r\n getImportStatusContainerStyles\r\n);\r\n","export const getImportStatusOrderToStepTitleMap = newI18n => (\r\n [\r\n {\r\n // OriginalText: 'Account in queue to import',\r\n // OriginalStatusOrder: 0\r\n Text: newI18n.getString(_TL_('Your import is in queue')),\r\n TitleNumber: 1,\r\n },\r\n {\r\n // OriginalText: 'Importing your campaigns',\r\n // OriginalStatusOrder: 1\r\n Text: newI18n.getString(_TL_('Importing your campaigns')),\r\n TitleNumber: 2,\r\n },\r\n {\r\n // OriginalText: 'Checking your campaigns for issues',\r\n // OriginalStatusOrder: 2\r\n Text: newI18n.getString(_TL_('Checking your campaigns for issues')),\r\n TitleNumber: 3,\r\n },\r\n {\r\n // This step won't show any more but keep this object to align with status order\r\n // OriginalText: 'Campaign review complete',\r\n // OriginalStatusOrder: 3\r\n // Text: newI18n.getString(_TL_('Finalizing your import changes')),\r\n // TitleNumber: 4,\r\n },\r\n {\r\n // This step won't show any more but keep this object to align with status order\r\n // OriginalText: 'Preparing import submission',\r\n // OriginalStatusOrder: 4\r\n // Text: newI18n.getString(_TL_('Finalizing your import changes')),\r\n // TitleNumber: 4,\r\n },\r\n {\r\n // OriginalText: 'Finalizing import changes',\r\n // OriginalStatusOrder: 5\r\n Text: newI18n.getString(_TL_('Finalizing your import changes')),\r\n TitleNumber: 4,\r\n },\r\n {\r\n // OriginalText: 'Import completed.',\r\n // OriginalStatusOrder: 6\r\n Text: newI18n.getString(_TL_('Import completed!')),\r\n TitleNumber: 5,\r\n },\r\n ]\r\n);\r\n\r\n","export const getImportStatusContainerStyles = () => ({\r\n importStatusContainer: {\r\n },\r\n importStatusTitle: {\r\n fontWeight: 600,\r\n fontSize: '20px',\r\n lineHeight: '27px',\r\n textAlign: 'center',\r\n paddingTop: '20px',\r\n },\r\n importStatusSubText: {\r\n fontSize: '14px',\r\n lineHeight: '20px',\r\n textAlign: 'center',\r\n paddingTop: '20px',\r\n paddingBottom: '30px',\r\n\r\n '& a': {\r\n textDecoration: 'underline',\r\n },\r\n },\r\n indicatorStepsPanel: {\r\n width: '385px',\r\n height: '196px',\r\n margin: 'auto',\r\n lineHeight: '22px',\r\n },\r\n stepsList: {\r\n listStyle: 'none',\r\n },\r\n indicatorIcon: {\r\n top: '-4px',\r\n marginRight: '8px',\r\n },\r\n indicatorDone: {\r\n overflow: 'hidden',\r\n display: 'inline-block',\r\n },\r\n indicatorCurrent: {\r\n overflow: 'hidden',\r\n display: 'inline-block',\r\n },\r\n indicatorFuture: {\r\n marginLeft: '22px',\r\n color: '#CCCCCC',\r\n lineHeight: '28px',\r\n },\r\n completedIcon: {\r\n color: '#0078D4',\r\n fontSize: '28px',\r\n verticalAlign: 'middle',\r\n },\r\n accountTitle: {\r\n verticalAlign: 'middle',\r\n },\r\n});\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { Activity, withActivityContext } from '@bingads-webui-react/hoc-with-signal';\r\n\r\nimport { StepContainer } from '../../step-container/step-container';\r\nimport { ImportCoreContext } from '../../base-import-context';\r\n\r\nimport {\r\n ImportStatusContainer\r\n} from './import-status-container';\r\n\r\n\r\nconst getImportStatusStyles = () => ({\r\n ImportStatusRoot: {\r\n paddingRight: '30px',\r\n },\r\n});\r\n\r\nconst generateActionBarConfig = () => ([]);\r\n\r\nconst ImportStatusStepWithActivity = withActivityContext(ImportStatusContainer);\r\n\r\nclass UnstyledImportStatusStep extends React.PureComponent {\r\n render() {\r\n const {\r\n classes,\r\n getImportStatus,\r\n rootContainerClassName,\r\n nextStepPath,\r\n redirectToImportHistoryPage,\r\n getImportStatusPageDisclaimer,\r\n getOverwriteImportStatusOrderToStepTitleMap,\r\n } = this.props;\r\n\r\n return (\r\n \r\n { this.props.contextValues.isSmartCampaignImport ? (\r\n
\r\n ) : null }\r\n \r\n
\r\n ) : null }\r\n \r\n
\r\n \r\n {this.newI18n.getString(_TL_('Google Ads account: '))}\r\n {this.props.contextValues.selectedAccounts[0].AccountName ||\r\n this.props.contextValues.selectedAccounts[0].CustomerId}\r\n
\r\n \r\n {this.newI18n.getString(_TL_('We\\'re importing your campaigns...'))}\r\n
\r\n \r\n \r\n
\r\n - {stepsList}
\r\n
\r\n );\r\n }\r\n}\r\n\r\nUnstyledLoginContainer.propTypes = {\r\n context: PropTypes.shape({\r\n loginRepository: PropTypes.shape({}).isRequired,\r\n deps: PropTypes.shape({\r\n logTrace: PropTypes.func,\r\n newI18n: PropTypes.shape({}),\r\n }).isRequired,\r\n loginErrorMessage: PropTypes.string,\r\n repository: PropTypes.shape({}).isRequired,\r\n patchState: PropTypes.func.isRequired,\r\n goToNextStep: PropTypes.func.isRequired,\r\n handleGenericError: PropTypes.func.isRequired,\r\n }).isRequired,\r\n activity: PropTypes.shape({\r\n signal: PropTypes.func,\r\n }),\r\n classes: PropTypes.shape().isRequired,\r\n nextStepPath: PropTypes.string.isRequired,\r\n rootContainerClassName: PropTypes.string.isRequired,\r\n onSignInToFacebook: PropTypes.func,\r\n onFacebookAuthSuccess: PropTypes.func,\r\n onContinue: PropTypes.func,\r\n};\r\n\r\nUnstyledLoginContainer.defaultProps = {\r\n onSignInToFacebook: null,\r\n onFacebookAuthSuccess: null,\r\n onContinue: null,\r\n activity: null,\r\n};\r\n\r\nexport const LoginContainer = withDefaultStyles(\r\n withActivityContext(UnstyledLoginContainer),\r\n style\r\n);\r\n\r\nexport const renderDescription = (i18n, nextStepPath, repository, hideLogoutLink) => {\r\n const signOut = (contextValues) => {\r\n const {\r\n goToNextStep,\r\n patchState,\r\n toggleImportType,\r\n } = contextValues;\r\n\r\n const postLogout = (error) => {\r\n const errMsg = error ? `Error: ${JSON.stringify(error)}` : '';\r\n repository.logTrace(`User logging out of Facebook account. ${errMsg}`);\r\n };\r\n repository.logout({ onSuccess: postLogout, onFail: postLogout });\r\n patchState({\r\n isLoggedIn: false,\r\n logOutButtonClicked: true,\r\n ...logoutResetData,\r\n });\r\n\r\n toggleImportType(ImportType.Smart);\r\n goToNextStep(nextStepPath);\r\n };\r\n\r\n return (\r\n \r\n \r\n {this.newI18n.getString(_TL_('Get your campaigns up and running quickly by importing them directly from Meta Ads.'))} \r\n \r\n \r\n {this.newI18n.getString(_TL_('Before you start, make sure you understand')) } \r\n \r\n \r\n { this.newI18n.getString(_TL_('what will be imported')) }.\r\n \r\n \r\n \r\n
\r\n \r\n {this.isLoggedIn() ? (\r\n
\r\n \r\n this.logout('manual sign out')}\r\n data-analyticsid=\"signout\"\r\n />\r\n
\r\n ) : (\r\n \r\n { isInActiveAccount && { this.newI18n.getString(_TL_('Imports can only be ran from active accounts.'))}}\r\n { this.state.errorMsg }\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nUnstyledCampaignSelector.propTypes = {\r\n classes: PropTypes.shape({\r\n campaignsSelector: PropTypes.string.isRequired,\r\n searchBox: PropTypes.string.isRequired,\r\n showPausedCampaignsOnlyCheckbox: PropTypes.string.isRequired,\r\n errorMsg: PropTypes.string.isRequired,\r\n }).isRequired,\r\n rootContainerClassName: PropTypes.string.isRequired,\r\n selectionData: PropTypes.shape({\r\n selectedCampaignIds: PropTypes.arrayOf(PropTypes.string),\r\n }),\r\n campaigns: PropTypes.arrayOf(PropTypes.any).isRequired,\r\n newI18n: PropTypes.shape({}).isRequired,\r\n onCampaignSelectionChange: PropTypes.func.isRequired,\r\n selectedAccount: PropTypes.shape({}).isRequired,\r\n brandName: PropTypes.string.isRequired,\r\n getCampaigns: PropTypes.func.isRequired,\r\n // eslint-disable-next-line react/forbid-prop-types\r\n coupon: PropTypes.object,\r\n activity: PropTypes.shape({\r\n signal: PropTypes.func,\r\n }).isRequired,\r\n};\r\n\r\nUnstyledCampaignSelector.defaultProps = {\r\n selectionData: {\r\n selectedCampaignIds: [],\r\n },\r\n coupon: null,\r\n};\r\n\r\n// bad prefix added to UnstyledCampaignSelector in CI environment occasionally\r\n// define displayName explicitly which serves as the prefix for now until the root cause is found\r\nUnstyledCampaignSelector.displayName = 'campaignSelector';\r\n\r\nexport const CampaignSelector = withDefaultStyles(UnstyledCampaignSelector, style);\r\n","/* eslint-disable max-len */\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Promise from 'bluebird';\r\nimport _ from 'underscore';\r\nimport classnames from 'classnames';\r\nimport { ChoiceGroup } from '@bingads-webui-react/fabric-with-signal';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { Activity, withActivityContext } from '@bingads-webui-react/hoc-with-signal';\r\nimport { getShowNoActiveCampaignCouponAlert } from '@bingads-webui-campaign/import-components';\r\nimport { ByPassConfirmationModal } from '@bingads-webui-react/feature-adoption-coupon';\r\nimport { StepContainer, ImportCoreContext, ImportType } from '../../index';\r\nimport { getActionBarItems } from './action-bar-config';\r\nimport { CampaignSelector } from './campaigns-selector';\r\n\r\nconst getImportCampaignOptions = i18n => [\r\n {\r\n key: true,\r\n text: i18n.getString(_TL_('All existing and new campaigns')),\r\n onRenderField: (props, render) => (\r\n \r\n
\r\n {!loading && (\r\n \r\n
\r\n )}\r\n {error && (\r\n \r\n {error}\r\n
\r\n )}\r\n {showNoActiveCampaignCouponAlert && (\r\n \r\n
\r\n )}\r\n \r\n {render(props)}\r\n
\r\n ),\r\n },\r\n {\r\n key: false,\r\n text: i18n.getString(_TL_('Specific campaigns')),\r\n onRenderField: (props, render) => (\r\n \r\n {render(props)}\r\n
\r\n ),\r\n },\r\n];\r\n\r\nconst style = () => ({\r\n importCampaignOptions: {\r\n marginBottom: 20,\r\n '& label': {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n alignItems: 'center',\r\n padding: 0,\r\n fontWeight: 'normal',\r\n },\r\n },\r\n});\r\n\r\nclass CampaignStepInternal extends React.PureComponent {\r\n constructor(props) {\r\n super(props);\r\n\r\n const campaignIds = _.chain(props)\r\n .result('contextValues')\r\n .result('CampaignIds')\r\n .value();\r\n\r\n this.state = {\r\n importAll: _.isEmpty(campaignIds),\r\n selectionData: {\r\n selectedCampaignIds: campaignIds || [],\r\n },\r\n showNoActiveCampaignsFacModal: false,\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n const {\r\n contextValues,\r\n } = this.props;\r\n const { campaignSelectionPerfMarker } = contextValues;\r\n\r\n if (campaignSelectionPerfMarker) {\r\n campaignSelectionPerfMarker.done();\r\n }\r\n\r\n if (this.props.activity) {\r\n this.props.activity.signal('CampaignSelectionPageLoaded');\r\n }\r\n }\r\n\r\n onImportCampaignOptionChange = (_evt, option) => {\r\n this.setState({\r\n importAll: option.key,\r\n });\r\n const {\r\n contextValues,\r\n } = this.props;\r\n\r\n if (this.props.activity) {\r\n this.props.activity.signal(`ImportOptionChanged: From: ${option.key ? 'Specific' : 'All'} To: ${option.key ? 'All' : 'Specific'}`);\r\n }\r\n\r\n if (contextValues.deps.setNoActiveCampaigns && option.key) {\r\n contextValues.deps.setNoActiveCampaigns(false);\r\n }\r\n };\r\n\r\n onCampaignSelectionChange = (campaignIds) => {\r\n this.setState({\r\n selectionData: {\r\n selectedCampaignIds: campaignIds,\r\n },\r\n });\r\n const {\r\n contextValues,\r\n facNoActiveCampaigns: facNoActiveCampaignsFromProps,\r\n campaignsName,\r\n } = this.props;\r\n\r\n const facNoActiveCampaigns = !this.state.importAll\r\n && getShowNoActiveCampaignCouponAlert(\r\n contextValues.deps.coupon,\r\n contextValues[campaignsName],\r\n { selectedCampaignIds: campaignIds }\r\n );\r\n\r\n if (contextValues.deps.setNoActiveCampaigns && facNoActiveCampaignsFromProps !== facNoActiveCampaigns) {\r\n contextValues.deps.setNoActiveCampaigns(facNoActiveCampaigns);\r\n }\r\n };\r\n\r\n getStateData() {\r\n const stateData = {};\r\n\r\n if (this.state.importAll) {\r\n stateData.selectionData = {};\r\n stateData.areAnyPausedCampaignsSelected = false;\r\n } else {\r\n stateData.selectionData = this.state.selectionData;\r\n stateData.areAnyPausedCampaignsSelected = true;\r\n }\r\n return stateData;\r\n }\r\n\r\n validateAndSaveData(shouldSwitchMode = false) {\r\n const stateData = this.getStateData();\r\n\r\n const selectedCampaignIds = _.chain(stateData)\r\n .result('selectionData')\r\n .result('selectedCampaignIds', [])\r\n .value();\r\n\r\n // if user clicks next button, will run this check\r\n // if user clicks back button, will not check if user selects any campains\r\n if (!shouldSwitchMode && selectedCampaignIds.length === 0 && !this.state.importAll) {\r\n return new Promise(resolve => resolve(false));\r\n }\r\n\r\n const {\r\n contextValues,\r\n entitiesSelectionDataName,\r\n campaignsName,\r\n } = this.props;\r\n const {\r\n patchState,\r\n deps,\r\n isEditingScheduledImport,\r\n } = contextValues;\r\n\r\n const { perfMarker } = deps;\r\n\r\n // will save data when user clicks next button or back button\r\n // need to discuss later about if we need to save user's selection when go back\r\n patchState(_.extend({}, {\r\n CampaignIds: _.union(stateData.selectionData.selectedCampaignIds),\r\n includePausedCampaigns: stateData.areAnyPausedCampaignsSelected\r\n && !isEditingScheduledImport,\r\n }, _.isEmpty(entitiesSelectionDataName) ? null : {\r\n [entitiesSelectionDataName]: stateData.selectionData,\r\n }));\r\n\r\n if (shouldSwitchMode) {\r\n const smartImportStartPerfMarker = perfMarker.createChild('Smart_Import_StartImportSmart_Step');\r\n smartImportStartPerfMarker.willInit();\r\n\r\n // switch to smart import mode if we go back from campaign selection step\r\n this.props.contextValues.toggleImportType(ImportType.Smart);\r\n\r\n return new Promise(resolve => resolve(true));\r\n }\r\n\r\n if (this.props.activity) {\r\n const totalCampaignsCount = Object.keys(contextValues[campaignsName]).length;\r\n\r\n this.props.activity.signal({\r\n CampaignSelection: {\r\n selection: this.state.importAll ? 'all' : 'selected',\r\n totalCampaigns: totalCampaignsCount,\r\n selectedCampaigns: this.state.importAll ? totalCampaignsCount : Object.keys(stateData.selectionData.selectedCampaignIds).length,\r\n },\r\n });\r\n }\r\n\r\n const finishStep = () => {\r\n const expertImportOptionsPerfMarker = perfMarker.createChild('Smart_Import_Expert_Import_Options_Step');\r\n expertImportOptionsPerfMarker.willInit();\r\n\r\n patchState({\r\n expertImportOptionsPerfMarker,\r\n });\r\n\r\n return new Promise(resolve => resolve(true));\r\n };\r\n\r\n if (this.props.facNoActiveCampaigns) {\r\n return new Promise((resolve) => {\r\n this.setState({\r\n showNoActiveCampaignsFacModal: true,\r\n onNoActiveCampaignFacModalConfirm: () => {\r\n this.dismissFacBypassModal();\r\n resolve(finishStep());\r\n },\r\n onNoActiveCampaignFacModalDismiss: () => {\r\n this.dismissFacBypassModal();\r\n resolve(false);\r\n },\r\n });\r\n });\r\n }\r\n\r\n return finishStep();\r\n }\r\n\r\n dismissFacBypassModal() {\r\n this.setState({\r\n showNoActiveCampaignsFacModal: false,\r\n onNoActiveCampaignFacModalConfirm: undefined,\r\n onNoActiveCampaignFacModalDismiss: undefined,\r\n });\r\n }\r\n\r\n render() {\r\n const {\r\n classes,\r\n stepTitle,\r\n prevStepName,\r\n nextStepName,\r\n brandName,\r\n campaignsName,\r\n getCampaigns,\r\n } = this.props;\r\n\r\n return (\r\n \r\n
\r\n {!this.state.importAll && (\r\n