\r\n
\r\n );\r\n }\r\n // image cell\r\n return (\r\n \r\n
\r\n );\r\n }, [navigateIntoFolder, resetSelectionState, logger, classes.targetFolderPickerFolderCell, i18n]);\r\n\r\n const onFailedToLoadData = useCallback(() => {\r\n notificationApi.showWarning(i18n.getString(_TL_('Failed to load assets. Please refresh the page and try again.')));\r\n }, [i18n, notificationApi]);\r\n\r\n const onFolderPathClicked = useCallback((item) => {\r\n navigateToFolderInPath({ id: item.key });\r\n }, [navigateToFolderInPath]);\r\n\r\n const onRenderHeader = useCallback(() => (\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nAdsStudioTargetFolderPicker.propTypes = {\r\n selectedFolder: PropTypes.shape({}),\r\n setSelectedFolder: PropTypes.func.isRequired,\r\n dataService: PropTypes.shape({\r\n folders: PropTypes.arrayOf(PropTypes.shape({})),\r\n navigateIntoFolder: PropTypes.func,\r\n folderPath: PropTypes.arrayOf(PropTypes.shape({})),\r\n navigateToFolderInPath: PropTypes.func,\r\n }).isRequired,\r\n logger: PropTypes.shape({\r\n logTrace: PropTypes.func,\r\n logError: PropTypes.func,\r\n }).isRequired,\r\n ianaTimeZone: PropTypes.string.isRequired,\r\n dateFormat: PropTypes.string.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n assetLibraryUserPreferences: PropTypes.shape({}),\r\n notificationApi: PropTypes.shape({\r\n showWarning: PropTypes.func,\r\n }).isRequired,\r\n permissions: PropTypes.shape({\r\n dynamic: PropTypes.shape({}),\r\n }),\r\n};\r\n\r\nAdsStudioTargetFolderPicker.defaultProps = {\r\n selectedFolder: null,\r\n assetLibraryUserPreferences: null,\r\n permissions: { dynamic: {} },\r\n};\r\n\r\n","import React, { useState, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {\r\n Dialog,\r\n DialogActions,\r\n DialogContent,\r\n DialogBody,\r\n DialogSurface,\r\n DialogTitle,\r\n Button,\r\n mergeClasses,\r\n} from '@fluentui/react-components';\r\nimport { Dismiss20Regular } from '@fluentui/react-icons';\r\n\r\nimport { AdsStudioTargetFolderPicker } from './target-folder-picker-view';\r\nimport { useTargetFolderPickerStyle } from './target-folder-picker-style';\r\n\r\n// const modalWidth = 940;\r\n\r\nexport const TargetFolderPickerModal = ({\r\n dataService, isGlobalSearch, sourceFolderId, show, onMoveHereClick, onCancel, i18n, ...rest\r\n}) => {\r\n const [selectedFolder, setSelectedFolder] = useState(null);\r\n\r\n const { currentFolderId } = dataService;\r\n\r\n const onMoveClickButtonClick = () => {\r\n onMoveHereClick(currentFolderId);\r\n };\r\n\r\n const moveHereButtonDisabled = !isGlobalSearch && (currentFolderId === sourceFolderId);\r\n\r\n const DismissIcon = useMemo(() => \r\n updateWaterfallFilter({\r\n filterType: WaterfallFilterType.DateFilter,\r\n filter: data,\r\n })}\r\n serverContext={serverContext}\r\n minDate={civilMinDate}\r\n />\r\n
\r\n );\r\n\r\n return ({newI18n.getString(_TL_('See why this is recommended for you'))}
\r\n ) : null\r\n ), [classes.tooTip, newI18n]);\r\n\r\n const renderPagination = useMemo(() => (\r\n _.size(dataFiltered) > 1 &&\r\n \r\n {curlyTemplate(newI18n.getString(_TL_('{{pageNumber}} of {{pageCount}}')))({\r\n pageNumber: index + 1,\r\n pageCount: _.size(dataFiltered),\r\n })}\r\n
\r\n ), [classes.carouselIndex, dataFiltered, index, newI18n]);\r\n\r\n const renderPrevIcon = useMemo(() => (\r\n _.size(dataFiltered) > 1 &&\r\n \r\n
\r\n {renderPagination}\r\n \r\n {model.summary.description}\r\n
\r\n {renderPitch(model.summary.pitching)}\r\n \r\n {carousel}\r\n
);\r\n}\r\n\r\nInContextCardBase.propTypes = {\r\n setInContextRecommendationContent: PropTypes.func.isRequired,\r\n classes: PropTypes.shape({}).isRequired,\r\n isMCC: PropTypes.bool.isRequired,\r\n guid: PropTypes.string,\r\n data: PropTypes.shape().isRequired,\r\n deps: PropTypes.shape().isRequired,\r\n scope: PropTypes.shape({\r\n campaignId: PropTypes.number,\r\n adGroupId: PropTypes.number,\r\n }).isRequired,\r\n adDisplayUrlService: PropTypes.shape().isRequired,\r\n dataService: PropTypes.shape({\r\n track: PropTypes.func,\r\n }).isRequired,\r\n currentActivity: PropTypes.shape({\r\n trace: PropTypes.func,\r\n }).isRequired,\r\n newI18n: PropTypes.shape({}).isRequired,\r\n downloadService: PropTypes.shape({}).isRequired,\r\n campaignType: PropTypes.number,\r\n filterService: PropTypes.shape({}),\r\n channel: PropTypes.string.isRequired,\r\n hideCard: PropTypes.func.isRequired,\r\n entityType: PropTypes.string.isRequired,\r\n reload: PropTypes.func.isRequired,\r\n applyAllCallback: PropTypes.func,\r\n campaignAdGroups: PropTypes.arrayOf(PropTypes.shape({\r\n Key: PropTypes.number,\r\n Value: PropTypes.arrayOf(PropTypes.number),\r\n })).isRequired,\r\n haveEnoughSpace: PropTypes.bool,\r\n overallOptimizationScoreBar: PropTypes.shape({\r\n Gained: PropTypes.number,\r\n Dismissed: PropTypes.number,\r\n Available: PropTypes.number,\r\n }),\r\n perfMarker: perfMarkerPropTypes,\r\n};\r\n\r\nInContextCardBase.defaultProps = {\r\n guid: generateGuid(),\r\n campaignType: null,\r\n filterService: null,\r\n applyAllCallback: _.noop,\r\n haveEnoughSpace: true,\r\n overallOptimizationScoreBar: null,\r\n perfMarker: null,\r\n};\r\n\r\nexport const InContextCard = withGetSummary(\r\n false, // withDetails\r\n false // needExamples\r\n)(withDefaultStyles(InContextCardBase, getStyles));\r\n","import { extend } from 'underscore';\r\nimport { getHeaderStyles, getApplyFormStyles, getIconStyles, getFeedbackModalStyles } from '@bingads-webui-campaign-react/recommendation-shared-styles';\r\n\r\nconst cardWidth = 447;\r\n\r\nexport const getStyles = ({\r\n palette = {\r\n white: '#FFFFFF',\r\n themePrimary: '#0078D4',\r\n },\r\n}) => ({\r\n '@global': extend(\r\n Object.assign(getApplyFormStyles({ palette })),\r\n Object.assign(getFeedbackModalStyles({ palette }))\r\n ),\r\n carouselContainer: {\r\n width: cardWidth,\r\n height: 193,\r\n marginTop: 23,\r\n marginRight: 16,\r\n flexShrink: 0,\r\n flexGrow: 0,\r\n display: 'flex',\r\n boxShadow: '0px 1.6px 3.6px rgba(0, 0, 0, 0.132), 0px 0.3px 0.9px rgba(0, 0, 0, 0.108)',\r\n\r\n '& .carousel-wrapper': {\r\n display: 'flex',\r\n '& .carousel .item': {\r\n width: cardWidth,\r\n\r\n '& .recommendation-summary-header': {\r\n padding: '8px 13px 8px 16px',\r\n borderBottom: '1px solid #F3F2F1',\r\n\r\n ...getHeaderStyles({ palette }),\r\n ...getIconStyles(),\r\n },\r\n '& .recommendation-summary-footer': {\r\n paddingLeft: '16px',\r\n '& button.btn-primary': {\r\n marginRight: '8px',\r\n },\r\n '& button.btn': {\r\n paddingLeft: '12px',\r\n paddingRight: '12px',\r\n fontSize: '12px',\r\n },\r\n },\r\n },\r\n '& .carousel-control': {\r\n textShadow: 'none',\r\n background: 'none',\r\n cursor: 'default',\r\n top: 'auto',\r\n bottom: '10px',\r\n '&:focus:after': {\r\n border: 'none',\r\n },\r\n '&.left': {\r\n color: palette.themePrimary,\r\n right: '36px',\r\n left: 'auto',\r\n },\r\n '&.right': {\r\n color: palette.themePrimary,\r\n right: '13px',\r\n },\r\n '& .iconba': {\r\n cursor: 'pointer',\r\n\r\n '&.disabled': {\r\n cursor: 'default',\r\n color: '#C8C6C4',\r\n },\r\n },\r\n },\r\n },\r\n },\r\n cardContent: {\r\n padding: '0px 16px',\r\n height: '106px',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n justifyContent: 'space-evenly',\r\n },\r\n description: {\r\n fontSize: '16px',\r\n lineHeight: '20px',\r\n fontWeight: 600,\r\n },\r\n tooTip: {\r\n borderBottom: `1px dashed ${palette.themePrimary}`,\r\n cursor: 'default',\r\n display: 'inline-block',\r\n color: '#666666',\r\n },\r\n carouselIndex: {\r\n position: 'absolute',\r\n right: '60px',\r\n bottom: '3px',\r\n },\r\n});\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport ReactModal from 'react-modal';\r\n\r\nexport class RecommendationModal extends React.PureComponent {\r\n static propTypes = {\r\n isOpen: PropTypes.bool.isRequired,\r\n onCancel: PropTypes.func.isRequired,\r\n children: PropTypes.node.isRequired,\r\n closeOnOverlayClick: PropTypes.bool,\r\n };\r\n\r\n static defaultProps = {\r\n closeOnOverlayClick: true,\r\n };\r\n\r\n componentDidMount() {\r\n ReactModal.setAppElement(document.body);\r\n }\r\n\r\n render() {\r\n const {\r\n isOpen,\r\n onCancel,\r\n closeOnOverlayClick,\r\n } = this.props;\r\n\r\n return (\r\n {title}
\r\n{content}
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {i18n.getString('Recommendation_Async_Apply_Title')}\r\n
\r\n\r\n {i18n.getString('Recommendation_Async_Apply_Choices_Prefix')}\r\n
\r\n \r\n {applyHistoryLink}\r\n
\r\n \r\n );\r\n }\r\n}\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { RecommendationModal } from './modal';\r\nimport { AsyncApplyForm } from './forms/async-apply-form';\r\n\r\nexport class AsyncApplyFormModal extends React.PureComponent {\r\n static propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n isAsyncApplyModalOpen: PropTypes.bool.isRequired,\r\n closeAsyncApplyModal: PropTypes.func.isRequired,\r\n viewHistory: PropTypes.func.isRequired,\r\n };\r\n\r\n render() {\r\n const {\r\n i18n,\r\n isAsyncApplyModalOpen,\r\n closeAsyncApplyModal,\r\n viewHistory,\r\n } = this.props;\r\n\r\n return (\r\n \r\n {\r\n !loading &&\r\n \r\n {confirmString}\r\n \r\n }\r\n {\r\n !loading &&\r\n \r\n {cancelString}\r\n \r\n }\r\n
\r\n );\r\n }\r\n}\r\n","export const getApplyFormStyles = ({ palette = {}, iconFontFamily = 'MsAds MDL2 Assets' }) => (\r\n {\r\n '.recommendation-modal-overlay': {\r\n position: 'fixed',\r\n top: '0',\r\n left: '0',\r\n right: '0',\r\n bottom: '0',\r\n backgroundColor: 'rgba(51,51,51,0.3)',\r\n zIndex: '1061',\r\n '& .recommendation-modal': {\r\n position: 'absolute',\r\n top: '50%',\r\n left: '50%',\r\n overflow: 'auto',\r\n outline: 'none',\r\n transform: 'translate(-50%,-50%)',\r\n marginRight: '-50%',\r\n padding: 24,\r\n border: '1px solid #d9d9d9',\r\n color: '#333',\r\n backgroundColor: palette.white,\r\n boxShadow: '0px 4.8px 14.4px rgba(0, 0, 0, 0.18), 0px 25.6px 57.6px rgba(0, 0, 0, 0.22)',\r\n borderRadius: '2px',\r\n\r\n '& .recommendation-confirm-form': {\r\n width: 402,\r\n\r\n '& .close.close-image': {\r\n fontStyle: 'normal',\r\n fontWeight: 'normal',\r\n fontSize: 12,\r\n lineHeight: '12px',\r\n },\r\n\r\n '& .recommendation-confirm-title': {\r\n fontFamily: 'Segoe UI',\r\n fontStyle: 'normal',\r\n fontWeight: 600,\r\n fontSize: 20,\r\n lineHeight: '27px',\r\n marginBottom: 26,\r\n marginTop: 0,\r\n },\r\n\r\n '& .recommendation-confirm-content': {\r\n fontFamily: 'Segoe UI',\r\n fontSize: 14,\r\n lineHeight: '20px',\r\n marginBottom: 19,\r\n },\r\n\r\n '& .btn-confirm': {\r\n backgroundColor: palette.themePrimary,\r\n fontSize: 14,\r\n fontWeight: 600,\r\n marginRight: 8,\r\n lineHeight: '19px',\r\n color: palette.white,\r\n },\r\n\r\n '& .btn-cancel': {\r\n backgroundColor: palette.white,\r\n border: '1px solid #8A8886',\r\n fontSize: 14,\r\n fontWeight: 600,\r\n lineHeight: '19px',\r\n },\r\n },\r\n '& .recommendation-async-bulk-aar-confirm-form': {\r\n width: 402,\r\n\r\n '& .close.close-image': {\r\n fontStyle: 'normal',\r\n fontWeight: 'normal',\r\n fontSize: 12,\r\n lineHeight: '12px',\r\n },\r\n\r\n '& .recommendation-aysnc-confirm-title': {\r\n fontFamily: 'Segoe UI',\r\n fontStyle: 'normal',\r\n fontWeight: 600,\r\n fontSize: 20,\r\n lineHeight: '27px',\r\n marginBottom: 26,\r\n marginTop: 0,\r\n },\r\n\r\n '& .recommendation-async-confirm-content': {\r\n fontFamily: 'Segoe UI',\r\n fontSize: 14,\r\n lineHeight: '20px',\r\n marginBottom: 19,\r\n '& .blocker': {\r\n display: 'inline-block',\r\n\r\n '& .blocker-indicator': {\r\n position: 'relative',\r\n padding: 0,\r\n top: 2,\r\n left: 0,\r\n\r\n '& .blocker-image': {\r\n height: 24,\r\n width: 24,\r\n },\r\n },\r\n },\r\n },\r\n\r\n '& .btn-confirm': {\r\n backgroundColor: palette.themePrimary,\r\n fontSize: 14,\r\n fontWeight: 600,\r\n marginRight: 8,\r\n lineHeight: '19px',\r\n color: palette.white,\r\n },\r\n\r\n '& .btn-cancel': {\r\n backgroundColor: palette.white,\r\n border: '1px solid #8A8886',\r\n fontSize: 14,\r\n fontWeight: 600,\r\n lineHeight: '19px',\r\n },\r\n },\r\n '& .recommendation-async-apply-form': {\r\n width: 482,\r\n\r\n '& .closeimage': {\r\n fontSize: 16,\r\n position: 'relative',\r\n top: '-8px',\r\n right: '-8px',\r\n fontFamily: iconFontFamily,\r\n },\r\n\r\n '& .closeimage:before': {\r\n content: '\"\\\\E711\"',\r\n },\r\n\r\n '& .recommendation-async-apply-title': {\r\n fontFamily: 'Segoe UI',\r\n fontStyle: 'normal',\r\n fontWeight: 600,\r\n fontSize: '14px',\r\n lineHeight: '19px',\r\n color: palette.black,\r\n marginBottom: 12,\r\n marginTop: 0,\r\n\r\n '& .blocker': {\r\n display: 'inline-block',\r\n\r\n '& .blocker-indicator': {\r\n position: 'relative',\r\n padding: 0,\r\n top: 2,\r\n left: 0,\r\n\r\n '& .blocker-image': {\r\n marginRight: 9,\r\n height: 14,\r\n width: 14,\r\n },\r\n },\r\n },\r\n },\r\n\r\n '& .recommendation-async-apply-actions': {\r\n fontFamily: 'Segoe UI',\r\n fontSize: 12,\r\n lineHeight: '16px',\r\n color: palette.black,\r\n marginBottom: 8,\r\n },\r\n\r\n '& .recommendation-apply-history': {\r\n fontFamily: 'Segoe UI',\r\n fontSize: 12,\r\n lineHeight: '16px',\r\n border: 'unset',\r\n padding: 'unset',\r\n color: '#337ABC',\r\n },\r\n },\r\n },\r\n },\r\n });\r\n","export const getFeedbackModalStyles = () => ({\r\n // recommendations-feedback-modal\r\n '.recommendation-feedback-overlay': {\r\n position: 'fixed',\r\n top: '0',\r\n left: '0',\r\n right: '0',\r\n bottom: '0',\r\n backgroundColor: 'rgba(51,51,51,0.3)',\r\n zIndex: '1061',\r\n '& .recommendation-feedback-modal': {\r\n position: 'absolute',\r\n top: '50%',\r\n left: '50%',\r\n overflow: 'auto',\r\n outline: 'none',\r\n transform: 'translate(-50%,-50%)',\r\n marginRight: '-50%',\r\n width: 605,\r\n padding: 20,\r\n border: '1px solid #d9d9d9',\r\n background: '#fff',\r\n color: '#333',\r\n\r\n '& .form-inline': {\r\n '& .btn': {\r\n marginRight: 8,\r\n },\r\n },\r\n '& button.close': {\r\n marginTop: 3,\r\n },\r\n '& button:disabled': {\r\n color: '#666',\r\n backgroundColor: '#F4F4F4',\r\n border: '1px solid #CCC',\r\n },\r\n '& h3': {\r\n fontWeight: '600',\r\n marginTop: 0,\r\n marginBottom: 30,\r\n },\r\n '& p, & .radio': {\r\n paddingLeft: 10,\r\n fontFamily: '\\'Segoe UI\\', Arial, sans-serif',\r\n\r\n '&[data-checked=true]': {\r\n backgroundColor: '#DEECF9',\r\n },\r\n },\r\n '& div.reasons': {\r\n margin: '20px 0',\r\n },\r\n '& div.comments': {\r\n margin: '20px 0',\r\n '& textarea': {\r\n height: 75,\r\n width: 330,\r\n border: '1px #bbb solid',\r\n background: '#fff',\r\n marginBottom: 5,\r\n },\r\n },\r\n },\r\n },\r\n\r\n // recommendations-dismiss-feedback\r\n '.recommendation-dismiss-feedback-popup': {\r\n position: 'fixed',\r\n right: 10,\r\n bottom: 70,\r\n zIndex: '2000',\r\n '& .close': {\r\n right: 5,\r\n top: 5,\r\n position: 'relative',\r\n },\r\n },\r\n '.recommendation-dismiss-feedback-form': {\r\n width: 400,\r\n padding: 20,\r\n boxShadow: '0 0 5px #ccc',\r\n backgroundColor: '#fff',\r\n '& h3': {\r\n fontWeight: 'bold',\r\n },\r\n '& .checkbox.preference': {\r\n color: '#bbb',\r\n },\r\n '& button:disabled': {\r\n background: '#f3f2f1',\r\n borderColor: 'transparent',\r\n color: '#a19f9d',\r\n cursor: 'default',\r\n },\r\n },\r\n});\r\n","export const getHeaderStyles = ({ palette }) => (\r\n {\r\n display: 'grid',\r\n gridTemplateColumns: '24px minmax(0, min-content) min-content auto max-content 24px',\r\n gridTemplateRows: 24,\r\n alignItems: 'center',\r\n '& .summary-header-icon': {\r\n gridColumn: '1',\r\n justifySelf: 'stretch',\r\n alignSelf: 'center',\r\n position: 'relative',\r\n borderRadius: '50%',\r\n width: 24,\r\n height: 24,\r\n '& span': {\r\n color: palette.white,\r\n position: 'absolute',\r\n fontSize: 13,\r\n left: '25%',\r\n right: '25%',\r\n top: '25%',\r\n bottom: '25%',\r\n },\r\n },\r\n '& .summary-header-title': {\r\n padding: '0 0 0 10px',\r\n gridColumn: '2',\r\n fontSize: 14,\r\n color: '#323130',\r\n fontWeight: '500',\r\n whiteSpace: 'nowrap',\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n },\r\n '& .summary-header-label': {\r\n alignSelf: 'center',\r\n marginLeft: 8,\r\n gridColumn: '3',\r\n fontSize: 12,\r\n background: '#EFF6FC',\r\n border: '1px solid #FFFFFF',\r\n boxSizing: 'border-box',\r\n borderRadius: 12,\r\n width: 48,\r\n padding: '0 10px 0 10px',\r\n },\r\n '& .summary-card-os-tag-container': {\r\n gridColumn: '5',\r\n '& .not-available-line': {\r\n paddingLeft: 10,\r\n paddingRight: 10,\r\n },\r\n '& .iconba.iconba-Trending12': {\r\n paddingLeft: 8,\r\n paddingRight: 8,\r\n paddingBottom: 3,\r\n },\r\n },\r\n '& .summary-header-auto-apply': {\r\n marginLeft: 8,\r\n gridColumn: '3',\r\n height: 20,\r\n fontSize: '11px',\r\n lineHeight: '16px',\r\n borderRadius: '12px',\r\n backgroundColor: '#F7F7F7',\r\n padding: '0px 10px',\r\n display: 'flex',\r\n alignItems: 'center',\r\n\r\n '& .iconba.iconba-FlashAuto': {\r\n top: '2px',\r\n },\r\n },\r\n '& .summary-header-menu': {\r\n gridColumn: '6',\r\n justifySelf: 'right',\r\n '& .toggle-context-menu': {\r\n cursor: 'pointer',\r\n '& button': {\r\n background: 'none',\r\n border: 'none',\r\n margin: 0,\r\n padding: 0,\r\n },\r\n },\r\n '& .bingads-popover': {\r\n right: 5,\r\n },\r\n },\r\n '& .summary-context-menu': {\r\n '& .bingads-popover': {\r\n background: '#fff',\r\n border: '1px solid #ddd',\r\n boxShadow: '3px 3px 4px #ddd',\r\n top: 'inherit !important',\r\n left: 'inherit !important',\r\n '& >ul': {\r\n minWidth: 170,\r\n listStyle: 'none',\r\n margin: '0',\r\n padding: '0',\r\n '& button': {\r\n margin: '0',\r\n padding: '7px 10px',\r\n color: '#333',\r\n fontWeight: 'normal',\r\n textAlign: 'left',\r\n '&[disabled]': {\r\n opacity: 0.5,\r\n },\r\n '&:hover': {\r\n textDecoration: 'none',\r\n background: '#e5e5e5',\r\n },\r\n },\r\n },\r\n },\r\n },\r\n '& .new-badge-container': {\r\n gridColumn: 4,\r\n justifySelf: 'right',\r\n marginRight: 8,\r\n },\r\n }\r\n);\r\n","export const getIconStyles = () => ({\r\n '& .recommendation-keyword-icon': {\r\n backgroundColor: '#00AD56',\r\n },\r\n '& .recommendation-repair-icon': {\r\n backgroundColor: '#A80000',\r\n },\r\n '& .recommendation-ads-icon': {\r\n backgroundColor: '#0078D4',\r\n },\r\n '& .recommendation-bid-icon': {\r\n backgroundColor: '#00B7C3',\r\n },\r\n '& .recommendation-shopping-cart-icon': {\r\n backgroundColor: '#CA5010',\r\n },\r\n '& .recommendation-extension-icon': {\r\n backgroundColor: '#4F6BED',\r\n },\r\n '& .recommendation-seasonal-icon': {\r\n backgroundColor: '#E3008C',\r\n },\r\n '& .recommendation-targeting-icon': {\r\n backgroundColor: '#881798',\r\n },\r\n '& .recommendation-budget-icon': {\r\n backgroundColor: '#8378DE',\r\n },\r\n '& .recommendation-auto-apply-icon': {\r\n backgroundColor: '#373277',\r\n },\r\n '& .recommendation-p-max-icon': {\r\n backgroundColor: '#038387',\r\n },\r\n '& .recommendation-syndication-icon': {\r\n backgroundColor: '#4F6BED',\r\n },\r\n});\r\n","/* eslint-disable jsx-a11y/anchor-is-valid, no-script-url */\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport Promise from 'bluebird';\r\nimport * as urlUtil from '@bingads-webui/url-util';\r\nimport hoistNonReactStatics from 'hoist-non-react-statics';\r\nimport { getDisplayName } from '@bingads-webui-react/hoc-utils';\r\nimport { ClientCenterCustomerService } from '@bingads-webui/clientcenter-customer-service';\r\nimport { oldAlertCenterAdapter } from '@bingads-webui-campaign/notification-center';\r\nimport asyncScheduler from '@bingads-webui-static-legacy/async-scheduler';\r\nimport * as errI18n from '@bingads-webui-component-legacy/api-errors-campaign/index';\r\n\r\nimport {\r\n RecommendationService,\r\n RecommendationDownloadService,\r\n setRecommendationCache,\r\n getRecommendationCache,\r\n MCC_ACCOUNTS_CAPPING,\r\n} from '@bingads-webui-campaign/recommendation-core';\r\n\r\nconst flatten = entities => _.chain(entities)\r\n .map((entity) => {\r\n if (entity.isCustomer) {\r\n if (entity.unAuthorized) {\r\n return [];\r\n }\r\n return flatten(entity.children);\r\n }\r\n return entity;\r\n })\r\n .flatten()\r\n .value();\r\n\r\nexport const withRecommendationServices = ({\r\n currentScenario,\r\n currentActivity,\r\n odataPath,\r\n}) => (WrappedComponent) => {\r\n const HoC = (props) => {\r\n const {\r\n appConfig,\r\n permissions,\r\n pageContext,\r\n i18n,\r\n odata,\r\n cacheManager,\r\n } = props.deps;\r\n\r\n const { getODataErrors } = errI18n;\r\n\r\n const customerService = new ClientCenterCustomerService({ ccBaseUrl: appConfig.get('CCBaseUrl') });\r\n let accountIdsPromise = null;\r\n if (props.isMCC) {\r\n const AccountIdListCache = getRecommendationCache('account-id-list');\r\n accountIdsPromise = _.isUndefined(AccountIdListCache) ? customerService.getCustomerHierarchy({\r\n cid: props.scope.customerId,\r\n uid: props.scope.userId,\r\n returnOnlyDirectlyLinkedEntities: false,\r\n limit: MCC_ACCOUNTS_CAPPING,\r\n }).then((data) => {\r\n const { customerHierarchyEntities } = data;\r\n const flattenedAccounts = flatten(_.first(customerHierarchyEntities).children);\r\n const result = _.chain(flattenedAccounts).map(account => account.id).value();\r\n setRecommendationCache('account-id-list', result);\r\n return result;\r\n }) : Promise.resolve(AccountIdListCache);\r\n } else {\r\n accountIdsPromise = Promise.resolve([]);\r\n }\r\n\r\n const source = urlUtil.getParameter('recsrc') || appConfig.get('recsrc');\r\n\r\n // don't initialize if scope is not set\r\n let dataService = null;\r\n let downloadService = null;\r\n if (props.scope != null) {\r\n dataService = new RecommendationService({\r\n scope: props.scope,\r\n showAlertHandler: oldAlertCenterAdapter.show.bind(oldAlertCenterAdapter),\r\n i18n,\r\n currentScenario,\r\n currentActivity,\r\n odataPath,\r\n permissions,\r\n lcid: pageContext.CultureLcid,\r\n pageContext,\r\n ccJsData: props.ccJsData,\r\n accountIdsPromise,\r\n isMCC: props.isMCC,\r\n asyncScheduler,\r\n alertCenter: oldAlertCenterAdapter,\r\n odata,\r\n newI18n: props.vnextDeps.newI18n || props.newI18n,\r\n cacheManager,\r\n channel: props.channel,\r\n });\r\n downloadService = new RecommendationDownloadService({\r\n scope: props.scope,\r\n alertCenter: oldAlertCenterAdapter,\r\n asyncScheduler,\r\n cacheManager,\r\n getODataErrors,\r\n i18n,\r\n odata,\r\n pageContext,\r\n permissions,\r\n isMCC: props.isMCC,\r\n recommendationService: dataService,\r\n });\r\n }\r\n\r\n return (\r\n {title}
\r\n \r\n {\r\n loading ?\r\n \r\n \r\n \r\n \r\n {newI18n.getString(stageString[stage])}\r\n \r\n \r\n \r\n : content\r\n }\r\n
\r\n {\r\n !loading &&\r\n \r\n
\r\n );\r\n};\r\n\r\nGridInternal.defaultProps = {\r\n minItemHeight: undefined,\r\n rowHeight: undefined,\r\n};\r\n\r\n\r\nconst useWindow = () => {\r\n const getSize = useCallback(() => {\r\n const {\r\n clientWidth,\r\n clientHeight,\r\n } = document.documentElement;\r\n\r\n return {\r\n width: clientWidth,\r\n height: clientHeight,\r\n };\r\n }, []);\r\n\r\n const [windowRect, setWindowRect] = useState(getSize());\r\n\r\n const [update, setUpdate] = useState({\r\n ...windowRect,\r\n });\r\n\r\n useLayoutEffect(() => {\r\n const updateSize = () => {\r\n setUpdate(getSize());\r\n };\r\n window.addEventListener('resize', updateSize);\r\n return () => window.removeEventListener('resize', updateSize);\r\n }, [getSize]);\r\n\r\n useLayoutEffect(() => {\r\n // TODO_opt: if this updates are too frequently, we could do optimization\r\n // TODO: debounce\r\n setWindowRect(update);\r\n }, [update]);\r\n\r\n return [windowRect];\r\n};\r\n\r\nconst useTopDivMetaData = (topDiv, topDivRect) => {\r\n const [offset, setOffset] =\r\n useState(0);\r\n\r\n useLayoutEffect(() => {\r\n if (topDiv) {\r\n let target = topDiv;\r\n let newOffset = 0;\r\n do {\r\n newOffset += target.offsetTop;\r\n target = target.offsetParent;\r\n } while (target);\r\n\r\n if (newOffset !== offset) {\r\n setOffset(newOffset);\r\n }\r\n }\r\n }, [offset, topDiv, topDivRect]);\r\n\r\n return [offset];\r\n};\r\n\r\nconst useScroll = (scrollContainer) => {\r\n const [scrollTop, setScrollTop] = useState(0);\r\n const [update, setUpdate] = useState({\r\n scrollY: scrollTop,\r\n });\r\n\r\n useLayoutEffect(() => {\r\n const scrollHandler = (e) => {\r\n const scrollTop = e && e.target.scrollTop;\r\n setUpdate({\r\n scrollY: scrollTop,\r\n });\r\n };\r\n const windowScrollHandler = () => {\r\n const {\r\n scrollY,\r\n } = window;\r\n setUpdate({\r\n scrollY,\r\n });\r\n };\r\n if (scrollContainer) {\r\n const element = (typeof (scrollContainer)) === 'string' ? document.querySelector(scrollContainer) : scrollContainer;\r\n if (element) {\r\n element.addEventListener('scroll', scrollHandler);\r\n }\r\n } else {\r\n window.addEventListener('scroll', windowScrollHandler);\r\n }\r\n return () => {\r\n if (scrollContainer) {\r\n const element = (typeof (scrollContainer)) === 'string' ? document.querySelector(scrollContainer) : scrollContainer;\r\n if (element) {\r\n element.removeEventListener('scroll', scrollHandler);\r\n }\r\n } else {\r\n window.removeEventListener('scroll', windowScrollHandler);\r\n }\r\n };\r\n }, [scrollContainer]);\r\n\r\n useLayoutEffect(() => {\r\n // TODO_opt: if this updates are too frequently, we could do optimization\r\n const {\r\n scrollY,\r\n } = update;\r\n setScrollTop(scrollY);\r\n }, [update]);\r\n\r\n return [scrollTop];\r\n};\r\n\r\nexport const Grid = (props: GridProps) => {\r\n const {\r\n items,\r\n renderItem,\r\n rowPadding,\r\n columnPadding,\r\n columnWidth: columnWidthProp,\r\n rowHeight: rowHeightProp,\r\n scrollContainer,\r\n minItemHeight,\r\n gridMode,\r\n maxColumns,\r\n } = props;\r\n\r\n const [topDiv, setTopDiv] = useState- \r\n {\r\n visibleItems.map((item) => {\r\n const {\r\n _index: index,\r\n } = item;\r\n\r\n return (\r\n
\r\n {_.map(historyList, ({ imageUrl }, index) => (\r\n onClick(index)}\r\n role=\"button\"\r\n tabIndex={0}\r\n onKeyDown={e => onKeyDown(index, e)}\r\n >\r\n
\r\n ))}\r\n \r\n );\r\n};\r\n\r\n","import React, { useState } from 'react';\r\n\r\nexport const DataContext = React.createContext({});\r\n\r\nexport const DataProvider = ({ children }) => {\r\n const [dataPromise, setDataPromise] = useState(null);\r\n const [data, setData] = useState(null);\r\n\r\n return (\r\n \r\n 
\r\n
\r\n