\r\n \r\n \r\n {showEditBtn && !showTooltipOnSelect && (\r\n
\r\n \r\n {!hideCaption && \r\n {subTitle} \r\n {text &&
\r\n {isLoading ?\r\n {text}
}\r\n\r\n {paletteData.map(colorData => (\r\n colorData &&
\r\n }\r\n \r\n {previewUrl &&
\r\n );\r\n};\r\n\r\nconst calloutProps = { gapSpace: 0 };\r\n/* istanbul ignore next */\r\nconst ActionIconButton = ({ iconName, label, onClick }) => {\r\n const iconProps = useMemo(() => ({ iconName }), [iconName]);\r\n const classes = useImagePreviewRawStyles();\r\n return (\r\n \r\n
\r\n );\r\n};\r\n/* istanbul ignore next */\r\nconst AssetColumn = (i18n, onGotoDetailPage, onGotoEditPage, renderHeaderWithPopup) => ({\r\n key: COLUMN_KEYS.PREVIEW_AND_NAME,\r\n name: i18n.getString(_TL_('Asset')),\r\n ariaLabel: 'asset column',\r\n minWidth: 130,\r\n maxWidth: 130,\r\n isCollapsible: false,\r\n isResizable: true,\r\n sortable: true,\r\n onRenderHeader: renderHeaderWithPopup,\r\n styles: {\r\n sortIcon: { display: 'none' },\r\n },\r\n onRender: item => \r\n
\r\n \r\n onGotoEditPage(id)} />\r\n onGotoDetailPage(id)} />\r\n
\r\n \r\n
\r\n );\r\n};\r\n/* istanbul ignore next */\r\nPerformancePageComponent.propTypes = {\r\n dataService: PropTypes.shape({\r\n assets: PropTypes.arrayOf(PropTypes.shape({})),\r\n totalAssetCount: PropTypes.number,\r\n loadDataInDateRange: PropTypes.func,\r\n loadDataArgs: PropTypes.func,\r\n loadMoreDataInDateRange: PropTypes.func,\r\n }).isRequired,\r\n navigation: PropTypes.shape({\r\n gotoItemDetailFromPerfPage: PropTypes.func,\r\n gotoEditImageFromPerfPage: PropTypes.func,\r\n }),\r\n ianaTimeZone: PropTypes.string,\r\n dateFormat: PropTypes.string,\r\n perfMetricDateRange: PropTypes.shape({\r\n compared: PropTypes.shape({}),\r\n }),\r\n adsStudioUserPreferences: PropTypes.shape({\r\n perfTablePageSize: PropTypes.number,\r\n perfTableSortBy: PropTypes.shape({}),\r\n setPerfTablePageSize: PropTypes.func,\r\n setPerfTableSortBy: PropTypes.func,\r\n }),\r\n assetLibraryAccountPreferences: PropTypes.shape({}),\r\n reload: PropTypes.shape({}), // if changed, force to reload\r\n logger: PropTypes.shape({\r\n logTrace: PropTypes.func,\r\n logError: PropTypes.func,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n renderInlineChart: PropTypes.func,\r\n getChartPreference: PropTypes.func,\r\n\r\n pagePerfMarker: PropTypes.shape({\r\n willFetchFile: PropTypes.func.isRequired,\r\n willInit: PropTypes.func.isRequired,\r\n willFetchData: PropTypes.func.isRequired,\r\n willRender: PropTypes.func.isRequired,\r\n done: PropTypes.func.isRequired,\r\n createChild: PropTypes.func.isRequired,\r\n }),\r\n\r\n isAdsStudioAIGCMVPEnabled: PropTypes.bool,\r\n isAIGCRegionRestricted: PropTypes.bool,\r\n};\r\n/* istanbul ignore next */\r\nPerformancePageComponent.defaultProps = {\r\n navigation: undefined,\r\n pagePerfMarker: undefined,\r\n ianaTimeZone: 'GMT',\r\n dateFormat: 'M/d/yyyy',\r\n perfMetricDateRange: undefined,\r\n adsStudioUserPreferences: undefined,\r\n assetLibraryAccountPreferences: undefined,\r\n reload: null,\r\n renderInlineChart: undefined,\r\n getChartPreference: () => Promise.resolve({}),\r\n\r\n isAdsStudioAIGCMVPEnabled: false,\r\n isAIGCRegionRestricted: false,\r\n};\r\n","import { useState, useCallback } from 'react';\r\nimport { AdsStudioPageName } from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\n/* istanbul ignore next */\r\nexport const useLoadData = ({\r\n filters, perfMetricDateRange, onFailedToLoadData, loadMoreDataInDateRange, loadDataInDateRange, perfMarker,\r\n}) => {\r\n const [loadingData, setLoadingData] = useState(false);\r\n const [loadingMoreData, setLoadingMoreData] = useState(false);\r\n\r\n const loadNextPage = useCallback((count) => {\r\n setLoadingMoreData(true);\r\n return loadMoreDataInDateRange({ count }).catch((err) => {\r\n onFailedToLoadData(err);\r\n }).finally(() => setLoadingMoreData(false));\r\n }, [loadMoreDataInDateRange, onFailedToLoadData]);\r\n\r\n const loadDataAsync = useCallback((count, sortBy) => {\r\n const { isGlobalSearch, ...otherFilters } = filters;\r\n\r\n return loadDataInDateRange({\r\n perfMetricDateRange,\r\n ...otherFilters,\r\n sortBy,\r\n assetsToLoadForSubfolders: 0,\r\n isGlobalSearch,\r\n includeParentHierarchy: isGlobalSearch, // include parent hierarchy when global searching\r\n includeSubfolders: false,\r\n count,\r\n pageName: AdsStudioPageName.PerfPage,\r\n perfMarker: perfMarker.createChild('performancePageLoadData'),\r\n });\r\n }, [filters, loadDataInDateRange, perfMetricDateRange]);\r\n\r\n return {\r\n loadingData,\r\n setLoadingData,\r\n loadingMoreData,\r\n loadNextPage,\r\n loadDataAsync,\r\n };\r\n};\r\n","import { useState, useCallback, useMemo } from 'react';\r\nimport { DEFAULT_PAGE_SIZE } from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\n/* istanbul ignore next */\r\nexport const usePerformancePage = ({\r\n assets, loadNextPage, adsStudioUserPreferences, totalAssetCount, highlightedText,\r\n}) => {\r\n const [pageNumber, setPageNumber] = useState(1);\r\n const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE);\r\n\r\n const onPageChange = useCallback((number) => {\r\n if (assets && assets.length >= number * pageSize) {\r\n // there are enough loaded assets\r\n setPageNumber(number);\r\n } else {\r\n loadNextPage(pageSize).then(() => {\r\n setPageNumber(number);\r\n });\r\n }\r\n }, [assets, loadNextPage, pageSize]);\r\n\r\n const onPageSizeChange = useCallback((size) => {\r\n setPageNumber(1);\r\n setPageSize(size);\r\n if (adsStudioUserPreferences) {\r\n adsStudioUserPreferences.setPerfTablePageSize(size);\r\n }\r\n }, [adsStudioUserPreferences, setPageSize]);\r\n\r\n const pager = useMemo(() => ({\r\n pageNumber,\r\n pageSize,\r\n total: totalAssetCount,\r\n onPageChange,\r\n onPageSizeChange,\r\n }), [onPageChange, onPageSizeChange, pageNumber, pageSize, totalAssetCount]);\r\n\r\n const pagedItems = useMemo(\r\n () => {\r\n if (assets) {\r\n const items = assets.slice((pageNumber - 1) * pageSize, pageNumber * pageSize);\r\n // append search text filter to items, to highligh the text\r\n return items.map(itm => ({ ...itm, highlightedText }));\r\n }\r\n return [];\r\n },\r\n [assets, highlightedText, pageNumber, pageSize]\r\n );\r\n\r\n return {\r\n pageSize,\r\n pager,\r\n pagedItems,\r\n setPageNumber,\r\n setPageSize,\r\n };\r\n};\r\n","import { makeStyles, shorthands } from '@fluentui/react-components';\r\n\r\nexport const useHomePageStyle = makeStyles({\r\n homePage: {\r\n display: 'flex',\r\n ...shorthands.margin('32px', '36px'),\r\n flexDirection: 'column',\r\n ...shorthands.gap('10px'),\r\n },\r\n});\r\n","import { makeStyles, shorthands } from '@fluentui/react-components';\r\nimport homepageBanner from '../../image-asset/homepageBanner.png';\r\n\r\nconst getHomePageTopBannerContainerStyle = makeStyles({\r\n topBanner: {\r\n boxSizing: 'border-box',\r\n width: '100%',\r\n display: 'flex',\r\n ...shorthands.padding('40px'),\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n ...shorthands.gap('24px'),\r\n alignSelf: 'stretch',\r\n ...shorthands.borderRadius('8px'),\r\n backgroundImage: `linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url(${homepageBanner})`,\r\n backgroundSize: 'cover',\r\n backgroundRepeat: 'no-repeat',\r\n },\r\n texts: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n ...shorthands.gap('8px'),\r\n fontFamily: 'Segoe UI',\r\n fontStyle: 'normal',\r\n textAlign: 'center',\r\n alignItems: 'stretch',\r\n },\r\n pageName: {\r\n lineHeight: '37px',\r\n fontSize: '28px',\r\n fontWeight: 600,\r\n },\r\n searchContainer: {\r\n marginTop: '24px',\r\n },\r\n searchBoxWrapper: {\r\n position: 'relative',\r\n height: '90px',\r\n ...shorthands.borderRadius('8px'),\r\n maxWidth: '450px',\r\n ...shorthands.margin('0px', 'auto'),\r\n boxShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.08)',\r\n },\r\n searchBox: {\r\n width: '100%',\r\n height: '100%',\r\n ...shorthands.gap('8px'),\r\n ...shorthands.borderRadius('8px'),\r\n\r\n '&::after': {\r\n paddingTop: '8px',\r\n borderBottomRightRadius: '8px',\r\n borderBottomLeftRadius: '8px',\r\n },\r\n },\r\n sendIcon: {\r\n position: 'absolute',\r\n bottom: '9px',\r\n right: '9px',\r\n cursor: 'pointer',\r\n ...shorthands.padding('0px'),\r\n },\r\n});\r\n\r\nexport default getHomePageTopBannerContainerStyle;\r\n","import { makeStyles, shorthands } from '@fluentui/react-components';\r\n\r\nconst getAssetListBarCarouselStyle = makeStyles({\r\n subHeading: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n fontWeight: 600,\r\n lineHeight: '26px',\r\n fontFamily: 'Segoe UI',\r\n fontSize: '20px',\r\n textAlign: 'left',\r\n marginTop: '30px',\r\n },\r\n paragraph: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n fontFamily: 'Segoe UI',\r\n fontSize: '14px',\r\n fontWeight: 400,\r\n lineHeight: '20px',\r\n textAlign: 'left',\r\n },\r\n itemContainer: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n flexDirection: 'row',\r\n position: 'relative',\r\n width: '100%',\r\n },\r\n btnWrapper: {\r\n width: '32px',\r\n height: '32px',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n position: 'absolute',\r\n zIndex: 1,\r\n ...shorthands.borderRadius('50%'),\r\n boxShadow: '0px 0.3px 0.9px 0px rgba(0, 0, 0, 0.10), 0px 1.6px 3.6px 0px rgba(0, 0, 0, 0.13)',\r\n backgroundColor: '#ffffff',\r\n },\r\n leftWrapper: {\r\n left: '-16px',\r\n },\r\n rightWrapper: {\r\n right: '-16px',\r\n },\r\n leftBtn: {\r\n cursor: 'pointer',\r\n color: '#0078d4',\r\n },\r\n rightBtn: {\r\n cursor: 'pointer',\r\n color: '#0078d4',\r\n },\r\n overlay: {\r\n position: 'absolute',\r\n width: '24px',\r\n height: '230px',\r\n },\r\n leftOverlay: {\r\n left: 0,\r\n backgroundImage: 'linear-gradient(90deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%)',\r\n },\r\n rightOverlay: {\r\n right: 0,\r\n backgroundImage: 'linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255) 100%)',\r\n },\r\n slider: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n scrollBehavior: 'smooth',\r\n whiteSpace: 'nowrap',\r\n flexGrow: 1,\r\n overflowX: 'hidden',\r\n pointerEvents: 'none',\r\n '&::-webkit-scrollbar': {\r\n display: 'none',\r\n },\r\n scrollbarWidth: 'none',\r\n '-ms-overflow-style': 'none',\r\n paddingBottom: '10px',\r\n paddingTop: '8px',\r\n },\r\n cardContainer: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n flexWrap: 'nowrap',\r\n },\r\n});\r\n\r\nexport default getAssetListBarCarouselStyle;\r\n","import { makeStyles, shorthands } from '@fluentui/react-components';\r\n\r\nconst getHomePageGenerateWithAIComponentStyle = makeStyles({\r\n footerContainer: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'left',\r\n width: '100%',\r\n },\r\n subHeading: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n fontWeight: 600,\r\n lineHeight: '26px',\r\n fontFamily: 'Segoe UI',\r\n fontSize: '20px',\r\n textAlign: 'left',\r\n marginBottom: '8px',\r\n },\r\n paragraph: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n fontFamily: 'Segoe UI',\r\n fontSize: '14px',\r\n fontWeight: 200,\r\n lineHeight: '20px',\r\n textAlign: 'left',\r\n marginBottom: '20px',\r\n },\r\n searchBoxWrapper: {\r\n position: 'relative',\r\n width: '345px',\r\n },\r\n searchBox: {\r\n width: '100%',\r\n paddingRight: '30px',\r\n },\r\n sendIcon: {\r\n position: 'absolute',\r\n bottom: '6px',\r\n right: '6px',\r\n cursor: 'pointer',\r\n },\r\n imageRowContainer: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'flex-start',\r\n ...shorthands.gap('16px'),\r\n marginTop: '16px',\r\n flexWrap: 'nowrap',\r\n },\r\n imageWrapper: {\r\n flexShrink: 0,\r\n position: 'relative',\r\n width: '246px',\r\n height: '200px',\r\n ...shorthands.borderRadius('8px'),\r\n '&:hover .overlay, &:focus-within .overlay': {\r\n opacity: 1,\r\n transform: 'translateY(0)',\r\n },\r\n },\r\n image: {\r\n width: '100%',\r\n height: '100%',\r\n objectFit: 'cover',\r\n ...shorthands.borderRadius('8px'),\r\n },\r\n overlay: {\r\n position: 'absolute',\r\n bottom: 0,\r\n left: 0,\r\n width: '100%',\r\n height: '100%',\r\n backgroundColor: 'rgba(0, 0, 0, 0.6)',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n justifyContent: 'center',\r\n alignItems: 'flex-start',\r\n paddingLeft: '16px',\r\n color: '#fff',\r\n opacity: 0,\r\n transitionProperty: 'opacity',\r\n transitionDuration: '0.3s',\r\n transitionTimingFunction: 'ease',\r\n pointerEvents: 'none',\r\n },\r\n overlayText: {\r\n color: '#FFF',\r\n fontFamily: 'Segoe UI',\r\n fontSize: '14px',\r\n fontStyle: 'normal',\r\n lineHeight: 'normal',\r\n marginBottom: '8px',\r\n fontWeight: 400,\r\n textAlign: 'left',\r\n marginLeft: '12px',\r\n marginRight: '12px',\r\n },\r\n overlayButton: {\r\n backgroundColor: 'transparent',\r\n color: '#fff',\r\n ...shorthands.borderRadius('4px'),\r\n cursor: 'pointer',\r\n textAlign: 'left',\r\n marginLeft: '12px',\r\n pointerEvents: 'all',\r\n '&:hover': {\r\n backgroundColor: 'transparent',\r\n color: '#fff',\r\n },\r\n '&:focus': {\r\n outlineColor: '#fff',\r\n },\r\n },\r\n});\r\n\r\nexport default getHomePageGenerateWithAIComponentStyle;\r\n","import React from 'react';\r\nimport { mergeClasses, Textarea, Button } from '@fluentui/react-components';\r\nimport { Send20Regular } from '@fluentui/react-icons';\r\nimport PropTypes from 'prop-types';\r\nimport { getHomePageTopBannerContainerStyle } from '../home-page-styles';\r\n\r\nconst TopHomePageBannerComponent = ({ i18n, onSearch }) => {\r\n const [searchQuery, setSearchQuery] = React.useState('');\r\n\r\n const handleSearchChange = (event) => {\r\n setSearchQuery(event.target.value);\r\n\r\n if (event.key === 'Enter') {\r\n event.preventDefault();\r\n if (event.target.value.trim()) {\r\n onSearch(event.target.value);\r\n }\r\n }\r\n };\r\n\r\n const handleSearch = () => {\r\n if (searchQuery.trim()) {\r\n onSearch(searchQuery);\r\n }\r\n };\r\n\r\n const classes = getHomePageTopBannerContainerStyle();\r\n\r\n return (\r\n \r\n {i18n.getString('Performance')}\r\n {renderDatePicker()}\r\n
\r\n \r\n { isDownloadShown && renderInlineDownload && renderInlineDownload({\r\n setDownloadShown, totalAssetCount, getInlineDownloadColumns, getInlineDownloadFilter,\r\n })}\r\n
\r\n \r\n { shouldShowChart && renderInlineChart && renderInlineChart({\r\n isChartShown, perfTimeSeriesData, loadPerfTimeSeriesData, perfMetricDateRange, filters, perfMarker: performancePagePerfMarker,\r\n })}\r\n
\r\n \r\n {pagedItems && (!dataOwnerPageName || dataOwnerPageName === AdsStudioPageName.PerfPage) &&\r\n renderDetailsList({\r\n pagedItems, onSort, toolbar, pager, columns, sortByColumn, expandColumns,\r\n })\r\n }\r\n {/* show loading indicator */}\r\n {(isPageLoading || loadingMoreData) && (\r\n \r\n \r\n )}\r\n {/* no content */}\r\n {(!isPageLoading && hasNoData) && (\r\n
\r\n {i18n.getString(_TL_(\"No assets match your search. Either you don't have any assets associated with your account or your assets don't yet have performance metrics. Please try again.\"))}
\r\n )}\r\n \r\n
\r\n );\r\n};\r\n\r\n\r\nTopHomePageBannerComponent.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n onSearch: PropTypes.func.isRequired,\r\n serverContext: PropTypes.shape({\r\n CurrentAccount: PropTypes.shape({\r\n Name: PropTypes.string,\r\n }),\r\n }),\r\n};\r\n\r\nTopHomePageBannerComponent.defaultProps = {\r\n serverContext: {},\r\n};\r\n\r\nexport default TopHomePageBannerComponent;\r\n","import { makeStyles, shorthands } from '@fluentui/react-components';\r\n\r\nexport const useImageCardStyles = makeStyles({\r\n imageCardListItem: {\r\n marginRight: '16px',\r\n },\r\n imageCard: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n width: '194px !important',\r\n height: '220px !important',\r\n pointerEvents: 'auto',\r\n },\r\n imageCardThumbnail: {\r\n width: '194px !important',\r\n height: '160px !important',\r\n objectFit: 'cover',\r\n ...shorthands.overflow('hidden'),\r\n },\r\n imageCardFooter: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n flexWrap: 'wrap',\r\n height: '60px !important',\r\n width: '194px !important',\r\n paddingLeft: '15px !important',\r\n },\r\n imageCardFooterContent: {\r\n display: 'flex',\r\n rowGap: '0px !important',\r\n paddingBottom: '2px !important',\r\n flexDirection: 'column',\r\n alignItems: 'flex-start',\r\n ...shorthands.gap('4px'),\r\n },\r\n imageIconAndName: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n fontWeight: 600,\r\n },\r\n imageName: {\r\n width: '142px',\r\n ...shorthands.overflow('hidden'),\r\n whiteSpace: 'nowrap',\r\n textOverflow: 'ellipsis',\r\n },\r\n imageCardCaption: {\r\n paddingBottom: '5px !important',\r\n paddingLeft: '2px !important',\r\n },\r\n});\r\n","import React, { useMemo, useCallback } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {\r\n Body1,\r\n Caption1,\r\n Card,\r\n CardFooter,\r\n CardPreview,\r\n} from '@fluentui/react-components';\r\nimport { ListItem } from '@fluentui/react-list-preview';\r\n\r\nimport { getTimeDescription } from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\nimport { Image20Regular } from '@fluentui/react-icons';\r\nimport { useImageCardStyles } from '../../../home-page-styles/component-styles/home-page-image-asset-cards';\r\n\r\nexport const ImageAssetCard = ({\r\n asset, i18n, navigation, logger, ariaSetsize, ariaPosinset, onClickCard,\r\n}) => {\r\n const styles = useImageCardStyles();\r\n\r\n const assetName = useMemo(() => (asset.name ? asset.name : asset.id), [asset.id, asset.name]);\r\n\r\n const imageTimeCaption = useMemo(() => {\r\n if (asset.modifiedTime > asset.createdTime) {\r\n return getTimeDescription(asset.modifiedTime, i18n) ? `${i18n.getString(_TL_('Edited:'))} ${getTimeDescription(asset.modifiedTime, i18n)}` : '';\r\n }\r\n return getTimeDescription(asset.createdTime, i18n) ? `${i18n.getString(_TL_('Uploaded:'))} ${getTimeDescription(asset.createdTime, i18n)}` : '';\r\n }, [asset.modifiedTime, asset.createdTime, i18n]);\r\n\r\n const handleImageAssetClick = useCallback((imageAsset) => {\r\n if (logger && logger.logTrace) {\r\n logger.logTrace('Image Details: edit image', { assetId: imageAsset.id });\r\n }\r\n navigation.gotoEditImagePage({ imageId: imageAsset.id });\r\n onClickCard();\r\n }, [logger, navigation, onClickCard]);\r\n\r\n const handleImageAssetKeyDown = useCallback((event, imageAsset) => {\r\n if (event.key === 'Enter') {\r\n handleImageAssetClick(imageAsset);\r\n event.preventDefault();\r\n }\r\n }, [handleImageAssetClick]);\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n {i18n.getString(_TL_('What assets are you searching for today?'))}
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nImageAssetCard.propTypes = {\r\n asset: PropTypes.shape({\r\n name: PropTypes.string,\r\n createdTime: PropTypes.instanceOf(Date),\r\n modifiedTime: PropTypes.instanceOf(Date),\r\n originalUrl: PropTypes.string,\r\n id: PropTypes.string,\r\n url: PropTypes.string,\r\n }).isRequired,\r\n i18n: PropTypes.shape({}).isRequired,\r\n navigation: PropTypes.shape({\r\n gotoEditImagePage: PropTypes.func,\r\n }).isRequired,\r\n logger: PropTypes.shape({\r\n logTrace: PropTypes.func,\r\n }).isRequired,\r\n};\r\n","import { makeStyles, shorthands, tokens } from '@fluentui/react-components';\r\n\r\nexport const useFolderCardStyles = makeStyles({\r\n folderCardListItem: {\r\n marginRight: '16px',\r\n },\r\n card: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n width: '194px',\r\n height: '220px',\r\n boxSizing: 'border-box',\r\n ...shorthands.overflow('hidden'),\r\n pointerEvents: 'auto',\r\n },\r\n cardPreview: {\r\n width: '194px',\r\n height: '160px',\r\n objectFit: 'cover',\r\n ...shorthands.overflow('hidden'),\r\n },\r\n footer: {\r\n width: '194px',\r\n ...shorthands.overflow('hidden'),\r\n marginLeft: '-15px',\r\n marginBottom: '-15px',\r\n paddingLeft: '15px',\r\n },\r\n footerContent: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n rowGap: '0px',\r\n ...shorthands.gap('4px'),\r\n },\r\n iconAndName: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n },\r\n folderName: {\r\n width: '142px',\r\n ...shorthands.overflow('hidden'),\r\n whiteSpace: 'nowrap',\r\n textOverflow: 'ellipsis',\r\n },\r\n caption: {\r\n paddingLeft: '2px',\r\n },\r\n imageGrid: {\r\n display: 'grid',\r\n width: '100%',\r\n height: '100%',\r\n justifyItems: 'center',\r\n backgroundColor: tokens.colorNeutralBackground3,\r\n },\r\n thumbnailImage: {\r\n objectFit: 'cover',\r\n width: '100%',\r\n height: '100%',\r\n },\r\n oneImage: {\r\n display: 'block',\r\n width: '100%',\r\n height: '160px', // Full height of preview section\r\n objectFit: 'cover',\r\n },\r\n twoImages: {\r\n display: 'grid',\r\n gridTemplateColumns: 'repeat(2, 1fr)', // 2 equal-width columns\r\n width: '100%',\r\n height: '160px', // Full height of preview section\r\n },\r\n threeImages: {\r\n display: 'grid',\r\n gridTemplateColumns: '1fr 1fr',\r\n gridTemplateRows: '80px 80px', // Use pixel values but fractions\r\n height: '160px', // Full height of preview section\r\n\r\n '& > :nth-child(1)': {\r\n ...shorthands.gridArea(1, 1, 2, 1), // First image takes full height of first column\r\n height: '160px',\r\n },\r\n '& > :nth-child(2)': {\r\n ...shorthands.gridArea(1, 2, 1, 2), // Second image is top in second column\r\n height: '80px',\r\n },\r\n '& > :nth-child(3)': {\r\n ...shorthands.gridArea(2, 2, 2, 2), // Third image is bottom in second column\r\n height: '80px',\r\n },\r\n },\r\n fourImages: {\r\n display: 'grid',\r\n gridTemplateColumns: 'repeat(2, 1fr)', // 2 equal columns\r\n gridTemplateRows: 'repeat(2, 1fr)', // 2 equal rows\r\n width: '100%',\r\n height: '160px', // Full height of preview section\r\n\r\n '& img': {\r\n height: '80px', // Set explicit height for each grid cell\r\n objectFit: 'cover',\r\n },\r\n },\r\n});\r\n","import _ from 'underscore';\r\nimport React, { useCallback, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Folder20Regular } from '@fluentui/react-icons';\r\nimport {\r\n Body1,\r\n Caption1,\r\n Card,\r\n CardFooter,\r\n CardPreview,\r\n} from '@fluentui/react-components';\r\nimport { ListItem } from '@fluentui/react-list-preview';\r\nimport { getTimeDescription, FolderAssetType, VideoStatus } from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\nimport { useFolderCardStyles } from '../../../home-page-styles/component-styles/home-page-folder-asset-cards';\r\n\r\nexport const FolderAssetCard = ({\r\n folder, i18n, navigateIntoFolderItem, navigation, ariaSetsize, ariaPosinset, onClickCard,\r\n}) => {\r\n const styles = useFolderCardStyles();\r\n\r\n // Grab up to the first 4 assets for preview on the card\r\n const assetsToPreview = useMemo(() => {\r\n const filteredAssets = _.filter(folder && folder.assets, asset =>\r\n (asset.folderAssetType === FolderAssetType.Image ||\r\n (asset.folderAssetType === FolderAssetType.Video && asset.status === VideoStatus.Active)));\r\n if (Array.isArray(filteredAssets) && filteredAssets.length > 0) {\r\n return filteredAssets.slice(0, 4);\r\n }\r\n return [];\r\n }, [folder]);\r\n\r\n const handleFolderAssetClick = useCallback((folderAsset) => {\r\n navigation.gotoLibraryPage();\r\n navigateIntoFolderItem({ folder: folderAsset });\r\n onClickCard();\r\n }, [navigateIntoFolderItem, navigation, onClickCard]);\r\n\r\n const handleFolderAssetKeyDown = useCallback((event, folderAsset) => {\r\n if (event.key === 'Enter') {\r\n handleFolderAssetClick(folderAsset);\r\n event.preventDefault();\r\n }\r\n }, [handleFolderAssetClick]);\r\n\r\n // Set grid layout class based on the number of assets\r\n const getGridClass = useMemo(() => {\r\n if (assetsToPreview.length === 1) return styles.oneImage; // No grid for 1 image\r\n if (assetsToPreview.length === 2) return styles.twoImages; // 2 images side by side\r\n if (assetsToPreview.length === 3) return styles.threeImages; // Grid layout for 3 images\r\n if (assetsToPreview.length === 4) return styles.fourImages; // Grid layout for 4 images\r\n return styles.imageGrid; // Default grid for other cases\r\n }, [styles, assetsToPreview]);\r\n\r\n const modifiedTime = useMemo(() => {\r\n if (folder.modifiedTime) {\r\n return getTimeDescription(folder.modifiedTime, i18n);\r\n }\r\n return '';\r\n }, [folder.modifiedTime, i18n]);\r\n\r\n const modifiedTimeString = useMemo(() => (modifiedTime ? `${i18n.getString(_TL_('Accessed:'))} ${modifiedTime}` : ''), [i18n, modifiedTime]);\r\n\r\n return (\r\n \r\n {assetName} \r\n
\r\n \r\n {imageTimeCaption || ''} \r\n
\r\n \r\n
\r\n \r\n {assetsToPreview && assetsToPreview.length > 0 && assetsToPreview.map(asset => (\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nFolderAssetCard.propTypes = {\r\n folder: PropTypes.shape({\r\n folderName: PropTypes.string,\r\n modifiedTime: PropTypes.instanceOf(Date),\r\n folderId: PropTypes.number,\r\n assets: PropTypes.arrayOf(PropTypes.shape({\r\n id: PropTypes.string,\r\n url: PropTypes.string,\r\n originalUrl: PropTypes.string,\r\n thumbnailUrl: PropTypes.string,\r\n })).isRequired,\r\n }).isRequired,\r\n i18n: PropTypes.shape({}).isRequired,\r\n navigateIntoFolderItem: PropTypes.func.isRequired,\r\n navigation: PropTypes.shape({\r\n gotoLibraryPage: PropTypes.func.isRequired,\r\n }).isRequired,\r\n};\r\n","import { makeStyles, shorthands } from '@fluentui/react-components';\r\n\r\nexport const useVideoCardStyles = makeStyles({\r\n videoCardListItem: {\r\n marginRight: '16px',\r\n },\r\n videoCard: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n width: '194px !important',\r\n height: '220px !important',\r\n pointerEvents: 'auto',\r\n },\r\n videoCardThumbnail: {\r\n width: '194px !important',\r\n height: '160px !important',\r\n objectFit: 'cover',\r\n ...shorthands.overflow('hidden'),\r\n },\r\n videoCardPreviewPlaceholder: {\r\n width: '194px !important',\r\n height: '160px !important',\r\n backgroundColor: '#F5F5F5',\r\n ...shorthands.overflow('hidden'),\r\n },\r\n videoCardFooter: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n flexWrap: 'wrap',\r\n height: '60px !important',\r\n width: '194px !important',\r\n paddingLeft: '15px !important',\r\n },\r\n videoCardFooterContent: {\r\n display: 'flex',\r\n rowGap: '0px !important',\r\n paddingBottom: '2px !important',\r\n flexDirection: 'column',\r\n alignItems: 'flex-start',\r\n ...shorthands.gap('4px'),\r\n },\r\n videoIconAndName: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n ...shorthands.gap('4px'),\r\n },\r\n videoName: {\r\n width: '142px',\r\n ...shorthands.overflow('hidden'),\r\n whiteSpace: 'nowrap',\r\n textOverflow: 'ellipsis',\r\n },\r\n videoCardCaption: {\r\n paddingBottom: '5px !important',\r\n paddingLeft: '2px !important',\r\n },\r\n});\r\n","import React, { useCallback, useMemo, useEffect, useRef } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {\r\n Body1,\r\n Caption1,\r\n Card,\r\n CardFooter,\r\n CardPreview,\r\n} from '@fluentui/react-components';\r\nimport { ListItem } from '@fluentui/react-list-preview';\r\nimport { Video20Regular } from '@fluentui/react-icons';\r\nimport {\r\n getTimeDescription,\r\n VideoStatus,\r\n UnverifiedPlaceholderWithStyle,\r\n EncodingPlaceholderWithStyle,\r\n FailedPlaceholderWithStyle,\r\n} from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\nimport { useVideoCardStyles } from '../../../home-page-styles/component-styles/home-page-video-asset-cards';\r\n\r\nexport const VideoAssetCard = ({\r\n asset, i18n, navigation, renameAsset, ariaSetsize, ariaPosinset, onClickCard,\r\n}) => {\r\n const styles = useVideoCardStyles();\r\n const currentActivedCardId = useRef();\r\n\r\n const assetName = useMemo(() => (asset.name ? asset.name : asset.id), [asset.id, asset.name]);\r\n\r\n /* istanbul ignore next */\r\n const videoTimeCaption = useMemo(() => {\r\n if (asset.modifiedTime > asset.createdTime) {\r\n return getTimeDescription(asset.modifiedTime, i18n) ? `${i18n.getString(_TL_('Edited:'))} ${getTimeDescription(asset.modifiedTime, i18n)}` : '';\r\n }\r\n return getTimeDescription(asset.createdTime, i18n) ? `${i18n.getString(_TL_('Uploaded:'))} ${getTimeDescription(asset.createdTime, i18n)}` : '';\r\n }, [asset.modifiedTime, asset.createdTime, i18n]);\r\n\r\n /* istanbul ignore next */\r\n const videoCardPreview = useMemo(() => {\r\n let defaultContent = null;\r\n // status order: unverified => draft => active/invalid\r\n if (asset.status === VideoStatus.Active) {\r\n defaultContent = (\r\n \r\n {folder.folderName} \r\n
\r\n \r\n \r\n {modifiedTimeString}\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nVideoAssetCard.propTypes = {\r\n asset: PropTypes.shape({\r\n name: PropTypes.string,\r\n createdTime: PropTypes.instanceOf(Date),\r\n modifiedTime: PropTypes.instanceOf(Date),\r\n id: PropTypes.string,\r\n thumbnailUrl: PropTypes.string,\r\n url: PropTypes.string,\r\n status: PropTypes.string,\r\n }).isRequired,\r\n i18n: PropTypes.shape({}).isRequired,\r\n navigation: PropTypes.shape({\r\n gotoAssetDetails: PropTypes.func.isRequired,\r\n updateAssetDetailsParams: PropTypes.func.isRequired,\r\n }).isRequired,\r\n renameAsset: PropTypes.func.isRequired,\r\n};\r\n","import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\nimport { ChevronRight16Regular, ChevronLeft16Regular } from '@fluentui/react-icons';\r\nimport { List } from '@fluentui/react-list-preview';\r\nimport { FolderAssetType, handleRealUsedFlag, RealUsedFlagSuffix } from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\nimport { ImageAssetCard } from './home-page-asset-cards/image-asset-card';\r\nimport { FolderAssetCard } from './home-page-asset-cards/folder-asset-card';\r\nimport { VideoAssetCard } from './home-page-asset-cards/video-asset-card';\r\nimport { getAssetListBarCarouselStyle } from '../home-page-styles';\r\n\r\nexport const AssetCard = ({\r\n item,\r\n i18n,\r\n navigateIntoFolderItem,\r\n navigation,\r\n logger,\r\n renameAsset,\r\n ariaSetsize,\r\n ariaPosinset,\r\n adsStudioAccountPreferences,\r\n}) => {\r\n const { folderAssetType } = item || {};\r\n\r\n const onClickCard = useCallback(() => {\r\n handleRealUsedFlag(adsStudioAccountPreferences, RealUsedFlagSuffix.App);\r\n }, [adsStudioAccountPreferences]);\r\n\r\n switch (folderAssetType) {\r\n case FolderAssetType.Folder:\r\n return (\r\n \r\n {assetName} \r\n
\r\n \r\n {videoTimeCaption || ''} \r\n
\r\n \r\n {i18n.getString(_TL_('Recent'))}\r\n
\r\n {i18n.getString(_TL_('Find recent assets'))}
\r\n \r\n {showArrowLeft && (\r\n
\r\n \r\n );\r\n};\r\n\r\nListBarCarousel.propTypes = {\r\n assets: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n navigateIntoFolderItem: PropTypes.func.isRequired,\r\n renameAsset: PropTypes.func.isRequired,\r\n navigation: PropTypes.shape({\r\n gotoAssetDetails: PropTypes.func,\r\n }).isRequired,\r\n logger: PropTypes.shape({\r\n logTrace: PropTypes.func,\r\n }).isRequired,\r\n};\r\n\r\nexport default ListBarCarousel;\r\n","import React, { useCallback, useRef, useState, useEffect } from 'react';\r\nimport { debounce } from 'underscore';\r\nimport { Input, Image, Button, mergeClasses } from '@fluentui/react-components';\r\nimport { Send20Regular } from '@fluentui/react-icons';\r\nimport PropTypes from 'prop-types';\r\nimport { AIPromptExamples } from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\nimport { getHomePageGenerateWithAIComponentStyle } from '../home-page-styles';\r\n\r\nconst GenerateWithAIComponent = ({ i18n, onGenerateImage, loadingStatus }) => {\r\n const classes = getHomePageGenerateWithAIComponentStyle();\r\n\r\n const wrapperRef = useRef(null);\r\n const [searchQuery, setSearchQuery] = useState('');\r\n const [exampleList, setExampleList] = useState([]);\r\n\r\n const onInputChange = useCallback((event) => {\r\n setSearchQuery(event.target.value);\r\n\r\n if (event.key === 'Enter') {\r\n event.preventDefault();\r\n onGenerateImage({\r\n text: event.target.value.trim(),\r\n });\r\n }\r\n }, [onGenerateImage]);\r\n\r\n const handleSearch = useCallback(() => {\r\n onGenerateImage({\r\n text: searchQuery.trim(),\r\n });\r\n }, [onGenerateImage, searchQuery]);\r\n\r\n useEffect(() => {\r\n if (!loadingStatus) {\r\n const wrapperWidth = wrapperRef.current ? wrapperRef.current.offsetWidth : 0;\r\n const maxCount = wrapperWidth > 0 ? Math.floor(wrapperWidth / 264) : 1;\r\n const newList = AIPromptExamples.slice(0, maxCount);\r\n setExampleList(newList);\r\n } else {\r\n setExampleList([]);\r\n }\r\n }, [loadingStatus]);\r\n\r\n useEffect(() => {\r\n const updateExampleList = debounce((entries) => {\r\n if (entries[0]) {\r\n const { clientWidth } = entries[0].target;\r\n\r\n if (!loadingStatus) {\r\n const maxCount = clientWidth > 0 ? Math.floor(clientWidth / 264) : 1;\r\n const newList = AIPromptExamples.slice(0, maxCount);\r\n setExampleList(newList);\r\n }\r\n }\r\n }, 250);\r\n const resizeObserver = window.ResizeObserver && new ResizeObserver(updateExampleList);\r\n if (wrapperRef.current && resizeObserver) {\r\n resizeObserver.observe(wrapperRef.current);\r\n }\r\n return () => {\r\n if (wrapperRef.current && resizeObserver) {\r\n resizeObserver.unobserve(wrapperRef.current);\r\n }\r\n };\r\n }, [loadingStatus]);\r\n\r\n return (\r\n \r\n
\r\n )}\r\n \r\n {assets && assets.length > 0 &&\r\n \r\n {assets.map((item, index) => (\r\n
\r\n {showArrowRight && (\r\n <>\r\n \r\n \r\n
\r\n \r\n )}\r\n {showArrowLeft && }\r\n \r\n
\r\n );\r\n};\r\n\r\nGenerateWithAIComponent.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n onGenerateImage: PropTypes.func.isRequired,\r\n loadingStatus: PropTypes.bool,\r\n};\r\n\r\nGenerateWithAIComponent.defaultProps = {\r\n loadingStatus: false,\r\n};\r\n\r\nexport default GenerateWithAIComponent;\r\n","import { makeStyles, shorthands } from '@fluentui/react-components';\r\n\r\nexport const useActionAssetCardsStyle = makeStyles({\r\n cardContainer: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n ...shorthands.gap('16px'),\r\n flexWrap: 'wrap',\r\n justifyContent: 'space-between',\r\n maxWidth: '1532px',\r\n },\r\n});\r\n","import React, { useRef, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useJsData } from '@bingads-webui-cc-react/js-data-rest';\r\nimport {\r\n getHomePageCardData,\r\n AddAssetEntryCard,\r\n RealUsedFlagSuffix,\r\n handleRealUsedFlag,\r\n isValidXandrAccount,\r\n} from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\n\r\nimport { useActionAssetCardsStyle } from '../../../home-page-styles/component-styles/home-page-action-asset-cards';\r\n\r\nexport const ActionAssetCards = ({\r\n i18n,\r\n aid,\r\n cid,\r\n oDataConfig,\r\n navigation,\r\n logger,\r\n adsStudioAccountPreferences,\r\n permissions,\r\n}) => {\r\n const classes = useActionAssetCardsStyle();\r\n const openSystemUploadRef = useRef(null);\r\n\r\n const isXandrIntEnabled = useMemo(() => permissions.dynamic.XandrIntegrationEnabled, [permissions]);\r\n // eslint-disable-next-line no-restricted-globals\r\n const { data: account } = useJsData(jsData => (isXandrIntEnabled ? jsData.Account.find(aid) : Promise.resolve()), [aid, isXandrIntEnabled]);\r\n const isXandrIntegrationEnabled = useMemo(() => (isXandrIntEnabled ? isValidXandrAccount(account) : false), [account, isXandrIntEnabled]);\r\n\r\n const cardData = useMemo(() => getHomePageCardData({\r\n i18n,\r\n onClickUpload: () => {\r\n handleRealUsedFlag(adsStudioAccountPreferences, RealUsedFlagSuffix.App);\r\n openSystemUploadRef.current = {};\r\n navigation.gotoUploadFilesPanelPage({\r\n aid, cid, oDataConfig, i18n, mode: 'image', openSystemUpload: openSystemUploadRef.current,\r\n });\r\n },\r\n onClickStock: () => {\r\n handleRealUsedFlag(adsStudioAccountPreferences, RealUsedFlagSuffix.App);\r\n if (logger && logger.logTrace) {\r\n logger.logTrace('Add asset from shutterstock');\r\n }\r\n navigation.gotoStockImagePanelPage({\r\n aid, cid, oDataConfig, i18n,\r\n });\r\n },\r\n onClickInvest: () => {\r\n handleRealUsedFlag(adsStudioAccountPreferences, RealUsedFlagSuffix.App);\r\n if (logger && logger.logTrace) {\r\n logger.logTrace('Add asset from invest');\r\n }\r\n navigation.gotoInvestImagePanelPage({\r\n aid, cid, oDataConfig, i18n,\r\n });\r\n },\r\n onClickWebsite: () => {\r\n handleRealUsedFlag(adsStudioAccountPreferences, RealUsedFlagSuffix.App);\r\n if (logger && logger.logTrace) {\r\n logger.logTrace('Add asset from website');\r\n }\r\n navigation.gotoWebsiteImagePanelPage({\r\n aid, cid, oDataConfig, i18n,\r\n });\r\n },\r\n isXandrIntegrationEnabled,\r\n }), [i18n, adsStudioAccountPreferences, navigation, aid, cid, oDataConfig, logger, isXandrIntegrationEnabled]);\r\n\r\n return (\r\n <>\r\n \r\n {i18n.getString(_TL_('Generate images with AI'))}\r\n
\r\n \r\n {i18n.getString(_TL_('Create images for your campaigns by providing prompts.'))}\r\n
\r\n \r\n
\r\n \r\n {exampleList.length > 0 && exampleList.map(image => (\r\n
\r\n \r\n
\r\n ))}\r\n \r\n onGenerateImage({ url: image.imageSrc, text: i18n.getString(image.promptText) })}\r\n >\r\n {i18n.getString(_TL_('Try it now'))}\r\n \r\n
\r\n \r\n {i18n.getString(image.promptText)}\r\n
\r\n \r\n {cardData.map(card => (\r\n
\r\n \r\n );\r\n};\r\n\r\nActionAssetCards.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n aid: PropTypes.number.isRequired,\r\n cid: PropTypes.number.isRequired,\r\n oDataConfig: PropTypes.shape({}).isRequired,\r\n navigation: PropTypes.shape({\r\n gotoWebsiteImagePanelPage: PropTypes.func,\r\n gotoStockImagePanelPage: PropTypes.func,\r\n gotoUploadFilesPanelPage: PropTypes.func,\r\n gotoInvestImagePanelPage: PropTypes.func,\r\n }).isRequired,\r\n logger: PropTypes.shape({\r\n logTrace: PropTypes.func,\r\n }).isRequired,\r\n permissions: PropTypes.shape({\r\n dynamic: PropTypes.shape({}),\r\n }),\r\n};\r\n\r\nActionAssetCards.defaultProps = {\r\n permissions: { dynamic: {} },\r\n};\r\n","import { makeStyles, shorthands, tokens } from '@fluentui/react-components';\r\n\r\nexport const useImageBackgroundSectionStyles = makeStyles({\r\n subHeading: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n fontWeight: 600,\r\n lineHeight: '26px',\r\n fontFamily: 'Segoe UI',\r\n fontSize: '20px',\r\n textAlign: 'left',\r\n marginTop: '20px',\r\n },\r\n paragraph: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n fontFamily: 'Segoe UI',\r\n fontSize: '14px',\r\n fontWeight: 400,\r\n lineHeight: '20px',\r\n textAlign: 'left',\r\n },\r\n backgroundCardContainer: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n flexWrap: 'nowrap',\r\n justifyContent: 'flex-start',\r\n marginBottom: '30px',\r\n ...shorthands.overflow('hidden'),\r\n },\r\n uploadCard: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n width: '247px',\r\n height: '247px',\r\n marginRight: '16px',\r\n ...shorthands.borderRadius('8px'),\r\n ...shorthands.border('1px', 'dashed', tokens.colorNeutralStroke1),\r\n ...shorthands.padding(0, '48px'),\r\n flexShrink: 0,\r\n },\r\n uploadIcon: {\r\n marginTop: '40px',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n },\r\n uploadFrame: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n },\r\n uploadCaption: {\r\n fontFamily: 'Segoe UI',\r\n fontSize: '14px',\r\n fontWeight: 400,\r\n lineHeight: '20px',\r\n textAlign: 'center',\r\n marginBottom: '10px',\r\n },\r\n uploadButton: {\r\n marginTop: 'auto',\r\n textAlign: 'center',\r\n fontFamily: 'Segoe UI',\r\n fontSize: '14px',\r\n fontWeight: 600,\r\n lineHeight: '20px',\r\n marginBottom: '20px',\r\n ...shorthands.borderRadius('4px'),\r\n ...shorthands.padding('5px', '12px'),\r\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\r\n },\r\n imageCard: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n width: '247px',\r\n height: '247px',\r\n marginRight: '16px',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n ...shorthands.borderRadius('8px'),\r\n ...shorthands.overflow('hidden'),\r\n flexShrink: 0,\r\n },\r\n image: {\r\n width: '247px',\r\n height: '247px',\r\n objectFit: 'cover',\r\n },\r\n});\r\n","import React, { useCallback, useRef, useEffect, useState } from 'react';\r\nimport { debounce } from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport {\r\n Button,\r\n Caption1,\r\n mergeClasses,\r\n} from '@fluentui/react-components';\r\nimport {\r\n RealUsedFlagSuffix,\r\n handleRealUsedFlag,\r\n} from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\nimport imageUploadIcon from './image-upload-icon.svg';\r\nimport background1 from './background1.jpg';\r\nimport background2 from './background2.jpg';\r\nimport background3 from './background3.jpg';\r\nimport background4 from './background4.jpg';\r\nimport background5 from './background5.jpg';\r\nimport background6 from './background6.jpg';\r\nimport background7 from './background7.jpg';\r\nimport background8 from './background8.jpg';\r\nimport background9 from './background9.jpg';\r\nimport background10 from './background10.jpg';\r\nimport { useImageBackgroundSectionStyles } from '../../home-page-styles/component-styles/home-page-image-background-section';\r\n\r\nconst staticBackgrounds = [\r\n background1,\r\n background2,\r\n background3,\r\n background4,\r\n background5,\r\n background6,\r\n background7,\r\n background8,\r\n background9,\r\n background10,\r\n];\r\n\r\nexport const ImageBackgroundCards = ({\r\n i18n, navigation, loadingStatus, isAIGCRegionRestricted, notificationApi, adsStudioAccountPreferences,\r\n}) => {\r\n const styles = useImageBackgroundSectionStyles();\r\n const [exampleList, setExampleList] = useState([]);\r\n\r\n const handleImageUploadClick = useCallback(() => {\r\n if (isAIGCRegionRestricted) {\r\n notificationApi.showWarning(i18n.getString(_TL_('This feature isn\\'t available in all markets.')));\r\n } else {\r\n navigation.gotoBackgroundRemovalModal();\r\n }\r\n handleRealUsedFlag(adsStudioAccountPreferences, RealUsedFlagSuffix.App);\r\n }, [isAIGCRegionRestricted, adsStudioAccountPreferences, notificationApi, i18n, navigation]);\r\n\r\n const onExampleImageKeyDown = useCallback((event) => {\r\n if (event.key === 'Enter') {\r\n event.preventDefault();\r\n handleImageUploadClick();\r\n }\r\n }, [handleImageUploadClick]);\r\n\r\n const wrapperRef = useRef(null);\r\n\r\n useEffect(() => {\r\n if (!loadingStatus) {\r\n const wrapperWidth = wrapperRef.current ? wrapperRef.current.offsetWidth : 0;\r\n const maxCount = wrapperWidth > 0 ? Math.floor(wrapperWidth / 264) : 1;\r\n const newList = staticBackgrounds.slice(0, maxCount - 1);\r\n setExampleList(newList);\r\n } else {\r\n setExampleList([]);\r\n }\r\n }, [loadingStatus]);\r\n\r\n useEffect(() => {\r\n const updateExampleList = debounce((entries) => {\r\n if (entries[0]) {\r\n const { clientWidth } = entries[0].target;\r\n\r\n if (!loadingStatus) {\r\n const maxCount = clientWidth > 0 ? Math.floor(clientWidth / 264) : 1;\r\n const newList = staticBackgrounds.slice(0, maxCount - 1);\r\n setExampleList(newList);\r\n }\r\n }\r\n }, 250);\r\n const resizeObserver = window.ResizeObserver && new ResizeObserver(updateExampleList);\r\n if (wrapperRef.current && resizeObserver) {\r\n resizeObserver.observe(wrapperRef.current);\r\n }\r\n return () => {\r\n if (wrapperRef.current && resizeObserver) {\r\n resizeObserver.unobserve(wrapperRef.current);\r\n }\r\n };\r\n }, [loadingStatus]);\r\n\r\n return (\r\n <>\r\n \r\n {i18n.getString(_TL_('Try a different background'))}\r\n
\r\n \r\n {i18n.getString(_TL_('Try out a new background for your image'))}\r\n
\r\n\r\n \r\n \r\n {exampleList.length > 0 && exampleList.map((background, index) => (\r\n \r\n 
\r\n
\r\n ))}\r\n \r\n \r\n );\r\n};\r\n\r\nImageBackgroundCards.propTypes = {\r\n oDataConfig: PropTypes.shape({}).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n navigation: PropTypes.shape({\r\n gotoUploadFilesPanelPage: PropTypes.func,\r\n }).isRequired,\r\n isAIGCRegionRestricted: PropTypes.bool.isRequired,\r\n notificationApi: PropTypes.shape({\r\n showWarning: PropTypes.func.isRequired,\r\n }).isRequired,\r\n};\r\n","import _ from 'underscore';\r\nimport React, { useEffect, useState, useCallback, useContext, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { mergeClasses } from '@fluentui/react-components';\r\nimport {\r\n AdsStudioSpinner,\r\n GenerateImageContext,\r\n CSMLSortBy,\r\n AIGCHandler,\r\n AdStudioSurveyTriggerFlag,\r\n addAdStudioSurveyTriggerFlag,\r\n RealUsedFlagSuffix,\r\n handleRealUsedFlag,\r\n} from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\nimport { Overlay } from '@bingads-webui-react/fabric-control';\r\nimport { setClarityTag } from '@bingads-webui-universal/clarity';\r\nimport { usePageActiveTimeTracker } from '@bingads-webui-campaign-react/common-hooks';\r\n\r\nimport { HomePageTopBannerComponent, AssetListBarCarousel, HomePageGenerateWithAIComponent } from './components';\r\nimport { ActionAssetCards } from './components/home-page-asset-cards/action-asset-cards';\r\nimport { ImageBackgroundCards } from './components/home-page-image-background-section';\r\nimport { useHomePageStyle } from './home-page-styles';\r\n\r\nconst HomePage = ({\r\n i18n,\r\n aid,\r\n cid,\r\n oDataConfig,\r\n dataService,\r\n libraryDataService,\r\n notificationApi,\r\n isAdsStudioAIGCMVPEnabled,\r\n isAIGCRegionRestricted,\r\n logger,\r\n reload,\r\n navigation,\r\n pagePerfMarker: homePagePerfMarker,\r\n setDataLoaded,\r\n permissions,\r\n adsStudioAccountPreferences,\r\n}) => {\r\n const classes = useHomePageStyle();\r\n\r\n const {\r\n loadData,\r\n assets = [],\r\n renameAsset,\r\n } = dataService;\r\n\r\n const {\r\n navigateIntoFolderItem,\r\n } = libraryDataService;\r\n\r\n const [isPageInited, setPageInited] = useState(false);\r\n const [loadingData, setLoadingData] = useState(false);\r\n\r\n const { setGenerateImageExample } = useContext(GenerateImageContext);\r\n const isAdsStudioBackgroundChangeEnabled = _.get(permissions, ['dynamic', 'AdsStudioBackgroundChange'], false);\r\n\r\n const onFailedToLoadData = useCallback(() => {\r\n notificationApi.showWarning(i18n.getString(_TL_('Failed to load images. Please refresh the page and try again.')));\r\n }, [i18n, notificationApi]);\r\n\r\n // init page\r\n useEffect(() => {\r\n if (!isPageInited) {\r\n setPageInited(true);\r\n }\r\n }, [isPageInited]);\r\n\r\n usePageActiveTimeTracker(logger, 'Home');\r\n\r\n useEffect(() => {\r\n setClarityTag({ LoadAdsStudioHomePage: true });\r\n }, []);\r\n\r\n // load data for initial page load\r\n useEffect(() => {\r\n if (!isPageInited) {\r\n // wait until page is initialized\r\n return;\r\n }\r\n\r\n // Important! Add a trivial log so that reload will be an explicit dep.\r\n if (reload) {\r\n logger.logTrace('force to reload');\r\n }\r\n\r\n homePagePerfMarker.willFetchData();\r\n setLoadingData(true);\r\n loadData({\r\n isGlobalSearch: true,\r\n assetsToLoadForSubfolders: 5,\r\n includeParentHierarchy: true,\r\n isRecentSorting: true,\r\n sortBy: CSMLSortBy.MostRecent,\r\n })\r\n .catch(() => {\r\n onFailedToLoadData();\r\n }).finally(() => {\r\n setLoadingData(false);\r\n homePagePerfMarker.willRender();\r\n if (setDataLoaded) {\r\n setDataLoaded();\r\n }\r\n addAdStudioSurveyTriggerFlag(adsStudioAccountPreferences, AdStudioSurveyTriggerFlag.App, RealUsedFlagSuffix.App);\r\n });\r\n }, [isPageInited, loadData, onFailedToLoadData, reload, logger]);\r\n\r\n const isPageLoading = !isPageInited || loadingData;\r\n\r\n const onSearch = useCallback((searchQuery) => {\r\n navigation.gotoSearchResultPage({\r\n query: searchQuery,\r\n });\r\n }, [navigation]);\r\n\r\n const onGenerateImage = useCallback(({ url, text }) => {\r\n handleRealUsedFlag(adsStudioAccountPreferences, RealUsedFlagSuffix.App);\r\n AIGCHandler(isAdsStudioAIGCMVPEnabled, isAIGCRegionRestricted, notificationApi, i18n, () => {\r\n setGenerateImageExample({\r\n prompt: text,\r\n imageUrl: url,\r\n });\r\n navigation.gotoAIGenerationPanelPage();\r\n });\r\n }, [adsStudioAccountPreferences, i18n, isAIGCRegionRestricted, isAdsStudioAIGCMVPEnabled, navigation, notificationApi, setGenerateImageExample]);\r\n\r\n const sortedAssets = useMemo(() => (_.sortBy(assets, asset => asset.modifiedTime).reverse()), [assets]);\r\n\r\n return (\r\n \r\n {(isPageLoading) && (\r\n \r\n \r\n )}\r\n
\r\n );\r\n};\r\n\r\nHomePage.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n aid: PropTypes.number.isRequired,\r\n cid: PropTypes.number.isRequired,\r\n oDataConfig: PropTypes.shape({}).isRequired,\r\n dataService: PropTypes.shape({\r\n assets: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\r\n loadData: PropTypes.func.isRequired,\r\n renameAsset: PropTypes.func.isRequired,\r\n }),\r\n libraryDataService: PropTypes.shape({\r\n navigateIntoFolderItem: PropTypes.func,\r\n }),\r\n notificationApi: PropTypes.shape({\r\n showWarning: PropTypes.func.isRequired,\r\n }),\r\n logger: PropTypes.shape({\r\n logTrace: PropTypes.func,\r\n }).isRequired,\r\n adsStudioAccountPreferences: PropTypes.shape({}),\r\n reload: PropTypes.shape({}),\r\n navigation: PropTypes.shape({\r\n gotoSearchResultPage: PropTypes.func.isRequired,\r\n gotoAIGenerationPanelPage: PropTypes.func.isRequired,\r\n }).isRequired,\r\n isAIGCRegionRestricted: PropTypes.bool,\r\n permissions: PropTypes.shape({\r\n dynamic: PropTypes.shape({}).isRequired,\r\n }).isRequired,\r\n};\r\n\r\nHomePage.defaultProps = {\r\n dataService: {},\r\n libraryDataService: {},\r\n notificationApi: {},\r\n adsStudioAccountPreferences: undefined,\r\n reload: null,\r\n isAIGCRegionRestricted: false,\r\n};\r\n\r\nexport const HomePageComponent = HomePage;\r\n","import { makeStyles, shorthands } from '@fluentui/react-components';\r\n\r\nexport const useImagesPageStyle = makeStyles({\r\n imagePage: {\r\n display: 'flex',\r\n ...shorthands.margin('32px', '36px'),\r\n flexDirection: 'column',\r\n ...shorthands.gap('24px'),\r\n ...shorthands.overflow('hidden'),\r\n },\r\n});\r\n","import { makeStyles, shorthands } from '@fluentui/react-components';\r\n\r\nexport const useImageBannerContainerStyle = makeStyles({\r\n topBanner: {\r\n width: '100%',\r\n display: 'flex',\r\n ...shorthands.padding('36px'),\r\n flexDirection: 'column',\r\n alignItems: 'flex-start',\r\n ...shorthands.gap('24px'),\r\n alignSelf: 'stretch',\r\n ...shorthands.borderRadius('8px'),\r\n backgroundImage: 'linear-gradient(97deg, #E4E2F3 7.52%, #E3EDF3 91.2%), linear-gradient(102deg, rgba(217, 204, 223, 0.25) -0.35%, rgba(231, 222, 227, 0.25) 53.37%, rgba(116, 92, 185, 0.25) 104.98%)',\r\n },\r\n texts: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n ...shorthands.gap('8px'),\r\n fontFamily: 'Segoe UI',\r\n fontStyle: 'normal',\r\n textAlign: 'left',\r\n },\r\n pageName: {\r\n lineHeight: '37px',\r\n fontSize: '28px',\r\n fontWeight: 600,\r\n },\r\n descriptions: {\r\n fontSize: '16px',\r\n lineHeight: '21px',\r\n fontWeight: 400,\r\n },\r\n entryCard: {\r\n width: '100%',\r\n },\r\n});\r\n","import { makeStyles, shorthands } from '@fluentui/react-components';\r\n\r\nexport const useImageCardContainerStyle = makeStyles({\r\n cardContainer: {\r\n display: 'flex',\r\n justifyContent: 'flex-start',\r\n alignItems: 'flex-start',\r\n ...shorthands.gap('8px'),\r\n flexDirection: 'row',\r\n flexWrap: 'wrap',\r\n width: '100%',\r\n },\r\n});\r\n","import { makeStyles, shorthands, tokens } from '@fluentui/react-components';\r\n\r\nexport const useImageEmptyViewStyle = makeStyles({\r\n emptyView: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n ...shorthands.gap('8px'),\r\n },\r\n emptyIcon: {\r\n width: '256px',\r\n height: '256px',\r\n },\r\n mainText: {\r\n fontFamily: 'Segoe UI',\r\n fontStyle: 'normal',\r\n textAlign: 'center',\r\n ...shorthands.overflow('hidden'),\r\n textOverflow: 'ellipsis',\r\n whiteSpace: 'nowrap',\r\n color: tokens.neutralForegroundRest,\r\n lineHeight: '22px',\r\n fontWeight: 400,\r\n },\r\n});\r\n\r\n","import { makeStyles, shorthands } from '@fluentui/react-components';\r\n\r\nexport const useVideoPageStyle = makeStyles({\r\n videoPage: {\r\n display: 'flex',\r\n ...shorthands.margin('32px', '36px'),\r\n flexDirection: 'column',\r\n ...shorthands.gap('24px'),\r\n ...shorthands.overflow('hidden'),\r\n },\r\n});\r\n","import { makeStyles, shorthands } from '@fluentui/react-components';\r\nimport videopageBanner from '../../video-page-styles/image-asset/videopageBanner.png';\r\n\r\nexport const useVideoPageTopBannerContainerStyle = makeStyles({\r\n topBanner: {\r\n boxSizing: 'border-box',\r\n width: '100%',\r\n display: 'flex',\r\n ...shorthands.padding('36px'),\r\n flexDirection: 'column',\r\n alignItems: 'flex-start',\r\n ...shorthands.gap('24px'),\r\n alignSelf: 'stretch',\r\n ...shorthands.borderRadius('8px'),\r\n backgroundImage: `url(${videopageBanner})`,\r\n backgroundSize: 'cover',\r\n backgroundRepeat: 'no-repeat',\r\n },\r\n texts: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n ...shorthands.gap('8px'),\r\n fontFamily: 'Segoe UI',\r\n fontStyle: 'normal',\r\n textAlign: 'left',\r\n },\r\n pageName: {\r\n lineHeight: '37px',\r\n fontSize: '28px',\r\n fontWeight: 600,\r\n },\r\n descriptions: {\r\n fontSize: '16px',\r\n lineHeight: '21px',\r\n fontWeight: 400,\r\n },\r\n entryCard: {\r\n width: '100%',\r\n },\r\n});\r\n","import { makeStyles, shorthands } from '@fluentui/react-components';\r\n\r\nexport const useVideoCardContainerStyle = makeStyles({\r\n cardContainer: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n justifyContent: 'flex-start',\r\n alignItems: 'flex-start',\r\n ...shorthands.gap('8px'),\r\n flexDirection: 'row',\r\n maxWidth: '75%',\r\n },\r\n});\r\n","import { makeStyles, shorthands, tokens } from '@fluentui/react-components';\r\n\r\nexport const useVideoEmptyViewStyle = makeStyles({\r\n emptyView: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n ...shorthands.gap('8px'),\r\n },\r\n emptyIcon: {\r\n width: '256px',\r\n height: '256px',\r\n },\r\n mainText: {\r\n fontFamily: 'Segoe UI',\r\n fontStyle: 'normal',\r\n textAlign: 'center',\r\n ...shorthands.overflow('hidden'),\r\n textOverflow: 'ellipsis',\r\n whiteSpace: 'nowrap',\r\n color: tokens.neutralForegroundRest,\r\n lineHeight: '22px',\r\n fontWeight: 400,\r\n },\r\n});\r\n\r\n","import { makeStyles, shorthands } from '@fluentui/react-components';\r\n\r\nexport const useSearchResultViewStyle = makeStyles({\r\n searchResultView: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n ...shorthands.margin('32px', '36px'),\r\n ...shorthands.gap('24px'),\r\n },\r\n breadcrumbButton: {\r\n '&.fui-BreadcrumbButton': {\r\n color: '#0F6CBD',\r\n },\r\n },\r\n breadcrumbButtonCurrent: {\r\n '&.fui-BreadcrumbButton': {\r\n color: '#424242',\r\n fontWeight: 400,\r\n },\r\n },\r\n headerContainer: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n ...shorthands.gap('8px'),\r\n marginTop: '24px',\r\n marginBottom: '24px',\r\n },\r\n headerTitle: {\r\n fontSize: '28px',\r\n fontWeight: 600,\r\n },\r\n defaultSearchQuery: {\r\n color: '#464FEB',\r\n fontStyle: 'italic',\r\n },\r\n});\r\n","import React, { useRef, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { mergeClasses } from '@fluentui/react-components';\r\nimport { useJsData } from '@bingads-webui-cc-react/js-data-rest';\r\nimport {\r\n getEntryCardData,\r\n AddAssetEntryCard,\r\n AIGCHandler,\r\n isValidXandrAccount,\r\n} from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\n\r\nimport { useImageCardContainerStyle } from '../../styles';\r\n\r\nexport const AssetsEntryCardContainer = ({\r\n i18n,\r\n aid,\r\n cid,\r\n oDataConfig,\r\n navigation,\r\n isAdsStudioAIGCMVPEnabled,\r\n isAIGCRegionRestricted,\r\n notificationApi,\r\n logger,\r\n permissions,\r\n}) => {\r\n const classes = useImageCardContainerStyle();\r\n const openSystemUploadRef = useRef(null);\r\n\r\n const isXandrIntEnabled = useMemo(() => permissions.dynamic.XandrIntegrationEnabled, [permissions]);\r\n // eslint-disable-next-line no-restricted-globals\r\n const { data: account } = useJsData(jsData => (isXandrIntEnabled ? jsData.Account.find(aid) : Promise.resolve()), [aid, isXandrIntEnabled]);\r\n const isXandrIntegrationEnabled = useMemo(() => (isXandrIntEnabled ? isValidXandrAccount(account) : false), [account, isXandrIntEnabled]);\r\n\r\n const cardData = getEntryCardData({\r\n i18n,\r\n isImagePage: true,\r\n onClickCreate: () => {\r\n AIGCHandler(isAdsStudioAIGCMVPEnabled, isAIGCRegionRestricted, notificationApi, i18n, () => {\r\n navigation.gotoAIGenerationPanelPage();\r\n });\r\n },\r\n onClickUpload: () => {\r\n openSystemUploadRef.current = {};\r\n navigation.gotoUploadFilesPanelPage({\r\n aid, cid, oDataConfig, i18n, mode: 'image', openSystemUpload: openSystemUploadRef.current,\r\n });\r\n },\r\n onClickStock: () => {\r\n if (logger && logger.logTrace) {\r\n logger.logTrace('Add asset from shutterstock');\r\n }\r\n navigation.gotoStockImagePanelPage({\r\n aid, cid, oDataConfig, i18n,\r\n });\r\n },\r\n onClickInvest: () => {\r\n if (logger && logger.logTrace) {\r\n logger.logTrace('Add asset from invest');\r\n }\r\n navigation.gotoInvestImagePanelPage({\r\n aid, cid, oDataConfig, i18n,\r\n });\r\n },\r\n onClickWebsite: () => {\r\n if (logger && logger.logTrace) {\r\n logger.logTrace('Add asset from website');\r\n }\r\n navigation.gotoWebsiteImagePanelPage({\r\n aid, cid, oDataConfig, i18n,\r\n });\r\n },\r\n isXandrIntegrationEnabled,\r\n });\r\n\r\n return (\r\n <>\r\n \r\n {cardData.map(card => (\r\n
\r\n \r\n );\r\n};\r\n\r\n\r\nAssetsEntryCardContainer.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n aid: PropTypes.number.isRequired,\r\n cid: PropTypes.number.isRequired,\r\n oDataConfig: PropTypes.shape({}).isRequired,\r\n navigation: PropTypes.shape({\r\n gotoWebsiteImagePanelPage: PropTypes.func,\r\n gotoStockImagePanelPage: PropTypes.func,\r\n gotoUploadFilesPanelPage: PropTypes.func,\r\n gotoAIGenerationPanelPage: PropTypes.func,\r\n gotoInvestImagePanelPage: PropTypes.func,\r\n }).isRequired,\r\n logger: PropTypes.shape({\r\n logTrace: PropTypes.func,\r\n }).isRequired,\r\n isAIGCRegionRestricted: PropTypes.bool.isRequired,\r\n permissions: PropTypes.shape({\r\n dynamic: PropTypes.shape({}),\r\n }),\r\n};\r\n\r\nAssetsEntryCardContainer.defaultProps = {\r\n permissions: { dynamic: {} },\r\n};\r\n","import _ from 'underscore';\r\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {\r\n AdsStudioAssetGridCell,\r\n GridSectionName,\r\n SectionTilesGrid,\r\n DEFAULT_PAGE_SIZE,\r\n TilesGridLoadingCell,\r\n AdsStudioSpinner,\r\n ManualAddedImageSource,\r\n getUpdatedAssets,\r\n} from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\n\r\nexport const ImageGridView = ({\r\n isSearchResultPage,\r\n i18n,\r\n dataService,\r\n logger,\r\n onFailedToLoadData,\r\n searchText,\r\n navigation,\r\n cropDataService,\r\n}) => {\r\n const {\r\n assets,\r\n totalAssetCount,\r\n totalLibraryAssetCount,\r\n loadMoreData,\r\n renameAsset,\r\n } = dataService;\r\n\r\n const [isLoadingMore, setIsLoadingMore] = useState(false);\r\n\r\n const { imageCroppingTasks } = cropDataService;\r\n\r\n const loadedAssetsList = useMemo(() => {\r\n const updatedAssets = getUpdatedAssets({\r\n assets,\r\n updates: {\r\n imageCroppingTasks,\r\n },\r\n });\r\n\r\n const updatedAssetsWithAriaLabel = _.map(updatedAssets, (asset) => {\r\n if (_.isObject(asset)) {\r\n return ({\r\n ...asset,\r\n ariaLabel: i18n.getString(_TL_('Image preview')),\r\n });\r\n }\r\n return asset;\r\n });\r\n\r\n return updatedAssetsWithAriaLabel;\r\n }, [assets, i18n, imageCroppingTasks]);\r\n\r\n const imagesGridSection = useMemo(() => ({\r\n sectionName: GridSectionName.Asset,\r\n sectionClassName: 'ads-studio-image-section',\r\n itemKey: 'id',\r\n items: loadedAssetsList,\r\n totalItemCount: totalAssetCount,\r\n config: {\r\n scrollContainer: '[role=\"main\"]',\r\n minItemHeight: 42,\r\n },\r\n }), [loadedAssetsList, totalAssetCount]);\r\n\r\n const sectionGridData = useMemo(\r\n () => ([imagesGridSection]),\r\n [imagesGridSection]\r\n );\r\n\r\n const hasLibraryAssets = useMemo(() => _.some(assets, item => item && item.manualAddedImageSourceType === ManualAddedImageSource.Library), [assets]);\r\n\r\n const libraryAssets = useMemo(() => (_.filter(assets, item =>\r\n item && (_.isUndefined(item.manualAddedImageSourceType) || item.manualAddedImageSourceType === ManualAddedImageSource.Library))), [assets]);\r\n\r\n const onRenderCell = useCallback(({ item }) => {\r\n const {\r\n _index,\r\n id,\r\n folderAssetType,\r\n manualAddedImageSourceType,\r\n url,\r\n } = item || {};\r\n\r\n const onCellDetailsClick = () => {\r\n navigation.gotoAssetDetails({\r\n assetId: id,\r\n assets: libraryAssets,\r\n totalAssetCount: hasLibraryAssets ? totalLibraryAssetCount : totalAssetCount,\r\n folderAssetType,\r\n loadMoreData,\r\n renameAsset,\r\n });\r\n };\r\n const onCellEditClick = () => {\r\n const editImageUrl = manualAddedImageSourceType === ManualAddedImageSource.ShutterStock ? url : undefined;\r\n if (logger && logger.logTrace) {\r\n logger.logTrace('Image Details: edit image', { assetId: id });\r\n }\r\n navigation.gotoEditImagePage({\r\n imageId: id,\r\n editImageUrl,\r\n query: isSearchResultPage ? searchText : undefined,\r\n });\r\n };\r\n\r\n return (\r\n \r\n
\r\n )}\r\n \r\n
\r\n );\r\n};\r\n\r\nImagesTopBannerComponent.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n aid: PropTypes.number.isRequired,\r\n cid: PropTypes.number.isRequired,\r\n oDataConfig: PropTypes.shape({}).isRequired,\r\n navigation: PropTypes.shape({}).isRequired,\r\n logger: PropTypes.shape({\r\n logTrace: PropTypes.func,\r\n }).isRequired,\r\n isAIGCRegionRestricted: PropTypes.bool.isRequired,\r\n permissions: PropTypes.shape({\r\n dynamic: PropTypes.shape({}),\r\n }),\r\n};\r\n\r\nImagesTopBannerComponent.defaultProps = {\r\n permissions: { dynamic: {} },\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { mergeClasses } from '@fluentui/react-components';\r\nimport { EmptyViewIcons } from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\n\r\nimport { useImageEmptyViewStyle } from '../../styles';\r\n\r\nexport const ImageEmptyView = ({ i18n, isSearchResult }) => {\r\n const classes = useImageEmptyViewStyle(); // Correct placement of classes initialization\r\n\r\n return (\r\n \r\n
\r\n \r\n {i18n.getString(_TL_('Images'))}\r\n
\r\n \r\n {i18n.getString(_TL_('Add new images or find existing images.'))}\r\n
\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nImageEmptyView.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n isSearchResult: PropTypes.bool,\r\n};\r\n\r\nImageEmptyView.defaultProps = {\r\n isSearchResult: false,\r\n};\r\n","import _ from 'underscore';\r\nimport { mergeClasses } from '@fluentui/react-components';\r\nimport React, { useEffect, useState, useCallback, useContext, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {\r\n FolderAssetType,\r\n AdsStudioSpinner,\r\n FilterContext,\r\n ImagesFilterBar,\r\n useAdsStudioServices,\r\n} from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\nimport { Overlay } from '@bingads-webui-react/fabric-control';\r\nimport { usePageActiveTimeTracker } from '@bingads-webui-campaign-react/common-hooks';\r\n\r\nimport { ImagesTopBannerComponent, ImageGridView, ImageEmptyView } from './components';\r\nimport { useImagesPageStyle } from '../styles';\r\n\r\nconst ImagesPage = ({\r\n i18n,\r\n aid,\r\n cid,\r\n oDataConfig,\r\n dataService,\r\n notificationApi,\r\n logger,\r\n navigation,\r\n adsStudioUserPreferences,\r\n isAdsStudioAIGCMVPEnabled,\r\n isAIGCRegionRestricted,\r\n reload,\r\n pagePerfMarker: imagePagePerfMarker,\r\n setDataLoaded,\r\n permissions,\r\n}) => {\r\n const classes = useImagesPageStyle();\r\n\r\n const {\r\n totalAssetCount,\r\n loadData,\r\n } = dataService;\r\n\r\n const cropDataService = useAdsStudioServices();\r\n\r\n const [isPageInited, setPageInited] = useState(false);\r\n const [loadingData, setLoadingData] = useState(false);\r\n\r\n const { filterBar } = useContext(FilterContext);\r\n\r\n const {\r\n searchText = '',\r\n sortBy = null,\r\n } = useMemo(() => filterBar.getFilters(), [filterBar]);\r\n\r\n const onFailedToLoadData = useCallback(() => {\r\n notificationApi.showWarning(i18n.getString(_TL_('Failed to load images. Please refresh the page and try again.')));\r\n }, [i18n, notificationApi]);\r\n\r\n // init page\r\n useEffect(() => {\r\n if (!isPageInited) {\r\n setPageInited(true);\r\n }\r\n }, [isPageInited]);\r\n\r\n usePageActiveTimeTracker(logger, 'Image');\r\n\r\n // load data for initial page load\r\n useEffect(() => {\r\n if (!isPageInited) {\r\n // wait until page is initialized\r\n return;\r\n }\r\n\r\n if (reload) { // Important! Add a trivial log so that reload will be an explicit dep.\r\n logger.logTrace('force to reload');\r\n }\r\n imagePagePerfMarker.willFetchData();\r\n setLoadingData(true);\r\n loadData({\r\n assetTypeFilter: FolderAssetType.Image,\r\n isGlobalSearch: true,\r\n isSemanticSearch: true,\r\n searchText,\r\n sortBy,\r\n perfMarker: imagePagePerfMarker.createChild('imagePageLoadData'),\r\n })\r\n .catch(() => {\r\n onFailedToLoadData();\r\n }).finally(() => {\r\n setLoadingData(false);\r\n imagePagePerfMarker.willRender();\r\n if (setDataLoaded) {\r\n setDataLoaded();\r\n }\r\n });\r\n }, [isPageInited, loadData, onFailedToLoadData, searchText, sortBy, reload, logger]);\r\n\r\n const isPageLoading = !isPageInited || loadingData;\r\n\r\n return (\r\n \r\n 
\r\n
\r\n \r\n {isSearchResult ? i18n.getString(_TL_('No images match your search. Please try again.')) : i18n.getString(_TL_('You haven\\'t added any images yet. Choose from the options above to add images.'))}\r\n
\r\n \r\n {isPageLoading && (\r\n \r\n \r\n )}\r\n
\r\n );\r\n};\r\n\r\nImagesPage.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n dataService: PropTypes.shape({}),\r\n notificationApi: PropTypes.shape({}),\r\n logger: PropTypes.shape({\r\n logTrace: PropTypes.func,\r\n }).isRequired,\r\n aid: PropTypes.number.isRequired,\r\n cid: PropTypes.number.isRequired,\r\n oDataConfig: PropTypes.shape({}).isRequired,\r\n adsStudioUserPreferences: PropTypes.shape({}),\r\n reload: PropTypes.shape({}),\r\n navigation: PropTypes.shape({}).isRequired,\r\n isAIGCRegionRestricted: PropTypes.bool,\r\n permissions: PropTypes.shape({\r\n dynamic: PropTypes.shape({}),\r\n }),\r\n};\r\n\r\nImagesPage.defaultProps = {\r\n dataService: {},\r\n notificationApi: {},\r\n adsStudioUserPreferences: undefined,\r\n reload: null,\r\n isAIGCRegionRestricted: false,\r\n permissions: { dynamic: {} },\r\n};\r\n\r\nexport const ImagesPageComponent = ImagesPage;\r\n","export const actionTypes = {\r\n updateImages: 'UPDATE_IMAGES',\r\n updateLogos: 'UPDATE_LOGOS',\r\n updateColors: 'UPDATE_COLORS',\r\n updateFonts: 'UPDATE_FONTS',\r\n updateTaglines: 'UPDATE_TAGLINES',\r\n updateBrandVoice: 'UPDATE_BRAND_VOICE',\r\n upDateBrandTones: 'UPDATE_BRAND_TONES',\r\n setData: 'SET_BRAND_KIT_DATA',\r\n};\r\n\r\n/* istanbul ignore next */\r\nexport function reducer(state, action) {\r\n const { type, payload } = action;\r\n\r\n switch (type) {\r\n case actionTypes.updateImages:\r\n return {\r\n ...state,\r\n images: payload,\r\n };\r\n case actionTypes.updateLogos:\r\n return {\r\n ...state,\r\n logos: payload,\r\n };\r\n case actionTypes.updateColors:\r\n return {\r\n ...state,\r\n colors: payload,\r\n };\r\n case actionTypes.updateFonts:\r\n return {\r\n ...state,\r\n fonts: payload,\r\n };\r\n case actionTypes.updateTaglines:\r\n return {\r\n ...state,\r\n taglines: payload,\r\n };\r\n case actionTypes.updateBrandVoice:\r\n return {\r\n ...state,\r\n brandVoice: payload,\r\n };\r\n case actionTypes.upDateBrandTones:\r\n return {\r\n ...state,\r\n brandTones: payload,\r\n };\r\n case actionTypes.setData:\r\n return {\r\n ...state,\r\n ...payload,\r\n };\r\n default:\r\n return state;\r\n }\r\n}\r\n","import React from 'react';\r\nimport {\r\n Body1,\r\n tokens,\r\n Subtitle1,\r\n makeStyles,\r\n mergeClasses,\r\n} from '@fluentui/react-components';\r\nimport { EntryCardSVGIcons } from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n },\r\n});\r\n\r\nconst WarningDialogueContent = ({ i18n }) => {\r\n const classes = useStyles();\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport { WarningDialogueContent };\r\n","import {\r\n makeStyles,\r\n shorthands,\r\n tokens,\r\n typographyStyles,\r\n} from '@fluentui/react-components';\r\n\r\nexport const useCommonDialogueStyles = makeStyles({\r\n container: {\r\n ...typographyStyles.body1,\r\n ...shorthands.overflow('hidden'),\r\n ...shorthands.padding(tokens.spacingVerticalL, tokens.spacingHorizontalXXL),\r\n },\r\n header: {\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n columnGap: tokens.spacingHorizontalL,\r\n '& > div': {\r\n display: 'flex',\r\n alignItems: 'center',\r\n columnGap: tokens.spacingHorizontalS,\r\n },\r\n },\r\n horizontalDivider: {\r\n width: '100%',\r\n ...shorthands.margin(tokens.spacingVerticalS, tokens.spacingHorizontalNone),\r\n },\r\n dialogueContentContainer: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n ...shorthands.gap(tokens.spacingHorizontalNone, tokens.spacingVerticalL),\r\n },\r\n dismissIcon: {\r\n cursor: 'pointer',\r\n },\r\n searchBoxWrapper: {\r\n ...shorthands.flex(1),\r\n position: 'relative',\r\n minHeight: '90px',\r\n ...shorthands.borderRadius(tokens.borderRadiusXLarge),\r\n },\r\n searchBox: {\r\n width: '100%',\r\n height: '100%',\r\n ...shorthands.gap(tokens.spacingVerticalS, tokens.spacingHorizontalS),\r\n ...shorthands.borderRadius(tokens.borderRadiusXLarge),\r\n\r\n '&::after': {\r\n paddingTop: tokens.spacingVerticalS,\r\n borderBottomRightRadius: tokens.borderRadiusXLarge,\r\n borderBottomLeftRadius: tokens.borderRadiusXLarge,\r\n },\r\n },\r\n loadingText: {\r\n marginBlockEnd: '0',\r\n color: tokens.colorNeutralStroke1,\r\n marginBlockStart: tokens.spacingVerticalXXL,\r\n },\r\n loadingContainer: {\r\n position: 'absolute',\r\n bottom: '0',\r\n left: '0',\r\n right: '0',\r\n width: '100%',\r\n zIndex: '1',\r\n },\r\n footer: {\r\n marginTop: tokens.spacingVerticalS,\r\n },\r\n warningFooter: {\r\n gridColumnEnd: 'auto',\r\n gridColumnStart: 'auto',\r\n justifySelf: 'start',\r\n },\r\n});\r\n\r\nexport const useCreateWithWebsiteDialogueStyles = makeStyles({\r\n domainInputWrapper: {\r\n width: '100%',\r\n },\r\n suggestionErrorInvalid: {\r\n marginTop: tokens.spacingVerticalXS,\r\n ...typographyStyles.caption1,\r\n },\r\n});\r\n","import PropTypes, { func } from 'prop-types';\r\nimport React from 'react';\r\nimport {\r\n AddAssetEntryCard,\r\n EntryCardSVGIcons,\r\n DomainInputView,\r\n} from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\nimport {\r\n Dialog,\r\n DialogTrigger,\r\n DialogSurface,\r\n DialogTitle,\r\n DialogBody,\r\n DialogActions,\r\n DialogContent,\r\n Button,\r\n Field,\r\n Textarea,\r\n mergeClasses,\r\n ProgressBar,\r\n Subtitle2,\r\n Divider,\r\n Body2,\r\n tokens,\r\n} from '@fluentui/react-components';\r\nimport { Dismiss20Regular, StyleGuide24Regular } from '@fluentui/react-icons';\r\nimport { isValidUrl } from '@bingads-webui/url-util';\r\nimport { WarningDialogueContent } from './warning-dialogue-content';\r\nimport {\r\n useCommonDialogueStyles,\r\n useCreateWithWebsiteDialogueStyles,\r\n} from './style';\r\n\r\nconst CreateWithWebsiteDialogueContent = ({\r\n i18n,\r\n isValidDomain,\r\n onChangeValidDomain,\r\n brandKitCreationPayload,\r\n isNewBrandCreateWarningEnabled,\r\n onChangeBrandKitCreationPayload,\r\n}) => {\r\n const commonClasses = useCommonDialogueStyles();\r\n const dialogueClasses = useCreateWithWebsiteDialogueStyles();\r\n\r\n const handleDomainChange = (domain) => {\r\n onChangeBrandKitCreationPayload({\r\n ...brandKitCreationPayload,\r\n domain,\r\n });\r\n onChangeValidDomain(isValidUrl(domain));\r\n };\r\n\r\n const handleDescriptionChange = (e) => {\r\n onChangeBrandKitCreationPayload({\r\n ...brandKitCreationPayload,\r\n description: e.target.value,\r\n });\r\n };\r\n\r\n if (isNewBrandCreateWarningEnabled) {\r\n return \r\n \r\n {i18n.getString(_TL_('Creating a new brand kit will delete the old kit from the Ad Studio'))}\r\n \r\n \r\n {i18n.getString(_TL_('You can only create and save one brand kit in Ad Studio'))}\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nCreateWithWebsiteDialogueContent.propTypes = {\r\n i18n: PropTypes.shape({ getString: func }).isRequired,\r\n isValidDomain: PropTypes.bool.isRequired,\r\n onChangeValidDomain: PropTypes.func.isRequired,\r\n brandKitCreationPayload: PropTypes.shape({\r\n domain: PropTypes.string,\r\n description: PropTypes.string,\r\n }).isRequired,\r\n onChangeBrandKitCreationPayload: PropTypes.func.isRequired,\r\n isNewBrandCreateWarningEnabled: PropTypes.bool.isRequired,\r\n};\r\n\r\nconst CreateWithWebsiteDialogue = ({\r\n i18n,\r\n onCreateBrandKit,\r\n disableNewBrandKitWarning,\r\n isBrandKitCreationInProgress,\r\n}) => {\r\n const commonClasses = useCommonDialogueStyles();\r\n const [isDialogueOpen, setIsDialogueOpen] = React.useState(false);\r\n const [\r\n isNewBrandCreateWarningEnabled,\r\n setNewBrandCreateWarningEnabled,\r\n ] = React.useState(!disableNewBrandKitWarning);\r\n const [isValidDomain, setIsValidDomain] = React.useState(true);\r\n const [brandKitCreationPayload, setBrandKitCreationPayload] = React.useState({\r\n domain: '',\r\n description: '',\r\n });\r\n\r\n const handleDialogueOpenChange = (dialogueData) => {\r\n setIsDialogueOpen(dialogueData.open);\r\n if (!dialogueData.open) {\r\n setBrandKitCreationPayload({\r\n domain: '',\r\n description: '',\r\n });\r\n setNewBrandCreateWarningEnabled(true);\r\n }\r\n };\r\n\r\n const handleCreateBrandKit = () => {\r\n if (!brandKitCreationPayload.domain || !isValidDomain) {\r\n return;\r\n }\r\n onCreateBrandKit(brandKitCreationPayload);\r\n console.info('Creating brand kit with payload:', brandKitCreationPayload);\r\n };\r\n\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport { CreateWithWebsiteDialogue };\r\n\r\nCreateWithWebsiteDialogue.propTypes = {\r\n i18n: PropTypes.shape({ getString: func }).isRequired,\r\n disableNewBrandKitWarning: PropTypes.bool,\r\n onCreateBrandKit: PropTypes.func.isRequired,\r\n isBrandKitCreationInProgress: PropTypes.bool,\r\n};\r\n\r\nCreateWithWebsiteDialogue.defaultProps = {\r\n disableNewBrandKitWarning: false,\r\n isBrandKitCreationInProgress: false,\r\n};\r\n","import {\r\n makeStyles,\r\n shorthands,\r\n tokens,\r\n typographyStyles,\r\n} from '@fluentui/react-components';\r\nimport { btnStyle } from '@bingads-webui-campaign/shared-image-experience-styles';\r\n\r\nexport const filesPerRowInPreviewGrid = '--files-per-row-in-preview-grid';\r\n\r\nexport const getFileUploadContainerStyles = (_, { palette = {} }) => ({\r\n container: {\r\n '& .file-drag-container': {\r\n '& .hidden': {\r\n display: 'none',\r\n },\r\n '& .file-upload-button': {\r\n ...shorthands.padding(\r\n tokens.spacingVerticalNone,\r\n '48px',\r\n tokens.spacingVerticalNone,\r\n tokens.spacingHorizontalXXXL\r\n ),\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n },\r\n '& .file-picker-react-wrapper': {\r\n '& .file-picker-btn': {\r\n extend: btnStyle()['.btn-default'],\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n float: 'none',\r\n marginLeft: 0,\r\n maxWidth: '72px',\r\n overflow: 'hidden',\r\n ...typographyStyles.body1,\r\n\r\n '& ~ .file-text': {\r\n display: 'inline-block',\r\n border: 'none',\r\n },\r\n },\r\n },\r\n '& .file-picker-react-wrapper.disabled': {\r\n visibility: 'hidden',\r\n },\r\n '& .file-drag-wrapper': {\r\n height: 'fit-content',\r\n '& .file-dragger-wrapper': {\r\n boxSizing: 'border-box',\r\n padding: '12.5px 0',\r\n },\r\n '& .file-dragger': {\r\n padding: '12.5px 0',\r\n boxSizing: 'border-box',\r\n ...shorthands.border('1px'),\r\n ...shorthands.borderStyle('dashed'),\r\n ...shorthands.borderColor(palette.colorNeutralBackground1),\r\n ...shorthands.borderRadius(tokens.borderRadiusXLarge),\r\n },\r\n '& .file-default-wrapper': {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n justifyContent: 'center',\r\n paddingLeft: tokens.spacingHorizontalXXXL,\r\n '& .file-upload-icon': {\r\n display: 'none !important',\r\n },\r\n '& .file-upload-text': {\r\n display: 'inline-block',\r\n marginTop: '0px',\r\n },\r\n },\r\n },\r\n },\r\n },\r\n});\r\n\r\nexport const getFileUploadButtonStyles = (_, { palette = {} }) => ({\r\n button: {\r\n display: 'flex',\r\n width: 'fit-content',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n flexDirection: 'column',\r\n boxSizing: 'border-box',\r\n position: 'relative',\r\n overflow: 'hidden',\r\n ...shorthands.border('1px'),\r\n ...shorthands.borderStyle('dashed'),\r\n ...shorthands.borderColor(palette.colorNeutralBackground1),\r\n ...shorthands.borderRadius(tokens.borderRadiusXLarge),\r\n\r\n '& .file-picker-container': {\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n width: '100%',\r\n height: '100%',\r\n\r\n '& div': {\r\n height: '100%',\r\n },\r\n\r\n '& .hidden': {\r\n display: 'none',\r\n },\r\n '& .file-picker-btn': {\r\n height: '100%',\r\n cursor: 'pointer',\r\n opacity: '0.001',\r\n extend: btnStyle()['.btn-default'],\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n float: 'none',\r\n marginLeft: 0,\r\n maxWidth: '72px',\r\n overflow: 'hidden',\r\n ...typographyStyles.body1,\r\n\r\n '& ~ .file-text': {\r\n display: 'inline-block',\r\n border: 'none',\r\n },\r\n },\r\n },\r\n },\r\n});\r\n\r\nexport const useFileUploadStyles = makeStyles({\r\n filesContainer: {\r\n display: 'grid',\r\n ...shorthands.gap(tokens.spacingVerticalM, tokens.spacingHorizontalXL),\r\n gridTemplateColumns: `repeat(var(${filesPerRowInPreviewGrid}), 1fr)`,\r\n },\r\n fileContainer: {\r\n display: 'flex',\r\n maxWidth: '100%',\r\n alignItems: 'center',\r\n position: 'relative',\r\n boxShadow: tokens.shadow4,\r\n justifyContent: 'space-between',\r\n backgroundColor: tokens.colorNeutralBackground2,\r\n ...shorthands.overflow('hidden'),\r\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\r\n ...shorthands.gap(tokens.spacingHorizontalS, tokens.spacingVerticalNone),\r\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\r\n },\r\n filePreviewImageIcon: {\r\n display: 'flex',\r\n position: 'relative',\r\n ...shorthands.flex(0),\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n\r\n '& > span': {\r\n position: 'absolute',\r\n top: '50%',\r\n left: '50%',\r\n transform: 'translate(-50%, -50%)',\r\n zIndex: 1,\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n backgroundColor: tokens.colorNeutralBackground2,\r\n ...shorthands.borderRadius('100%'),\r\n ...shorthands.padding(\r\n tokens.spacingVerticalXS,\r\n tokens.spacingHorizontalXS\r\n ),\r\n },\r\n },\r\n filePreviewContent: {\r\n ...shorthands.flex(1),\r\n ...shorthands.overflow('hidden'),\r\n '& > div': {\r\n ...shorthands.margin(\r\n tokens.spacingVerticalXS,\r\n tokens.spacingHorizontalNone\r\n ),\r\n },\r\n },\r\n uploadFilesButton: {\r\n display: 'flex',\r\n cursor: 'pointer',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n flexDirection: 'column',\r\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\r\n\r\n '& span': {\r\n marginTop: tokens.spacingVerticalS,\r\n },\r\n },\r\n fileUploadError: {\r\n ...shorthands.padding(\r\n tokens.spacingVerticalS,\r\n tokens.spacingHorizontalNone,\r\n tokens.spacingVerticalNone,\r\n tokens.spacingHorizontalNone\r\n ),\r\n color: tokens.colorPaletteRedBackground3,\r\n },\r\n});\r\n","export const FILE_ERROR_TYPES = {\r\n FILE_SIZE: {\r\n type: 'fileSize',\r\n message: _TL_('File is either too large or too small'),\r\n },\r\n FILE_TYPE: {\r\n type: 'fileType',\r\n message: _TL_('File type is not allowed'),\r\n },\r\n FILE_COUNT: {\r\n type: 'fileCount',\r\n message: _TL_('Maximum number of files exceeded'),\r\n },\r\n UPLOAD_FAILED: {\r\n type: 'uploadFailed',\r\n message: _TL_('File upload failed'),\r\n },\r\n};\r\n\r\nexport const DEFAULT_MAX_SIZE = 1 * 1024 * 1024;\r\n\r\nexport const LegacyStringMap = {\r\n FilePicker_ButtonText_ChooseFile: _TL_('Browse'),\r\n FilePicker_ButtonText_RemoveFile: _TL_('Remove'),\r\n FilePicker_FileExtensionInvalid: _TL_('File extension is invalid'),\r\n FilePicker_FileInvalid: _TL_('File is invalid'),\r\n};\r\n","/* istanbul ignore file */\r\n\r\nimport { Promise } from 'bluebird';\r\nimport { uniqueId } from 'underscore';\r\nimport { FILE_ERROR_TYPES, DEFAULT_MAX_SIZE } from './constants';\r\n\r\nexport function validateFiles({\r\n files,\r\n minFileSize = 0,\r\n allowedTypes = [],\r\n maxFileSize = DEFAULT_MAX_SIZE,\r\n}) {\r\n return new Promise((resolve) => {\r\n const validationResult = {\r\n files: [],\r\n hasError: false,\r\n };\r\n for (let i = 0; i < files.length; i += 1) {\r\n const file = files[i];\r\n file.id = uniqueId('file-');\r\n const fileTypesToCheck = allowedTypes.map(type =>\r\n type.replace('.', '').toLowerCase());\r\n const fileType = file.type.includes('/')\r\n ? file.type.split('/')[1].toLowerCase()\r\n : file.type.toLowerCase();\r\n if (!fileTypesToCheck.includes(fileType)) {\r\n file.errorType = FILE_ERROR_TYPES.FILE_TYPE.type;\r\n file.message = FILE_ERROR_TYPES.FILE_TYPE.message;\r\n validationResult.files.push(file);\r\n validationResult.hasError = true;\r\n } else if (file.size > maxFileSize || file.size < minFileSize) {\r\n file.errorType = FILE_ERROR_TYPES.FILE_SIZE.type;\r\n file.message = FILE_ERROR_TYPES.FILE_SIZE.message;\r\n validationResult.files.push(file);\r\n validationResult.hasError = true;\r\n } else {\r\n file.message = _TL_('File is valid');\r\n validationResult.files.push(file);\r\n }\r\n }\r\n resolve(validationResult);\r\n });\r\n}\r\n\r\nfunction getLocalizedFileSizeTextsBySize(fileSize, i18n) {\r\n return [\r\n i18n.getString(_TL_('{{fileSize}} Bytes'), { fileSize }),\r\n i18n.getString(_TL_('{{fileSize}} KB'), { fileSize }),\r\n i18n.getString(_TL_('{{fileSize}} MB'), { fileSize }),\r\n i18n.getString(_TL_('{{fileSize}} GB'), { fileSize }),\r\n i18n.getString(_TL_('{{fileSize}} TB'), { fileSize }),\r\n i18n.getString(_TL_('{{fileSize}} PB'), { fileSize }),\r\n i18n.getString(_TL_('{{fileSize}} EB'), { fileSize }),\r\n i18n.getString(_TL_('{{fileSize}} ZB'), { fileSize }),\r\n i18n.getString(_TL_('{{fileSize}} YB'), { fileSize }),\r\n ];\r\n}\r\n\r\nexport function formatFileSize(bytes, decimals = 2, i18n) {\r\n if (bytes === 0) return i18n.getString(_TL_('0 Bytes'));\r\n const k = 1024;\r\n const dm = decimals < 0 ? 0 : decimals;\r\n const sizeUnitIndex = Math.floor(Math.log(bytes) / Math.log(k));\r\n const formattedFileSize = i18n.formatDecimal(bytes / (k ** sizeUnitIndex), {\r\n maximumFractionDigits: dm,\r\n minimumFractionDigits: 0,\r\n });\r\n const localizedFileSizeTexts = getLocalizedFileSizeTextsBySize(\r\n formattedFileSize,\r\n i18n\r\n );\r\n return localizedFileSizeTexts[sizeUnitIndex];\r\n}\r\n\r\nconst mockFileUploadAPI = () =>\r\n new Promise((resolve, reject) => {\r\n const shouldReject = Math.random() > 0.5;\r\n setTimeout(() => {\r\n if (shouldReject) {\r\n reject(new Error(_TL_('Upload Error. Failed to upload file')));\r\n } else {\r\n resolve();\r\n }\r\n }, 2000);\r\n });\r\n\r\nexport async function uploadFiles(filesToUpload) {\r\n const uploadFile = async (file) => {\r\n try {\r\n await mockFileUploadAPI(file);\r\n // eslint-disable-next-line no-param-reassign\r\n file.uploaded = true;\r\n // eslint-disable-next-line no-param-reassign\r\n file.message = _TL_('File uploaded successfully');\r\n } catch (error) {\r\n // eslint-disable-next-line no-param-reassign\r\n file.uploaded = false;\r\n // eslint-disable-next-line no-param-reassign\r\n file.errorType = FILE_ERROR_TYPES.UPLOAD_FAILED.type;\r\n // eslint-disable-next-line no-param-reassign\r\n file.message =\r\n error.message || FILE_ERROR_TYPES.UPLOAD_FAILED.message;\r\n }\r\n return file;\r\n };\r\n\r\n const updatedFiles = await Promise.all(filesToUpload.map(file => uploadFile(file)));\r\n return updatedFiles;\r\n}\r\n","/* istanbul ignore file */\r\n\r\nimport PropTypes, { func } from 'prop-types';\r\nimport React, { useCallback } from 'react';\r\n\r\nimport {\r\n Delete16Regular,\r\n AddSquare24Regular,\r\n ErrorCircle20Regular,\r\n CheckmarkCircle20Regular,\r\n} from '@fluentui/react-icons';\r\nimport { Stack } from '@bingads-webui-react/fabric-control';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { FilePicker } from '@bingads-webui-campaign-react/upload-file-picker';\r\nimport {\r\n Button,\r\n ProgressBar,\r\n Text,\r\n tokens,\r\n Tooltip,\r\n} from '@fluentui/react-components';\r\nimport { EntryCardSVGIcons } from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\nimport { ValidationStringMap } from '@bingads-webui/validation-string-map';\r\nimport { buildLegacyI18n } from '@bingads-webui/build-legacy-i18n';\r\n\r\nimport {\r\n useFileUploadStyles,\r\n filesPerRowInPreviewGrid,\r\n getFileUploadButtonStyles,\r\n getFileUploadContainerStyles,\r\n} from './style';\r\nimport { LegacyStringMap } from './constants';\r\nimport { formatFileSize, uploadFiles, validateFiles } from './utils';\r\n\r\nconst FilePreview = ({\r\n i18n,\r\n file,\r\n progress,\r\n onDeleteFile,\r\n}) => {\r\n const classes = useFileUploadStyles();\r\n const hasError = !!file.errorType;\r\n const uploadTried = typeof file.uploaded === 'boolean';\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n onDeleteFile(file)}\r\n icon={
\r\n );\r\n};\r\n\r\nFilePreview.propTypes = {\r\n i18n: PropTypes.shape({ getString: func }).isRequired,\r\n file: PropTypes.shape({\r\n id: PropTypes.string,\r\n type: PropTypes.string,\r\n name: PropTypes.string,\r\n size: PropTypes.number,\r\n uploaded: PropTypes.bool,\r\n message: PropTypes.string,\r\n errorType: PropTypes.string,\r\n }).isRequired,\r\n onDeleteFile: PropTypes.func,\r\n progress: PropTypes.number,\r\n};\r\n\r\nFilePreview.defaultProps = {\r\n progress: 0,\r\n onDeleteFile: () => {},\r\n};\r\n\r\nexport const FileUpload = ({\r\n i18n,\r\n maxFileSize,\r\n minFileSize,\r\n allowedTypes,\r\n dragOrDropTip,\r\n disableAddMore,\r\n dragOrDropLabel,\r\n onFilesUploaded,\r\n previewFilesPerRow,\r\n maxFilesCountAllowed,\r\n dragOrDropDescription,\r\n}) => {\r\n const classes = useFileUploadStyles();\r\n const fileUploadContainerClasses = useDefaultStyles(getFileUploadContainerStyles);\r\n const fileUploadButtonClasses = useDefaultStyles(getFileUploadButtonStyles);\r\n const [files, setFiles] = React.useState([]);\r\n const [uploadError, setUploadError] = React.useState('');\r\n\r\n const legacyI18n = buildLegacyI18n(i18n, [...[ValidationStringMap], ...[LegacyStringMap]]);\r\n\r\n const handleDeleteFile = useCallback(\r\n (fileToDelete) => {\r\n setFiles((prevFiles) => {\r\n const updatedFiles = prevFiles.filter(file => file.id !== fileToDelete.id);\r\n onFilesUploaded(updatedFiles);\r\n return updatedFiles;\r\n });\r\n },\r\n [onFilesUploaded]\r\n );\r\n\r\n const handleFilesUpload = useCallback(\r\n async (filesToUpload) => {\r\n try {\r\n const updatedFiles = await uploadFiles(filesToUpload);\r\n setFiles((prevFiles) => {\r\n const updatedFilesArray = [...prevFiles];\r\n updatedFiles.forEach((updatedFile) => {\r\n const fileIndex = updatedFilesArray.findIndex(file => file.id === updatedFile.id);\r\n if (fileIndex > -1) {\r\n updatedFilesArray[fileIndex] = updatedFile;\r\n } else {\r\n updatedFilesArray.push(updatedFile);\r\n }\r\n });\r\n onFilesUploaded(updatedFilesArray);\r\n return updatedFilesArray;\r\n });\r\n } catch (error) {\r\n setUploadError(error.message || _TL_('Failed to upload files'));\r\n }\r\n },\r\n [onFilesUploaded]\r\n );\r\n\r\n const onFileRead = useCallback(\r\n async (fileSources) => {\r\n try {\r\n if (!fileSources || !fileSources.length) {\r\n throw new Error(_TL_('No files selected'));\r\n }\r\n const filesToUploadCount = Math.min(\r\n maxFilesCountAllowed,\r\n fileSources.length\r\n );\r\n const fileSourcesArray = Array.from(fileSources);\r\n const filesToUpload = fileSourcesArray.slice(0, filesToUploadCount);\r\n if (\r\n typeof minFileSize === 'number' ||\r\n typeof maxFileSize === 'number'\r\n ) {\r\n const validationResult = await validateFiles({\r\n files: filesToUpload,\r\n maxFileSize,\r\n minFileSize,\r\n allowedTypes,\r\n });\r\n setFiles(prev => [...prev, ...validationResult.files]);\r\n handleFilesUpload(validationResult.files);\r\n }\r\n } catch (error) {\r\n setUploadError(error.message);\r\n }\r\n },\r\n [\r\n setUploadError,\r\n maxFilesCountAllowed,\r\n maxFileSize,\r\n minFileSize,\r\n allowedTypes,\r\n handleFilesUpload,\r\n ]\r\n );\r\n\r\n const onError = useCallback((error) => {\r\n setUploadError(error.join(', '));\r\n }, []);\r\n\r\n return (\r\n \r\n 
\r\n \r\n {uploadTried && hasError ? (\r\n
\r\n \r\n \r\n {file.name}\r\n \r\n {formatFileSize(file.size, 2, i18n)} \r\n
\r\n \r\n
\r\n ) : null}\r\n \r\n ) : (\r\n \r\n {i18n.getString(_TL_('Add more'))} \r\n
\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nUploadBrandGuideDialogueContent.propTypes = {\r\n i18n: PropTypes.shape({ getString: func }).isRequired,\r\n brandKitCreationPayload: PropTypes.shape({\r\n files: PropTypes.arrayOf(PropTypes.shape({})),\r\n description: PropTypes.string,\r\n }).isRequired,\r\n onChangeBrandKitCreationPayload: PropTypes.func.isRequired,\r\n isNewBrandCreateWarningEnabled: PropTypes.bool.isRequired,\r\n};\r\n\r\nconst UploadBrandGuideDialogue = ({\r\n i18n,\r\n onCreateBrandKit,\r\n disableNewBrandKitWarning,\r\n isBrandKitCreationInProgress,\r\n}) => {\r\n const commonClasses = useCommonDialogueStyles();\r\n const [isDialogueOpen, setIsDialogueOpen] = React.useState(false);\r\n const [\r\n isNewBrandCreateWarningEnabled,\r\n setNewBrandCreateWarningEnabled,\r\n ] = React.useState(!disableNewBrandKitWarning);\r\n const [brandKitCreationPayload, setBrandKitCreationPayload] = React.useState({\r\n files: [],\r\n description: '',\r\n });\r\n\r\n const handleDialogueOpenChange = (dialogueData) => {\r\n setIsDialogueOpen(dialogueData.open);\r\n if (!dialogueData.open) {\r\n setBrandKitCreationPayload({\r\n files: [],\r\n description: '',\r\n });\r\n setNewBrandCreateWarningEnabled(true);\r\n }\r\n };\r\n\r\n const handleCreateBrandKit = () => {\r\n if (brandKitCreationPayload.files.length === 0) {\r\n return;\r\n }\r\n onCreateBrandKit(brandKitCreationPayload);\r\n console.info('Creating brand kit with payload:', brandKitCreationPayload);\r\n };\r\n\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport { UploadBrandGuideDialogue };\r\n\r\nUploadBrandGuideDialogue.propTypes = {\r\n i18n: PropTypes.shape({ getString: func }).isRequired,\r\n disableNewBrandKitWarning: PropTypes.bool,\r\n onCreateBrandKit: PropTypes.func.isRequired,\r\n isBrandKitCreationInProgress: PropTypes.bool,\r\n};\r\n\r\nUploadBrandGuideDialogue.defaultProps = {\r\n disableNewBrandKitWarning: false,\r\n isBrandKitCreationInProgress: false,\r\n};\r\n","import React from 'react';\r\nimport {\r\n AddAssetEntryCard,\r\n EntryCardSVGIcons,\r\n} from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\n\r\nconst CreateManuallyAction = ({ i18n }) => (\r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport { BrandActionCards };\r\n\r\nBrandActionCards.propTypes = {\r\n i18n: PropTypes.shape({ getString: func }).isRequired,\r\n};\r\n","import {\r\n tokens,\r\n makeStyles,\r\n shorthands,\r\n typographyStyles,\r\n} from '@fluentui/react-components';\r\nimport bannerBackground from '../../image-asset/banner-background.png';\r\n\r\nexport const useBannerContainerStyles = makeStyles({\r\n bannerContainer: {\r\n width: '100%',\r\n display: 'flex',\r\n alignSelf: 'stretch',\r\n flexDirection: 'column',\r\n ...shorthands.padding('36px'),\r\n ...shorthands.borderRadius(tokens.borderRadiusXLarge),\r\n ...shorthands.gap(tokens.spacingVerticalXXL, tokens.spacingHorizontalXXL),\r\n backgroundImage: `linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url(${bannerBackground})`,\r\n backgroundSize: 'cover',\r\n 'background-position': 'right center',\r\n backgroundRepeat: 'no-repeat',\r\n ...typographyStyles.body1,\r\n },\r\n heading: {\r\n marginBlockEnd: tokens.spacingVerticalS,\r\n },\r\n});\r\n","import React from 'react';\r\nimport PropTypes, { func } from 'prop-types';\r\nimport { Body2, mergeClasses, Title2 } from '@fluentui/react-components';\r\n\r\nimport { BrandActionCards } from './action-cards';\r\nimport { useBannerContainerStyles } from './styles';\r\n\r\nconst Banner = ({ i18n, hideActionsMenu }) => {\r\n const classes = useBannerContainerStyles();\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport { Banner };\r\n\r\nBanner.propTypes = {\r\n i18n: PropTypes.shape({ getString: func }).isRequired,\r\n hideActionsMenu: PropTypes.bool,\r\n};\r\n\r\nBanner.defaultProps = {\r\n hideActionsMenu: false,\r\n};\r\n","import {\r\n makeStyles,\r\n shorthands,\r\n tokens,\r\n typographyStyles,\r\n} from '@fluentui/react-components';\r\n\r\nexport const useSuggestionsStyles = makeStyles({\r\n container: {\r\n width: '10%',\r\n display: 'flex',\r\n rowGap: '40px',\r\n minWidth: '295px',\r\n alignSelf: 'stretch',\r\n flexDirection: 'column',\r\n ...typographyStyles.body1,\r\n ...shorthands.overflow('hidden'),\r\n color: tokens.colorNeutralForeground1,\r\n },\r\n panel: {\r\n display: 'flex',\r\n alignItems: 'flex-start',\r\n columnGap: tokens.spacingHorizontalS,\r\n\r\n '& svg': {\r\n flexShrink: 0,\r\n marginTop: tokens.spacingVerticalS,\r\n },\r\n },\r\n panelBody: {\r\n flexWrap: 'wrap',\r\n rowGap: tokens.spacingVerticalS,\r\n marginTop: tokens.spacingVerticalS,\r\n },\r\n loadingContainer: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n rowGap: tokens.spacingVerticalS,\r\n marginTop: tokens.spacingVerticalS,\r\n },\r\n});\r\n","import React from 'react';\r\nimport PropTypes, { func } from 'prop-types';\r\nimport { Sparkle20Regular } from '@fluentui/react-icons';\r\nimport {\r\n mergeClasses,\r\n Skeleton,\r\n SkeletonItem,\r\n Text,\r\n} from '@fluentui/react-components';\r\nimport {\r\n InteractionTag,\r\n InteractionTagPrimary,\r\n TagGroup,\r\n} from '@fluentui/react-tags';\r\n\r\nimport { useSuggestionsStyles } from './styles';\r\n\r\nconst loadingSkeletonItemCount = 5;\r\n\r\nconst SuggestionLoadingSkeleton = () => {\r\n const classes = useSuggestionsStyles();\r\n return (\r\n \r\n \r\n {i18n.getString(_TL_('Brand kit'))}\r\n \r\n \r\n {i18n.getString(_TL_('Add and manage your brand identity for your ads, all in one place.'))}\r\n \r\n
\r\n {hideActionsMenu ? null : \r\n
\r\n );\r\n};\r\n\r\nSuggestionPanel.propTypes = {\r\n className: PropTypes.string,\r\n loading: PropTypes.bool.isRequired,\r\n title: PropTypes.string.isRequired,\r\n suggestions: PropTypes.arrayOf(PropTypes.string).isRequired,\r\n};\r\n\r\nSuggestionPanel.defaultProps = {\r\n className: '',\r\n};\r\n\r\nexport const Suggestions = ({\r\n i18n,\r\n loading,\r\n descriptionSuggestions,\r\n shortHeadlinesSuggestions,\r\n longHeadlinesSuggestions,\r\n}) => {\r\n const classes = useSuggestionsStyles();\r\n return (\r\n \r\n \r\n {title}\r\n \r\n {loading ? (\r\n \r\n {suggestions.map(suggestion => (\r\n \r\n {suggestion} \r\n \r\n ))}\r\n \r\n )}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n onChange(ev.target.value)}\r\n />\r\n \r\n {i18n.getString(_TL_('{{a}} characters remaining'), {\r\n a: maxAllowedCharacters - tagline.length,\r\n })}\r\n \r\n
\r\n \r\n {loading ? (\r\n handleDeleteTagline(index)}\r\n maxAllowedCharacters={maxAllowedCharactersPerTagline}\r\n onChange={value => handleChangeTagline(value, index)}\r\n />\r\n ))\r\n )}\r\n
\r\n );\r\n};\r\n\r\nTaglines.propTypes = {\r\n loading: PropTypes.bool,\r\n i18n: PropTypes.shape({ getString: func }).isRequired,\r\n taglines: PropTypes.arrayOf(PropTypes.string),\r\n maxAllowedTaglines: PropTypes.number,\r\n maxAllowedCharactersPerTagline: PropTypes.number,\r\n onChangeTaglines: PropTypes.func,\r\n};\r\n\r\nTaglines.defaultProps = {\r\n taglines: [''],\r\n loading: false,\r\n maxAllowedTaglines: undefined,\r\n maxAllowedCharactersPerTagline: 30,\r\n onChangeTaglines: () => {},\r\n};\r\n","export const defaultFonts = [\r\n {\r\n Label: _TL_('Long headline'),\r\n TextAssetType: 'LongHeadline',\r\n Typeface: '',\r\n Weight: '',\r\n helpTopic: 'pop_BA_Brand_LongHeadline',\r\n helpLabel: _TL_('Learn about long headlines'),\r\n },\r\n {\r\n Label: _TL_('Short headline'),\r\n TextAssetType: 'ShortHeadline',\r\n Typeface: '',\r\n Weight: '',\r\n helpTopic: 'pop_BA_Brand_ShortHeadline ',\r\n helpLabel: _TL_('Learn about short headlines'),\r\n },\r\n {\r\n Label: _TL_('Description'),\r\n TextAssetType: 'Description',\r\n Typeface: '',\r\n Weight: '',\r\n helpTopic: 'pop_BA_Brand_Description',\r\n helpLabel: _TL_('Learn about descriptions'),\r\n },\r\n {\r\n Label: _TL_('Call to action'),\r\n TextAssetType: 'CallToAction',\r\n Typeface: '',\r\n Weight: '',\r\n helpTopic: 'pop_BA_Brand_CTA',\r\n helpLabel: _TL_('Learn about calls to action'),\r\n },\r\n];\r\n\r\nexport const overrideFontWeights = [\r\n { key: 'Normal', text: _TL_('Normal') },\r\n { key: 'Bold', text: _TL_('Bold') },\r\n];\r\n","import { makeStyles, shorthands, tokens } from '@fluentui/react-components';\r\n\r\nexport const useFontsSelectorStyles = makeStyles({\r\n sectionContainer: {\r\n marginTop: tokens.spacingVerticalL,\r\n },\r\n fontsContainer: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n rowGap: tokens.spacingVerticalXXL,\r\n marginTop: tokens.spacingVerticalS,\r\n },\r\n fontSelectContainer: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n alignItems: 'center',\r\n columnGap: tokens.spacingHorizontalS,\r\n rowGap: tokens.spacingVerticalS,\r\n },\r\n fontSelect: {\r\n minWidth: '330px',\r\n },\r\n fontWeightSelect: {\r\n '& > input': {\r\n maxWidth: '100px',\r\n },\r\n },\r\n fontSelectContainerHeader: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n alignItems: 'center',\r\n ...shorthands.gap(tokens.spacingHorizontalS),\r\n },\r\n});\r\n","import React from 'react';\r\nimport PropTypes, { func } from 'prop-types';\r\nimport {\r\n Body1Strong,\r\n Body1Stronger,\r\n mergeClasses,\r\n} from '@fluentui/react-components';\r\nimport { HelpButton } from '@bingads-webui-react/help-popup';\r\nimport {\r\n FontsFamilySelector,\r\n FontsWeightSelector,\r\n fontFamilies,\r\n} from '@bingads-webui-campaign-react/fonts-selector';\r\n\r\nimport { defaultFonts, overrideFontWeights } from './constants';\r\nimport { useFontsSelectorStyles } from './styles';\r\n\r\nconst defaultFont = fontFamilies[0].key;\r\nconst defaultFontWeight = overrideFontWeights[0].key;\r\n\r\nconst FontSelector = ({\r\n id,\r\n i18n,\r\n font,\r\n onChangeFont,\r\n onChangeWeight,\r\n}) => {\r\n const classes = useFontsSelectorStyles();\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nFontSelector.propTypes = {\r\n id: PropTypes.string,\r\n i18n: PropTypes.shape({ getString: func }).isRequired,\r\n font: PropTypes.shape({\r\n label: PropTypes.string,\r\n font: PropTypes.string,\r\n weight: PropTypes.string,\r\n helpTopic: PropTypes.string,\r\n helpLabel: PropTypes.string,\r\n }),\r\n onChangeFont: PropTypes.func,\r\n onChangeWeight: PropTypes.func,\r\n};\r\n\r\nFontSelector.defaultProps = {\r\n id: '',\r\n font: {\r\n label: '',\r\n font: '',\r\n weight: '',\r\n helpTopic: '',\r\n helpLabel: '',\r\n },\r\n onChangeFont: () => {},\r\n onChangeWeight: () => {},\r\n};\r\n\r\nexport const FontsSelector = ({\r\n i18n,\r\n fonts,\r\n onChangeFonts,\r\n}) => {\r\n const classes = useFontsSelectorStyles();\r\n\r\n const fontsToRender = defaultFonts.map((font) => {\r\n const foundFont = fonts.find(f => f.TextAssetType === font.TextAssetType);\r\n return foundFont\r\n ? {\r\n ...foundFont,\r\n Label: font.Label,\r\n helpTopic: font.helpTopic,\r\n helpLabel: font.helpLabel,\r\n }\r\n : font;\r\n });\r\n\r\n const handleChangeFont = (TextAssetType, selectedFont, key) => {\r\n const updatedFonts = fontsToRender.map((font) => {\r\n if (font.TextAssetType === TextAssetType) {\r\n return {\r\n ...font,\r\n Typeface: key === 'Typeface' ? selectedFont : font.Typeface || defaultFont,\r\n Weight: key === 'Weight' ? selectedFont : font.Weight || defaultFontWeight,\r\n };\r\n }\r\n return font;\r\n }).filter(font => font.Typeface && font.Weight);\r\n onChangeFonts(updatedFonts);\r\n };\r\n\r\n return (\r\n \r\n {i18n.getString(font.label)} \r\n {font.helpTopic && (\r\n
\r\n \r\n
\r\n )}\r\n \r\n
\r\n \r\n {fontsToRender.map(({\r\n Label,\r\n Weight,\r\n Typeface,\r\n helpTopic,\r\n helpLabel,\r\n TextAssetType,\r\n }) => (\r\n handleChangeFont(TextAssetType, font, 'Typeface')}\r\n onChangeWeight={weight => handleChangeFont(TextAssetType, weight, 'Weight')}\r\n />\r\n ))}\r\n
\r\n \r\n );\r\n};\r\n\r\nFontsSelector.propTypes = {\r\n fonts: PropTypes.shape(defaultFonts),\r\n onChangeFonts: PropTypes.func,\r\n i18n: PropTypes.shape({ getString: func }).isRequired,\r\n};\r\n\r\nFontsSelector.defaultProps = {\r\n fonts: defaultFonts,\r\n onChangeFonts: () => {},\r\n};\r\n","import {\r\n makeStyles,\r\n shorthands,\r\n tokens,\r\n typographyStyles\r\n} from '@fluentui/react-components';\r\n\r\nexport const useStyles = makeStyles({\r\n listPanel: {\r\n boxShadow: tokens.shadow4,\r\n ...shorthands.borderRadius(tokens.borderRadiusLarge),\r\n backgroundColor: tokens.colorNeutralBackground1,\r\n '& .card-header': {\r\n ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\r\n '& svg:first-child': {\r\n width: '24px',\r\n height: '24px',\r\n },\r\n },\r\n '& .card-title': {\r\n ...typographyStyles.subtitle2,\r\n },\r\n '& .list-body-header': {\r\n ...shorthands.margin('12px', 0),\r\n },\r\n },\r\n addBtn: {\r\n width: '94px',\r\n height: '94px',\r\n maxWidth: '94px',\r\n maxHeight: '94px',\r\n ...shorthands.borderRadius(tokens.borderRadiusLarge),\r\n ...shorthands.border(tokens.strokeWidthThin, 'dashed', '#C8C6C4'),\r\n },\r\n actionBtns: {\r\n display: 'flex',\r\n position: 'absolute',\r\n ...shorthands.gap('8px'),\r\n bottom: '10px',\r\n left: '50%',\r\n transform: 'translate(-50%, 0)',\r\n '& button': {\r\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\r\n backgroundColor: tokens.colorNeutralBackground1,\r\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\r\n },\r\n },\r\n list: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n ...shorthands.gap('8px'),\r\n '& .list-image': {\r\n width: 'auto',\r\n position: 'relative',\r\n ...shorthands.borderRadius(tokens.borderRadiusLarge),\r\n boxShadow: tokens.shadow4,\r\n '& img': {\r\n ...shorthands.borderRadius(tokens.borderRadiusLarge),\r\n height: '94px',\r\n },\r\n },\r\n },\r\n});\r\n\r\n\r\nexport const getSkeletonStyles = makeStyles({\r\n row: {\r\n display: 'flex',\r\n ...shorthands.gap('8px'),\r\n flexWrap: 'wrap',\r\n },\r\n item: {\r\n height: '94px',\r\n width: '94px',\r\n backgroundColor: tokens.colorNeutralStencil1,\r\n },\r\n});\r\n","import React, { useState } from 'react';\r\nimport { EditRegular, DeleteRegular } from '@fluentui/react-icons';\r\nimport { Image as FluentImage } from '@bingads-webui-react/fabric-control';\r\nimport { Button, tokens } from '@fluentui/react-components';\r\nimport { useStyles } from './style';\r\nimport { IList } from './type';\r\n\r\nexport const ListItem = React.memo(({\r\n onEdit, onRemove, imageData, index, showEditBtn,\r\n}: IList) => {\r\n const classes = useStyles();\r\n const [showActionBtn, setShowActionBtn] = useState(false);\r\n const onMouseEnter = () => {\r\n setShowActionBtn(true);\r\n };\r\n const onMouseLeave = () => {\r\n setShowActionBtn(false);\r\n };\r\n const onKeyDown = (e) => {\r\n if (e.key === 'Enter' || e.key === ' ') {\r\n onMouseEnter();\r\n }\r\n };\r\n return (\r\n \r\n {showEditBtn && (\r\n
\r\n )}\r\n \r\n );\r\n});\r\n","/* istanbul ignore file */\r\nimport React, { useMemo } from 'react';\r\nimport {\r\n FormCardDefaultHeader,\r\n FormCardBody,\r\n FormCard,\r\n} from '@bingads-webui-fluent-component/form-cards';\r\nimport { AddRegular } from '@fluentui/react-icons';\r\nimport { HelpButton } from '@bingads-webui-react/help-popup';\r\nimport { Button, mergeClasses, Body1Strong, Skeleton, SkeletonItem } from '@fluentui/react-components';\r\nimport { useStyles, getSkeletonStyles } from './style';\r\nimport { ListItem } from './ListItem';\r\nimport { IListPanel } from './type';\r\n\r\nconst ListSkeleton = ({ maxCount }: { maxCount: number }) => {\r\n const classes = getSkeletonStyles();\r\n return (\r\n \r\n {subTitle} \r\n {text &&
\r\n {isLoading ?\r\n {text}
}\r\n\r\n {displayedImages.map((data, idx) => (\r\n
\r\n }\r\n \r\n onChange({\r\n cropSettings: currentCropSettings,\r\n lightBackground: useInLightBackground,\r\n darkBackground: useInDarkBackground,\r\n aspectRatio,\r\n })}\r\n >\r\n {i18n.getString(_TL_('Update logo'))}\r\n \r\n \r\n
\r\n ), [\r\n classes.buttonWrapper,\r\n classes.button,\r\n i18n,\r\n dismiss,\r\n image,\r\n isValid,\r\n onChange,\r\n currentCropSettings,\r\n useInLightBackground,\r\n useInDarkBackground,\r\n aspectRatio]);\r\n\r\n return (\r\n \r\n \r\n updateAspectRation(data.value)}>\r\n \r\n \r\n
\r\n \r\n {image ?\r\n
\r\n {showBackgroundSettings && \r\n \r\n {i18n.getString(_TL_('What type of backgrounds should this logo be used with?'))}\r\n \r\n setUseInLightBackground(data.checked)}\r\n label={i18n.getString(_TL_('Light background'))}\r\n />\r\n setUseInDarkBackground(data.checked)}\r\n label={i18n.getString(_TL_('Dark background'))}\r\n />\r\n
\r\n }\r\n \r\n );\r\n};\r\n\r\nBrandKitLogoEditPanel.propTypes = {\r\n i18n: PropTypes.shape({ getString: func }).isRequired,\r\n isOpen: PropTypes.bool.isRequired,\r\n dismiss: PropTypes.func.isRequired,\r\n hasLandScapeLimit: PropTypes.bool,\r\n minLogoSize: PropTypes.number,\r\n hasSquareLimit: PropTypes.bool,\r\n format: PropTypes.string.isRequired,\r\n lightBackground: PropTypes.bool.isRequired,\r\n showBackgroundSettings: PropTypes.bool,\r\n darkBackground: PropTypes.bool.isRequired,\r\n image: PropTypes.shape({ Height: PropTypes.number, Width: PropTypes.number }),\r\n cropSettings: PropTypes.shape({\r\n SourceX: PropTypes.number,\r\n SourceY: PropTypes.number,\r\n SourceWidth: PropTypes.number,\r\n SourceHeight: PropTypes.number,\r\n }).isRequired,\r\n onChange: PropTypes.func.isRequired,\r\n};\r\n\r\nBrandKitLogoEditPanel.defaultProps = {\r\n image: null,\r\n minLogoSize: 128,\r\n hasLandScapeLimit: true,\r\n hasSquareLimit: true,\r\n showBackgroundSettings: false,\r\n};\r\n\r\n","/* istanbul ignore file */\r\nimport { getCenterCroppedSettings } from '@bingads-webui-campaign/image-experience-utils';\r\nimport _ from 'underscore';\r\n\r\nconst logoTypeLimit = 5;\r\nexport const duplicateImagesValidation = (data, elementType) => {\r\n let hasDuplicateError = false;\r\n let imageAsset = data.images;\r\n if (elementType === 'logo') {\r\n imageAsset = data.logos;\r\n }\r\n const filterImagesAsset = imageAsset.filter((imageData, index) => {\r\n const isDuplicate = imageAsset.findIndex(image => imageData.Url === image.Url) !== index;\r\n if (isDuplicate) {\r\n hasDuplicateError = true;\r\n return false;\r\n }\r\n return true;\r\n });\r\n return {\r\n hasDuplicateError,\r\n data: elementType === 'logo' ? { logos: filterImagesAsset } : { images: filterImagesAsset },\r\n };\r\n};\r\n\r\nexport const imageMinSizeValidation = (data, minSizeConfig, elementType) => {\r\n let hasError = false;\r\n let imageAsset = data.images;\r\n if (elementType === 'logo') {\r\n imageAsset = data.logos;\r\n }\r\n\r\n const filterImagesAsset = imageAsset.filter((imageData) => {\r\n const width = _.get(imageData, 'width') || _.get(imageData, 'image.width') || _.get(imageData, 'CropWidth');\r\n const height = _.get(imageData, 'height') || _.get(imageData, 'image.height') || _.get(imageData, 'CropHeight');\r\n if (Array.isArray(minSizeConfig) && ((minSizeConfig[0] && (width < minSizeConfig[0])) || (minSizeConfig[1] && (height < minSizeConfig[1])))) {\r\n hasError = true;\r\n return false;\r\n }\r\n return true;\r\n });\r\n return {\r\n hasError,\r\n data: elementType === 'logo' ? { logos: filterImagesAsset } : { images: filterImagesAsset },\r\n };\r\n};\r\n\r\nexport const processImageAssetPayload = ({ images, elementType, data }) => {\r\n if (elementType === 'logo') {\r\n // crop images to square and landscape\r\n let squareLogoCount = data.filter(logo => logo.ImageType === 'square').length;\r\n const logos = [];\r\n images.forEach((imageData) => {\r\n const squareSettings = getCenterCroppedSettings({\r\n SourceWidth: _.get(imageData, 'width') || _.get(imageData, 'image.width'),\r\n SourceHeight: _.get(imageData, 'height') || _.get(imageData, 'image.height'),\r\n SourceX: 0,\r\n SourceY: 0,\r\n }, 1);\r\n const landScapeSettings = getCenterCroppedSettings({\r\n SourceWidth: _.get(imageData, 'width') || _.get(imageData, 'image.width'),\r\n SourceHeight: _.get(imageData, 'height') || _.get(imageData, 'image.height'),\r\n SourceX: 0,\r\n SourceY: 0,\r\n }, 4);\r\n\r\n let cropSettings = squareSettings;\r\n let logoType = 'square';\r\n\r\n if ((squareLogoCount === logoTypeLimit) ||\r\n (landScapeSettings.SourceWidth * landScapeSettings.SourceHeight > squareSettings.SourceWidth * squareSettings.SourceHeight)) {\r\n logoType = 'landscape';\r\n cropSettings = landScapeSettings;\r\n } else {\r\n squareLogoCount += 1;\r\n }\r\n\r\n logos.push({\r\n Id: _.get(imageData, 'id') || _.get(imageData, 'image.id'),\r\n CropX: cropSettings.SourceX,\r\n CropY: cropSettings.SourceY,\r\n CropWidth: cropSettings.SourceWidth,\r\n CropHeight: cropSettings.SourceHeight,\r\n Name: null,\r\n Url: _.get(imageData, 'src') || _.get(imageData, 'image.src'),\r\n Type: 'ImageAsset',\r\n SubType: null,\r\n ImageType: logoType,\r\n });\r\n });\r\n\r\n return {\r\n logos: [\r\n ...data,\r\n ...logos,\r\n ],\r\n };\r\n }\r\n\r\n // we are not cropping images\r\n return {\r\n images: [\r\n ...data,\r\n ...images.map(imageData => ({\r\n Id: _.get(imageData, 'id') || _.get(imageData, 'image.id'),\r\n Url: _.get(imageData, 'src') || _.get(imageData, 'image.src'),\r\n CropX: 0,\r\n CropY: 0,\r\n CropWidth: _.get(imageData, 'width') || _.get(imageData, 'image.width'),\r\n CropHeight: _.get(imageData, 'height') || _.get(imageData, 'image.height'),\r\n Name: null,\r\n Type: 'ImageAsset',\r\n SubType: null,\r\n }))],\r\n };\r\n};\r\n","/* istanbul ignore file */\r\nimport React, { useCallback, useMemo } from 'react';\r\nimport { getImageDetailAsync } from '@bingads-webui-campaign/image-experience-utils';\r\nimport { useImagePicker } from '@bingads-webui-campaign-react/add-image-hooks';\r\nimport { UploadImage } from '@bingads-webui-campaign-react/display-ads-editor';\r\nimport { constants } from '@bingads-webui-campaign-react/image-experience-model';\r\nimport { CSMLAssetSource } from '@bingads-webui-campaign-react/asset-library-model';\r\nimport PropTypes from 'prop-types';\r\nimport { ListPanel } from '../list-panel';\r\nimport { BrandKitLogoEditPanel } from '../logo-edit-panel';\r\nimport { duplicateImagesValidation, imageMinSizeValidation, processImageAssetPayload } from './process-image-asset-payload';\r\n// import { BrandKitImageEditPanel } from '../image-edit-panel';\r\n\r\nexport const ImageListElement = React.memo(({\r\n data,\r\n title,\r\n i18n,\r\n maxLimit,\r\n maxCount,\r\n isLoading,\r\n maxSquareLogosLimit,\r\n maxLandscapeLogosLimit,\r\n elementType,\r\n subTitle,\r\n text,\r\n contentBefore,\r\n preferenceService,\r\n permissions,\r\n serverContext,\r\n aid,\r\n cid,\r\n panelTitle,\r\n panelSubtitle,\r\n showEditBtn,\r\n oDataConfig,\r\n perfMarker,\r\n updateOrCreateBrandKit,\r\n helpTopic,\r\n helpLabel,\r\n}) => {\r\n const [openLogoEditPanel, setOpenLogoEditPanel] = React.useState(false);\r\n const [selectedImageIdx, setSelectedImageIdx] = React.useState(0);\r\n const [errorMessage, setErrorMessage] = React.useState('');\r\n const {\r\n displayImagePicker,\r\n setDisplayImagePicker,\r\n selectedMediaPanelSource,\r\n setSelectedMediaPanelSource,\r\n } = useImagePicker();\r\n const clearErrorMessage = useCallback(() => {\r\n setErrorMessage('');\r\n }, []);\r\n const minSizeConfig = constants.brandkitMinSize;\r\n const selectedImage = useMemo(() => data[selectedImageIdx] || {}, [data, selectedImageIdx]);\r\n const openImageEditPanel = useCallback((idx) => {\r\n setSelectedImageIdx(idx);\r\n if (elementType === 'logo') {\r\n setOpenLogoEditPanel(true);\r\n }\r\n clearErrorMessage();\r\n }, [clearErrorMessage, elementType]);\r\n const onEditImage = useCallback((ev) => {\r\n const { idx } = ev.currentTarget.dataset;\r\n const index = Number(idx);\r\n if (data && data[index]) {\r\n if (data[index].Width && data[index].Height) {\r\n openImageEditPanel(index);\r\n return;\r\n }\r\n const fullUrl = data[index].Url;\r\n getImageDetailAsync(fullUrl).then(({ naturalWidth, naturalHeight }) => {\r\n const newData = data;\r\n newData[index].Width = naturalWidth;\r\n newData[index].Height = naturalHeight;\r\n openImageEditPanel(index);\r\n });\r\n }\r\n }, [data, openImageEditPanel]);\r\n const onAddImage = useCallback(() => {\r\n setDisplayImagePicker(true);\r\n clearErrorMessage();\r\n }, [clearErrorMessage, setDisplayImagePicker]);\r\n const onRemoveImage = (ev) => {\r\n const { idx } = ev.currentTarget.dataset;\r\n let key = 'images';\r\n if (elementType === 'logo') {\r\n key = 'logos';\r\n }\r\n updateOrCreateBrandKit({\r\n [key]: data.filter((_, i) => i !== Number(idx)),\r\n });\r\n clearErrorMessage();\r\n };\r\n\r\n const closeLogoEditPanel = useCallback(() => {\r\n setOpenLogoEditPanel(false);\r\n }, []);\r\n const onSelectImages = useCallback((imageData) => {\r\n const payload = processImageAssetPayload({ images: imageData, elementType, data });\r\n const { hasError } = imageMinSizeValidation(payload, minSizeConfig, elementType);\r\n const { data: imageAsset, hasDuplicateError } = duplicateImagesValidation(payload, elementType);\r\n if (hasError) {\r\n setErrorMessage(_TL_('Image does not meet the minimum pixel requirements for this placement.'));\r\n } else if (hasDuplicateError) {\r\n setErrorMessage(_TL_('Image is duplicate'));\r\n } else { clearErrorMessage(); }\r\n updateOrCreateBrandKit(imageAsset);\r\n }, [clearErrorMessage, data, elementType, minSizeConfig, updateOrCreateBrandKit]);\r\n\r\n const onApplyEditLogo = useCallback((image) => {\r\n if (image && image.cropSettings) {\r\n const newData = data;\r\n newData[selectedImageIdx].CropX = image.cropSettings.SourceX;\r\n newData[selectedImageIdx].CropY = image.cropSettings.SourceY;\r\n newData[selectedImageIdx].CropWidth = image.cropSettings.SourceWidth;\r\n newData[selectedImageIdx].CropHeight = image.cropSettings.SourceHeight;\r\n newData[selectedImageIdx].ImageType = image.aspectRatio;\r\n updateOrCreateBrandKit({\r\n logos: data,\r\n });\r\n }\r\n closeLogoEditPanel();\r\n }, [closeLogoEditPanel, data, selectedImageIdx, updateOrCreateBrandKit]);\r\n\r\n const cropSettings = useMemo(() => ({\r\n SourceX: selectedImage.CropX,\r\n SourceY: selectedImage.CropY,\r\n SourceWidth: selectedImage.CropWidth,\r\n SourceHeight: selectedImage.CropHeight,\r\n }), [selectedImage]);\r\n\r\n return (\r\n <>\r\n \r\n
\r\n );\r\n\r\n const taglinesBody = () => (\r\n \r\n {i18n.getString(_TL_('Brand Personality'))} \r\n {i18n.getString(_TL_(\"How would you describe your brand's personality?\"))} \r\n
\r\n \r\n {i18n.getString(_TL_('Brand Tone'))} \r\n {i18n.getString(_TL_('How would you describe your brand voice in keywords?'))} \r\n {selectedOptions.length > 0 && (\r\n \r\n \r\n {mockCopilotToneSuggestions.length ? (\r\n mockCopilotToneSuggestions.map(option => (\r\n \r\n {option}\r\n \r\n ))\r\n ) : (\r\n \r\n {i18n.getString(_TL_('No options available'))}\r\n \r\n )}\r\n \r\n \r\n {i18n.getString(_TL_('Type desired tag and press enter to add'))} \r\n
\r\n \r\n \r\n {\r\n selectedOptions.length > 0 &&\r\n selectedOptions.map(option => (\r\n \r\n {option}\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_('More tone suggestions from Copilot'))}\r\n \r\n \r\n \r\n {mockCopilotSuggestionIndexes.map(index => (\r\n \r\n } onClick={refreshMockCopilotSuggestions} />\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n","import { makeStyles, shorthands, tokens } from '@fluentui/react-components';\r\n\r\nexport const useBrandKitPageStyle = makeStyles({\r\n brandKitPage: {\r\n display: 'flex',\r\n ...shorthands.margin('32px', '36px'),\r\n flexDirection: 'column',\r\n ...shorthands.gap(tokens.spacingVerticalL),\r\n },\r\n brandElements: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n ...shorthands.gap(tokens.spacingVerticalL),\r\n },\r\n});\r\n","import React, {\r\n useCallback,\r\n useContext,\r\n} from 'react';\r\nimport classNames from 'classnames';\r\nimport PropTypes from 'prop-types';\r\nimport {\r\n ImageRegular,\r\n TextFontRegular,\r\n} from '@fluentui/react-icons';\r\nimport { ColorPicker } from '@bingads-webui-campaign-react/ads-color-picker';\r\nimport { EntryCardSVGIcons } from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\nimport { actionTypes } from './reducer';\r\nimport { BrandKitContext } from './context';\r\nimport { ContentPanel } from './content-panel';\r\nimport { useBrandKitPageStyle } from './styles';\r\nimport { BrandKitImageListElement, BrandKitFontsSelector } from './components';\r\n\r\nconst MAX_SQUARE_LOGOS = 5;\r\nconst MAX_LANDSCAPE_LOGOS = 5;\r\nconst MAX_IMAGES = 15;\r\nexport const BrandElements = ({\r\n i18n,\r\n preferenceService,\r\n serverContext,\r\n aid,\r\n loading,\r\n cid,\r\n oDataConfig,\r\n fetchBrandKitData,\r\n perfMarker,\r\n permissions,\r\n brandKitDataService,\r\n}) => {\r\n const { state, dispatch } = useContext(BrandKitContext);\r\n const classes = useBrandKitPageStyle();\r\n const {\r\n id,\r\n brandkitName,\r\n fonts = [],\r\n images = [],\r\n logos = [],\r\n palettes = [],\r\n squareLogosCount,\r\n landscapeLogosCount,\r\n } = state || {};\r\n\r\n // eslint-disable-next-line no-unused-vars\r\n const updateOrCreateBrandKit = useCallback(async (brandKit) => {\r\n if (!id) {\r\n const { error } = await brandKitDataService.createBrandKits(aid, [{\r\n brandkitName: 'Brandkit',\r\n ...brandKit,\r\n },\r\n ]);\r\n if (error) {\r\n // throw new error('Error while creating brandkit');\r\n return;\r\n }\r\n fetchBrandKitData();\r\n return;\r\n }\r\n const { error } = await brandKitDataService.updateBrandKit(aid, [{\r\n id,\r\n brandkitName,\r\n ...brandKit,\r\n }]);\r\n if (error) {\r\n // throw new error('Error while updating brandkit');\r\n return;\r\n }\r\n fetchBrandKitData();\r\n }, [id, brandKitDataService, fonts, brandkitName, images, logos, palettes, fetchBrandKitData, aid]);\r\n\r\n\r\n const onUpdateColor = useCallback((colorId, colorObj) => {\r\n if (colorId === '') {\r\n // ADD\r\n palettes.push({ Name: colorObj.str, HexCode: colorObj.str, Type: '' });\r\n updateOrCreateBrandKit({ palettes });\r\n return;\r\n }\r\n // EDIT\r\n const updatePalette = palettes.map((palette) => {\r\n if (palette.Name === colorId) {\r\n return { Name: colorObj.str, HexCode: colorObj.str, Type: '' };\r\n }\r\n return palette;\r\n });\r\n updateOrCreateBrandKit({ palettes: updatePalette });\r\n }, [palettes, updateOrCreateBrandKit]);\r\n const onDeleteColor = useCallback((ev) => {\r\n const { colorid } = ev.currentTarget.dataset;\r\n if (colorid === '') {\r\n return;\r\n }\r\n const updatePalette = palettes.filter(palette => palette.Name !== colorid);\r\n updateOrCreateBrandKit({ palettes: updatePalette });\r\n }, [palettes, updateOrCreateBrandKit]);\r\n\r\n const onUpdateFonts = useCallback((updatedFonts) => {\r\n dispatch({\r\n type: actionTypes.updateFonts,\r\n payload: updatedFonts,\r\n });\r\n updateOrCreateBrandKit({ fonts: updatedFonts });\r\n }, [dispatch, updateOrCreateBrandKit]);\r\n\r\n const totalLogosCount = MAX_LANDSCAPE_LOGOS + MAX_SQUARE_LOGOS;\r\n const maxLogosLimit = logos ? totalLogosCount - logos.length : totalLogosCount;\r\n const maxImagesLimit = images ? MAX_IMAGES - images.length : MAX_IMAGES;\r\n const maxSquareLogosLimit = squareLogosCount ? MAX_SQUARE_LOGOS - squareLogosCount : MAX_SQUARE_LOGOS;\r\n const maxLandscapeLogosLimit = landscapeLogosCount ? MAX_LANDSCAPE_LOGOS - landscapeLogosCount : MAX_LANDSCAPE_LOGOS;\r\n\r\n return (\r\n \r\n \r\n \r\n )} */}\r\n {isBrandKitUIPhase2Enabled && (\r\n \r\n {i18n.getString(_TL_('Assets'))} \r\n {i18n.getString(_TL_('Brand voice'))} \r\n \r\n )}\r\n {selectedTab === TabValues.Assets &&
\r\n );\r\n};\r\n\r\nBrandKitPage.propTypes = {\r\n notificationApi: PropTypes.shape({}),\r\n logger: PropTypes.shape({\r\n logTrace: PropTypes.func,\r\n }).isRequired,\r\n brandKitDataService: PropTypes.shape({\r\n getBrandKits: PropTypes.func,\r\n createBrandKits: PropTypes.func,\r\n updateBrandKit: PropTypes.func,\r\n brandkitLoading: PropTypes.bool,\r\n }).isRequired,\r\n brandkitApiState: PropTypes.shape({\r\n brandkitResp: PropTypes.shape({}),\r\n brandkitError: PropTypes.shape({}),\r\n cache: PropTypes.shape({}),\r\n brandkitLoading: PropTypes.bool,\r\n }).isRequired,\r\n aid: PropTypes.number.isRequired,\r\n imageEditService: PropTypes.shape({}).isRequired,\r\n permissions: PropTypes.shape({\r\n dynamic: PropTypes.shape({\r\n BrandKitUIPhase2: PropTypes.bool,\r\n }).isRequired,\r\n }).isRequired,\r\n perfMarker: PropTypes.shape({}).isRequired,\r\n};\r\n\r\nBrandKitPage.defaultProps = {\r\n notificationApi: {\r\n showWarning: () => {},\r\n },\r\n};\r\n\r\nexport const BrandKitPageComponent = withBrandKitContext(BrandKitPage);\r\n","import {\r\n tokens,\r\n makeStyles,\r\n shorthands,\r\n typographyStyles,\r\n} from '@fluentui/react-components';\r\nimport bannerBackground from '../../media/banner-background.png';\r\n\r\nexport const useBannerContainerStyles = makeStyles({\r\n bannerContainer: {\r\n width: '100%',\r\n display: 'flex',\r\n alignSelf: 'stretch',\r\n flexDirection: 'column',\r\n ...shorthands.padding('36px'),\r\n ...shorthands.borderRadius(tokens.borderRadiusXLarge),\r\n ...shorthands.gap(tokens.spacingVerticalXXL, tokens.spacingHorizontalXXL),\r\n backgroundImage: `url(${bannerBackground})`,\r\n backgroundSize: 'cover',\r\n 'background-position': 'right center',\r\n backgroundRepeat: 'no-repeat',\r\n ...typographyStyles.body1,\r\n marginBottom: '40px',\r\n },\r\n heading: {\r\n marginBlockEnd: tokens.spacingVerticalS,\r\n },\r\n});\r\n","import React from 'react';\r\nimport PropTypes, { func } from 'prop-types';\r\nimport { Body2, mergeClasses, Title2 } from '@fluentui/react-components';\r\n\r\nimport { useBannerContainerStyles } from './style';\r\n\r\nexport const Banner = ({ i18n }) => {\r\n const classes = useBannerContainerStyles();\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nBanner.propTypes = {\r\n i18n: PropTypes.shape({ getString: func }).isRequired,\r\n};\r\n\r\n","import { makeStyles, shorthands, tokens } from '@fluentui/react-components';\r\n\r\nexport const useTemplateImageStyles = makeStyles({\r\n flexColumn: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'flex-start',\r\n justifyContent: 'center',\r\n },\r\n templateWithCaption: {\r\n ...shorthands.gap(tokens.spacingVerticalM),\r\n },\r\n caption: {\r\n ...shorthands.gap(tokens.spacingVerticalXS),\r\n },\r\n imageCard: {\r\n width: '240px',\r\n minHeight: '180px',\r\n height: '200px',\r\n filter: 'drop-shadow(0px 0.3px 0.9px rgba(0, 0, 0, 0.1)) drop-shadow(0px 1.6px 3.6px rgba(0, 0, 0, 0.13))',\r\n ...shorthands.padding(tokens.spacingVerticalNone, tokens.spacingHorizontalNone),\r\n ...shorthands.borderRadius('6px'),\r\n },\r\n imageCardThumbnail: {\r\n objectFit: 'cover',\r\n ...shorthands.overflow('hidden'),\r\n },\r\n darkGrayText: {\r\n color: '3B3B4F',\r\n },\r\n grayText: {\r\n color: tokens.colorNeutralForeground3,\r\n },\r\n});\r\n\r\nexport const useTemplateGridStyles = makeStyles({\r\n gridContainer: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n justifyContent: 'flex-start',\r\n alignItems: 'flex-start',\r\n rowGap: tokens.spacingVerticalL,\r\n columnGap: tokens.spacingHorizontalL,\r\n marginTop: tokens.spacingVerticalS,\r\n },\r\n skeletonContainer: {\r\n alignItems: 'center',\r\n display: 'grid',\r\n position: 'relative',\r\n gridTemplateColumns: 'repeat(5, 1fr)',\r\n ...shorthands.gap(tokens.spacingVerticalL),\r\n },\r\n filtersRow: {\r\n display: 'flex',\r\n justifyContent: 'flex-start',\r\n flexWrap: 'wrap',\r\n ...shorthands.gap(tokens.spacingHorizontalS),\r\n },\r\n filterButton: {\r\n minWidth: 'auto',\r\n whiteSpace: 'nowrap',\r\n },\r\n});\r\n","import React, { useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { List, ListItem } from '@fluentui/react-list-preview';\r\nimport { Card, ToggleButton, mergeClasses, Skeleton, SkeletonItem, Caption2, Caption1Strong } from '@fluentui/react-components';\r\nimport { useTemplateImageStyles, useTemplateGridStyles } from './style';\r\n\r\nexport const TemplateImageCard = ({\r\n templateGroupId,\r\n templateAttributes,\r\n setClickedTemplate,\r\n image,\r\n i18n,\r\n}) => {\r\n const classes = useTemplateImageStyles();\r\n\r\n const getAssetCountInfo = () => {\r\n const { logoCount, imageCount, textAreaCount } = templateAttributes.assetCounts;\r\n const result = [];\r\n if (logoCount && logoCount > 1) result.push(i18n.getString(_TL_('{{logoCount}} logos'), { logoCount }));\r\n else if (logoCount && logoCount > 0) result.push(i18n.getString(_TL_('{{logoCount}} logo'), { logoCount }));\r\n if (imageCount && imageCount > 1) result.push(i18n.getString(_TL_('{{imageCount}} images'), { imageCount }));\r\n else if (imageCount && imageCount > 0) result.push(i18n.getString(_TL_('{{imageCount}} image'), { imageCount }));\r\n if (textAreaCount && textAreaCount > 1) result.push(i18n.getString(_TL_('{{textAreaCount}} texts'), { textAreaCount }));\r\n else if (textAreaCount && textAreaCount > 0) result.push(i18n.getString(_TL_('{{textAreaCount}} text'), { textAreaCount }));\r\n return result.join('・');\r\n };\r\n\r\n const onClick = () => {\r\n setClickedTemplate(templateGroupId);\r\n };\r\n\r\n return (\r\n \r\n \r\n {i18n.getString(_TL_('Display templates'))}\r\n \r\n \r\n {i18n.getString(_TL_('Create visually appealing templates for your Display ads to save time during campaign creation.'))}\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\nTemplateImageCard.propTypes = {\r\n templateGroupId: PropTypes.string.isRequired,\r\n templateAttributes: PropTypes.shape({\r\n templateGroupName: PropTypes.string,\r\n tag: PropTypes.string,\r\n assetCounts: PropTypes.shape({}),\r\n }).isRequired,\r\n setClickedTemplate: PropTypes.func.isRequired,\r\n image: PropTypes.string.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n};\r\n\r\nexport const TemplateGrid = ({\r\n templates,\r\n templateTagOptions,\r\n templateAttributesMap,\r\n setClickedTemplate,\r\n loading,\r\n i18n,\r\n}) => {\r\n const classes = useTemplateGridStyles();\r\n const [selectedFilter, setSelectedFilter] = useState(templateTagOptions.all);\r\n const filterOptions = [templateTagOptions.all, templateTagOptions.brandAwareness, templateTagOptions.performance];\r\n\r\n return (\r\n <>\r\n \r\n {templateAttributes.templateGroupName} \r\n {getAssetCountInfo()} \r\n
\r\n \r\n {filterOptions.map((filter, index) => (\r\n \r\n setSelectedFilter(filter)}\r\n className={mergeClasses(`filter-${index}`, classes.filterButton)}\r\n disabled={loading}\r\n checked={selectedFilter === filter}\r\n >\r\n {i18n.getString(filter)}\r\n \r\n \r\n ))}\r\n
\r\n {loading ? (\r\n \r\n \r\n \r\n
\r\n ) : (\r\n \r\n
\r\n \r\n 
\r\n
\r\n );\r\n};\r\n\r\nCarouselItem.propTypes = {\r\n url: PropTypes.string.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n};\r\n\r\nexport const TemplateDetailsCarousel = ({\r\n previews, loading, i18n,\r\n}) => {\r\n const classes = useTemplateCarouselStyles();\r\n return (\r\n <>\r\n {loading || previews === undefined || previews.length === 0 ? (\r\n \r\n
\r\n \r\n
\r\n \r\n {templateGroupName} \r\n
\r\n \r\n {i18n.getString(_TL_('{{count}} sizes'), { count: templateCount })} \r\n {i18n.getString(_TL_('All {{count}} sizes will be automatically added to your template for you to customize.'), { count: templateCount })} \r\n
\r\n \r\n \r\n {\r\n setUrlError(urlErrors[0]);\r\n setUrl(newUrl);\r\n }}\r\n textFieldAriaLabel={i18n.getString(_TL_('Enter your URL'))}\r\n i18n={i18n}\r\n additionalProperties={{\r\n placeholder: i18n.getString(_TL_('Enter your URL')),\r\n id: 'url-input',\r\n }}\r\n />\r\n {urlError && {urlError} }\r\n
\r\n \r\n \r\n \r\n {i18n.getString(_TL_('Get started with a template'))}\r\n \r\n
\r\n );\r\n};\r\n\r\nDisplayTemplatesPage.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n displayTemplatesDataService: PropTypes.shape({\r\n fetchDisplayAdsTemplateGroups: PropTypes.func,\r\n fetchDisplayAdsTemplateGroupDetails: PropTypes.func,\r\n }),\r\n notificationApi: PropTypes.shape({\r\n showWarning: PropTypes.func,\r\n }),\r\n logger: PropTypes.shape({\r\n logTrace: PropTypes.func,\r\n }).isRequired,\r\n permissions: PropTypes.shape({ }).isRequired,\r\n adsStudioUserPreferences: PropTypes.shape({}),\r\n reload: PropTypes.shape({}),\r\n navigation: PropTypes.shape({\r\n gotoDisplayTemplatesCreationPage: PropTypes.func,\r\n }).isRequired,\r\n perfMarker: PropTypes.shape({}).isRequired,\r\n oDataConfig: PropTypes.shape({}).isRequired,\r\n serverContext: PropTypes.shape({}).isRequired,\r\n preferenceService: PropTypes.shape({}).isRequired,\r\n instrumentation: PropTypes.shape({\r\n addScenario: PropTypes.func,\r\n }).isRequired,\r\n};\r\n\r\nDisplayTemplatesPage.defaultProps = {\r\n notificationApi: {},\r\n displayTemplatesDataService: {},\r\n adsStudioUserPreferences: undefined,\r\n reload: null,\r\n};\r\n\r\nexport const DisplayTemplatesPageComponent = DisplayTemplatesPage;\r\n","import { makeStyles } from '@fluentui/react-components';\r\n\r\nexport const useCreateDisplayTemplatePageStyles = makeStyles({\r\n page: {\r\n display: 'flex',\r\n height: '100%',\r\n },\r\n editorContainer: {\r\n position: 'absolute', // workaround for the style issue from the footer\r\n top: '0',\r\n bottom: '0',\r\n width: '100%',\r\n },\r\n});\r\n","/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport React, { useCallback, useEffect } from 'react';\r\nimport {\r\n Link,\r\n ToastTrigger,\r\n Toast,\r\n ToastTitle,\r\n ToastBody,\r\n ToastFooter,\r\n useId,\r\n Button,\r\n} from '@fluentui/react-components';\r\nimport { Dismiss20Regular } from '@fluentui/react-icons';\r\nimport { useToast } from '@bingads-webui-fluent-component/toast-provider';\r\n\r\nconst timeout = 10000;\r\n\r\nconst ToastComponent = ({\r\n i18n, count, navigation, logger, dismissToast, toastId,\r\n}) => {\r\n const buttonRef = React.createRef\r\n {\r\n notify();\r\n dataService.reloadFolderPathTreeItem(['ROOT']);\r\n navigation.gotoImagesPage({ removeSearchQuery: [AdditionalQueries.TemplateGroupId] });\r\n }}\r\n navigation={navigation}\r\n instrumentation={instrumentation}\r\n scenarioName=\"CreateDisplayTemplate\"\r\n activityName=\"CreateDisplayTemplate\"\r\n setDataLoaded={setDataLoaded}\r\n />\r\n
\r\n \r\n );\r\n};\r\n\r\nCreateDisplayTemplatePage.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n dataService: PropTypes.shape({\r\n loadData: PropTypes.func,\r\n reloadFolderPathTreeItem: PropTypes.func,\r\n }),\r\n notificationApi: PropTypes.shape({\r\n showWarning: PropTypes.func,\r\n }),\r\n logger: PropTypes.shape({\r\n logTrace: PropTypes.func,\r\n }).isRequired,\r\n adsStudioUserPreferences: PropTypes.shape({}),\r\n reload: PropTypes.shape({}),\r\n brandKitDataService: PropTypes.shape({\r\n getBrandKits: PropTypes.func,\r\n createBrandKits: PropTypes.func,\r\n updateBrandKit: PropTypes.func,\r\n brandkitLoading: PropTypes.bool,\r\n }).isRequired,\r\n brandkitApiState: PropTypes.shape({\r\n brandkitResp: PropTypes.shape({}),\r\n brandkitError: PropTypes.shape({}),\r\n cache: PropTypes.shape({}),\r\n brandkitLoading: PropTypes.bool,\r\n }).isRequired,\r\n permissions: PropTypes.shape({ }).isRequired,\r\n aid: PropTypes.number.isRequired,\r\n cid: PropTypes.number.isRequired,\r\n pagePerfMarker: PropTypes.shape({}).isRequired,\r\n oDataConfig: PropTypes.shape({}).isRequired,\r\n serverContext: PropTypes.shape({}).isRequired,\r\n preferenceService: PropTypes.shape({}).isRequired,\r\n instrumentation: PropTypes.shape({\r\n addScenario: PropTypes.func,\r\n }).isRequired,\r\n navigation: PropTypes.shape({\r\n gotoDisplayTemplatesPage: PropTypes.func,\r\n gotoImagesPage: PropTypes.func,\r\n removeSearchQuery: PropTypes.func,\r\n }).isRequired,\r\n displayTemplatesDataService: PropTypes.shape({\r\n editDisplayAdsAssetRecommendations: PropTypes.func,\r\n fetchDisplayAdsTemplateGroupDetails: PropTypes.func,\r\n }).isRequired,\r\n setDataLoaded: PropTypes.func.isRequired,\r\n search: PropTypes.string.isRequired,\r\n};\r\n\r\nCreateDisplayTemplatePage.defaultProps = {\r\n dataService: {},\r\n notificationApi: {},\r\n adsStudioUserPreferences: undefined,\r\n reload: null,\r\n};\r\n\r\nexport const CreateDisplayTemplatePageComponent = CreateDisplayTemplatePage;\r\n","import { makeStyles } from '@fluentui/react-components';\r\n\r\nexport const useEditDisplayTemplatePageStyles = makeStyles({\r\n page: {\r\n display: 'flex',\r\n height: '100%',\r\n },\r\n editorContainer: {\r\n position: 'absolute', // workaround for the style issue from the footer\r\n top: '0',\r\n bottom: '0',\r\n width: '100%',\r\n },\r\n});\r\n","import React, { useCallback, useEffect, useState, useMemo, useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport queryString from 'query-string';\r\nimport _ from 'underscore';\r\nimport { Overlay } from '@bingads-webui-react/fabric-control';\r\nimport { DisplayAdsEditor } from '@bingads-webui-campaign-react/display-ads-editor';\r\nimport { DataContext } from '@bingads-webui-campaign-react/ads-studio-shared-components';\r\nimport { AdsStudioSpinner, ClarityTags, useClarityTags, AdditionalQueries } from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\n\r\nimport { useEditDisplayTemplatePageStyles } from './style';\r\nimport { useNotify } from '../create-display-template-page-component/use-notify';\r\n\r\nconst EditDisplayTemplatePage = ({\r\n logger,\r\n notificationApi,\r\n imageId,\r\n i18n,\r\n brandKitDataService,\r\n brandkitApiState,\r\n displayTemplatesDataService,\r\n dataService,\r\n permissions,\r\n aid,\r\n cid,\r\n oDataConfig,\r\n serverContext,\r\n preferenceService,\r\n pagePerfMarker: displayTemplateEditPagePerfMarker,\r\n setDataLoaded,\r\n navigation,\r\n search,\r\n instrumentation,\r\n}) => {\r\n const classes = useEditDisplayTemplatePageStyles();\r\n const queries = queryString.parse(search);\r\n const {\r\n folderId = '',\r\n templateId = '',\r\n } = queries || {};\r\n\r\n const [templateDetails, setTemplateDetails] = useState(null);\r\n const [templateConfig, setTemplateConfig] = useState(null);\r\n const [displayAd, setDisplayAd] = useState(null);\r\n const [sourceType, setSourceType] = useState(null);\r\n const { data: imageDetails } = useContext(DataContext);\r\n const notify = useNotify({\r\n i18n, count: 1, navigation, logger,\r\n });\r\n\r\n const isPageLoading = useMemo(() => !templateDetails, [templateDetails]);\r\n\r\n const displayAdFromStorage = useMemo(() => {\r\n setSourceType(imageDetails ? imageDetails.sourceType : undefined);\r\n\r\n if (imageDetails && imageDetails.imageId === imageId &&\r\n imageDetails.metadata &&\r\n imageDetails.metadata.template &&\r\n imageDetails.metadata.template.templateId === templateId) {\r\n return {\r\n ...imageDetails.metadata,\r\n url: imageDetails.url,\r\n };\r\n }\r\n\r\n return null;\r\n }, [imageId, templateId, imageDetails]);\r\n\r\n const handleFailedToLoadData = useCallback(() => {\r\n notificationApi.showWarning(i18n.getString(_TL_('Failed to load. Please refresh the page and try again.')));\r\n }, [i18n, notificationApi]);\r\n\r\n useClarityTags([\r\n ClarityTags.LaunchedAdsStudio,\r\n ClarityTags.EditDisplayTemplateImage,\r\n ]);\r\n\r\n useEffect(() => {\r\n if (!displayAd) {\r\n displayTemplateEditPagePerfMarker.willFetchData();\r\n if (displayAdFromStorage) {\r\n setDisplayAd(displayAdFromStorage);\r\n } else {\r\n dataService.getImageById({ imageId }).then((image) => {\r\n if (!image.metadata || !image.metadata.template || image.metadata.template.templateId !== templateId) {\r\n navigation.gotoHomePage({ removeSearchQuery: [AdditionalQueries.TemplateId, AdditionalQueries.FolderId] });\r\n } else {\r\n setSourceType(image.sourceType);\r\n setDisplayAd({\r\n ...image.metadata,\r\n url: image.url,\r\n });\r\n }\r\n }).catch(() => {\r\n handleFailedToLoadData();\r\n logger.logTrace('failed to load');\r\n });\r\n }\r\n }\r\n }, [displayAdFromStorage, dataService, imageId, navigation, templateId, handleFailedToLoadData, logger, displayAd, displayTemplateEditPagePerfMarker]);\r\n\r\n useEffect(() => {\r\n if (!imageId || !templateId) {\r\n navigation.gotoHomePage({ removeSearchQuery: [AdditionalQueries.TemplateId, AdditionalQueries.FolderId] });\r\n }\r\n }, [imageId, templateId, navigation]);\r\n\r\n useEffect(() => {\r\n if (!templateConfig) {\r\n displayTemplateEditPagePerfMarker.willFetchData();\r\n displayTemplatesDataService\r\n .fetchDisplayAdsTemplateDefinition(templateId)\r\n .then(({ Data: templates }) => {\r\n const latestTemplate = _.max(\r\n templates.displayAdsTemplateDefinitions,\r\n templateDefinition => Number(templateDefinition.version)\r\n );\r\n setTemplateConfig(latestTemplate);\r\n })\r\n .catch(() => {\r\n handleFailedToLoadData();\r\n logger.logTrace('failed to load');\r\n });\r\n }\r\n }, [handleFailedToLoadData, logger, displayTemplatesDataService, templateId, templateConfig, displayTemplateEditPagePerfMarker]);\r\n\r\n useEffect(() => {\r\n if (!templateDetails && templateConfig && displayAd) {\r\n setTemplateDetails({\r\n displayAdsTemplateDetails: [\r\n {\r\n templateConfig,\r\n displayAd,\r\n },\r\n ],\r\n });\r\n }\r\n }, [displayAd, templateConfig, templateDetails]);\r\n\r\n return (\r\n \r\n {isPageLoading && (\r\n \r\n \r\n )}\r\n {!isPageLoading && (\r\n {\r\n notify();\r\n navigation.gotoImagesPage({ removeSearchQuery: [AdditionalQueries.TemplateId, AdditionalQueries.FolderId] });\r\n }}\r\n navigation={navigation}\r\n instrumentation={instrumentation}\r\n scenarioName=\"EditDisplayTemplateImage\"\r\n activityName=\"EditDisplayTemplateImage\"\r\n sourceType={sourceType}\r\n setDataLoaded={setDataLoaded}\r\n folderId={folderId}\r\n />\r\n ) }\r\n
\r\n );\r\n};\r\n\r\nEditDisplayTemplatePage.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n displayTemplatesDataService: PropTypes.shape({\r\n fetchDisplayAdsTemplateDefinition: PropTypes.func,\r\n }),\r\n notificationApi: PropTypes.shape({\r\n showWarning: PropTypes.func,\r\n }),\r\n logger: PropTypes.shape({\r\n logTrace: PropTypes.func,\r\n }).isRequired,\r\n adsStudioUserPreferences: PropTypes.shape({}),\r\n reload: PropTypes.shape({}),\r\n navigation: PropTypes.shape({\r\n gotoHomePage: PropTypes.func,\r\n gotoImagesPage: PropTypes.func,\r\n }).isRequired,\r\n imageId: PropTypes.string.isRequired,\r\n brandKitDataService: PropTypes.shape({\r\n getBrandKits: PropTypes.func,\r\n createBrandKits: PropTypes.func,\r\n updateBrandKit: PropTypes.func,\r\n brandkitLoading: PropTypes.bool,\r\n }).isRequired,\r\n brandkitApiState: PropTypes.shape({\r\n brandkitResp: PropTypes.shape({}),\r\n brandkitError: PropTypes.shape({}),\r\n cache: PropTypes.shape({}),\r\n brandkitLoading: PropTypes.bool,\r\n }).isRequired,\r\n dataService: PropTypes.shape({\r\n getImageById: PropTypes.func,\r\n }).isRequired,\r\n permissions: PropTypes.shape({}).isRequired,\r\n aid: PropTypes.number.isRequired,\r\n cid: PropTypes.number.isRequired,\r\n oDataConfig: PropTypes.shape({}).isRequired,\r\n serverContext: PropTypes.shape({}).isRequired,\r\n preferenceService: PropTypes.shape({}).isRequired,\r\n pagePerfMarker: PropTypes.shape({\r\n willFetchData: PropTypes.func,\r\n }).isRequired,\r\n search: PropTypes.string.isRequired,\r\n instrumentation: PropTypes.shape({}).isRequired,\r\n setDataLoaded: PropTypes.func.isRequired,\r\n};\r\n\r\nEditDisplayTemplatePage.defaultProps = {\r\n displayTemplatesDataService: {},\r\n notificationApi: {},\r\n adsStudioUserPreferences: undefined,\r\n reload: null,\r\n};\r\n\r\nexport const EditDisplayTemplatePageComponent = EditDisplayTemplatePage;\r\n","import { makeStyles } from '@fluentui/react-components';\r\n\r\nexport const useFolderGridCellWithContextMenuStyle = makeStyles({\r\n folderCellContextMenuButton: {\r\n height: '100%',\r\n width: '100%',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n },\r\n});\r\n","/* eslint-disable object-curly-newline */\r\nimport _ from 'underscore';\r\nimport React, { useCallback, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { MoreVertical20Regular } from '@fluentui/react-icons';\r\nimport {\r\n Menu,\r\n MenuItem,\r\n MenuList,\r\n MenuPopover,\r\n MenuTrigger,\r\n} from '@fluentui/react-components';\r\nimport { AdsStudioFoldersGridCell } from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\n\r\nimport { useFolderGridCellWithContextMenuStyle } from '../styles/folders-grid-cell-with-context-menu-style';\r\n\r\nfunction getMenuItems({\r\n item,\r\n isReadonly,\r\n onSelectMenuItemClick,\r\n onOpenMenuItemClick,\r\n onDeleteMenuItemClick,\r\n onRenameMenuItemClick,\r\n onViewPerformanceClick,\r\n i18n,\r\n}) {\r\n const items = _.compact([{\r\n key: 'deleteItem',\r\n text: i18n.getString(_TL_('Delete')),\r\n ariaLabel: i18n.getString(_TL_('Delete')),\r\n onClick: onDeleteMenuItemClick ? () => onDeleteMenuItemClick(item) : _.noop,\r\n disabled: !!isReadonly,\r\n },\r\n {\r\n key: 'openCell',\r\n text: i18n.getString(_TL_('Open')),\r\n ariaLabel: i18n.getString(_TL_('Open')),\r\n onClick: onOpenMenuItemClick ? () => onOpenMenuItemClick(item) : _.noop,\r\n },\r\n {\r\n key: 'renameItem',\r\n text: i18n.getString(_TL_('Rename')),\r\n ariaLabel: i18n.getString(_TL_('Rename')),\r\n onClick: onRenameMenuItemClick ? () => onRenameMenuItemClick(item) : _.noop,\r\n disabled: !!isReadonly,\r\n },\r\n {\r\n key: 'selectCell',\r\n text: i18n.getString(_TL_('Select')),\r\n ariaLabel: i18n.getString(_TL_('Select')),\r\n onClick: onSelectMenuItemClick ? () => onSelectMenuItemClick(item) : _.noop,\r\n },\r\n {\r\n key: 'viewPerformance',\r\n text: i18n.getString(_TL_('View performance')),\r\n ariaLabel: i18n.getString(_TL_('View performance')),\r\n onClick: onViewPerformanceClick ? () => onViewPerformanceClick(item) : _.noop,\r\n },\r\n ]);\r\n return items;\r\n}\r\n\r\nconst FoldersGridCellWithContextMenu = ({\r\n item,\r\n isReadonly,\r\n onSelectMenuItemClick,\r\n onOpenMenuItemClick,\r\n onDeleteMenuItemClick,\r\n onRenameMenuItemClick,\r\n onViewPerformanceClick,\r\n i18n,\r\n ...rest\r\n}) => {\r\n const classes = useFolderGridCellWithContextMenuStyle();\r\n const menuItems = useMemo(() => getMenuItems({\r\n item,\r\n isReadonly,\r\n onSelectMenuItemClick,\r\n onOpenMenuItemClick,\r\n onDeleteMenuItemClick,\r\n onRenameMenuItemClick,\r\n onViewPerformanceClick,\r\n i18n,\r\n }), [item, isReadonly, onSelectMenuItemClick, onOpenMenuItemClick, onDeleteMenuItemClick, onRenameMenuItemClick, onViewPerformanceClick, i18n]);\r\n\r\n const renderAccessory = useCallback(() => (\r\n ), [classes.folderCellContextMenuButton, menuItems]);\r\n\r\n return ({errorText}
}\r\n {value}
\r\n \r\n );\r\n }\r\n return (\r\n {value}
\r\n \r\n );\r\n};\r\n\r\nValueWithTooltip.propTypes = {\r\n value: PropTypes.string,\r\n valueDescription: PropTypes.string,\r\n ellipsisOnLeft: PropTypes.bool,\r\n};\r\n\r\nValueWithTooltip.defaultProps = {\r\n value: '',\r\n valueDescription: '',\r\n ellipsisOnLeft: false,\r\n};\r\n\r\nconst Associations = ({\r\n assetId, folderAssetType, availableActions, i18n, navigation, logger,\r\n}) => {\r\n const classes = useAssociationsButtonStyles();\r\n\r\n const [isLoading, setLoading] = useState(false);\r\n const onClick = useCallback(() => {\r\n logger.logTrace('View all ads using this asset clicked');\r\n setLoading(true);\r\n return navigation.gotoAdsPageWithAssetIdFilter({ folderAssetType, assetId }, true)\r\n .finally(() => setLoading(false));\r\n }, [assetId, folderAssetType, logger, navigation]);\r\n\r\n return (\r\n \r\n {availableActions.gotoAds ? (\r\n
\r\n );\r\n};\r\n\r\nAssociations.propTypes = {\r\n assetId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\r\n folderAssetType: PropTypes.string,\r\n availableActions: PropTypes.shape({\r\n gotoAds: PropTypes.bool,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n navigation: PropTypes.shape({\r\n gotoAdsPageWithAssetIdFilter: PropTypes.func,\r\n }).isRequired,\r\n logger: PropTypes.shape({\r\n logTrace: PropTypes.func,\r\n }).isRequired,\r\n};\r\n\r\nAssociations.defaultProps = {\r\n folderAssetType: '',\r\n};\r\n\r\nconst ImagePreview = ({\r\n id, name, folderAssetType, thumbnailUrl, onRenderPreview,\r\n}) => {\r\n const classes = useImagePreviewStyles();\r\n let preview = '';\r\n if (onRenderPreview) {\r\n preview = onRenderPreview();\r\n } else if (thumbnailUrl) {\r\n preview = (\r\n {preview}\r\n
\r\n );\r\n};\r\n\r\nImagePreview.propTypes = {\r\n id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\r\n name: PropTypes.string,\r\n folderAssetType: PropTypes.string,\r\n onRenderPreview: PropTypes.func,\r\n thumbnailUrl: PropTypes.string,\r\n};\r\n\r\nImagePreview.defaultProps = {\r\n id: '',\r\n name: '',\r\n folderAssetType: '',\r\n onRenderPreview: undefined,\r\n thumbnailUrl: undefined,\r\n};\r\n\r\nconst headerWithPopup = (popupId, item, helpPopup) => (\r\n <>\r\n {item.name}\r\n {helpPopup(popupId)}\r\n \r\n);\r\n\r\nexport const colPreview = (i18n, helpPopup) => ({\r\n columnId: 'colPreview',\r\n name: i18n.getString(_TL_('Preview')),\r\n onRender: item => {summary}
\r\n \r\n \r\n \r\n \r\n {\r\n item => (\r\n {item.onRenderHeader(item)} \r\n )\r\n }\r\n \r\n \r\n \r\n {\r\n ({ item, rowId }) => (\r\n \r\n {\r\n columnItem => (\r\n {columnItem.onRender(item)} \r\n )\r\n }\r\n \r\n )\r\n }\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n 0}\r\n selected={selected}\r\n allowedAssetType={allowedAssetType}\r\n onSelectMenuItemClick={onSelectMenuItemClick}\r\n onOpenMenuItemClick={onFolderClick}\r\n onRenameMenuItemClick={onRenameMenuItemClick}\r\n onDeleteMenuItemClick={onDeleteMenuItemClick}\r\n onViewPerformanceClick={onViewPerformanceClick}\r\n isReadonly={isReadonly}\r\n selectedItemCount={selectedItemCount}\r\n draggable\r\n onDrag={onDrag}\r\n droppable={!selected}\r\n onDrop={onDrop}\r\n />\r\n
\r\n );\r\n }\r\n\r\n const onCellDetailsClick = (assetItem) => {\r\n const { id, folderAssetType } = assetItem || {};\r\n resetSelectionState();\r\n navigation.gotoAssetDetails({\r\n assetId: id, assets, totalAssetCount, folderAssetType, loadMoreData, renameAsset,\r\n });\r\n };\r\n\r\n const onCellEditClick = (assetItem) => {\r\n const { id } = assetItem || {};\r\n /* istanbul ignore if */\r\n if (assetItem && assetItem.folderAssetType === FolderAssetType.Video && assetItem.id && assetItem.metaData) {\r\n if (logger && logger.logTrace) {\r\n logger.logTrace('Video Details: edit video', { assetId: id });\r\n }\r\n navigation.gotoEditVideoPage({ videoId: item.id });\r\n } else if (assetItem && assetItem.folderAssetType === FolderAssetType.Image) {\r\n if (logger && logger.logTrace) {\r\n logger.logTrace('Image Details: edit image', { assetId: id });\r\n }\r\n navigation.gotoEditImagePage({ imageId: id, folderId: currentFolderId });\r\n }\r\n };\r\n\r\n return (\r\n \r\n
: null\r\n );\r\n }, [selectedItemCount, isReadonly, i18n, resetSelectionState, confirmBatchDeleteDialog, batchMoveModal]);\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 onSelectionChange = useCallback(({\r\n sectionName, selectedItems, item, selected,\r\n }) => {\r\n if (sectionName === GridSectionName.Folder) {\r\n setSelectedFolders([...selectedItems]);\r\n } else if (sectionName === GridSectionName.Asset) {\r\n if (selected && getImageById && item && item.metadata) {\r\n // preload image data\r\n const {\r\n id = '',\r\n } = item;\r\n singleImagePromises.current[id] = getImageById({ imageId: id, useCache: false });\r\n }\r\n setSelectedAssets([...selectedItems]);\r\n }\r\n }, [getImageById]);\r\n\r\n useEffect(() => {\r\n if (getImageById && selectedAssets.length > 0) {\r\n const checkSelectedAssetsPromise = selectedAssets.map((asset) => {\r\n if (asset && asset.metadata) {\r\n const {\r\n id = '',\r\n } = asset;\r\n const previousPromise = singleImagePromises.current[id];\r\n return previousPromise || getImageById({ imageId: id, useCache: false });\r\n }\r\n return Promise.resolve({});\r\n });\r\n\r\n Promise.all(checkSelectedAssetsPromise).then((assetsList) => {\r\n const hasVideoImage = assetsList.some(asset => asset && asset.isSceneKeyFrame);\r\n if (hasVideoImage) {\r\n setBatchDeleteWarningMsg(i18n.getString(_TL_('Deleted images will still serve in any video ads that currently use it and cannot be edited.')));\r\n } else {\r\n setBatchDeleteWarningMsg('');\r\n }\r\n });\r\n }\r\n }, [getImageById, i18n, selectedAssets]);\r\n\r\n const sectionSelectedItems = useMemo(() => ({\r\n [GridSectionName.Folder]: selectedFolders,\r\n [GridSectionName.Asset]: selectedAssets,\r\n }), [selectedAssets, selectedFolders]);\r\n\r\n const callAsyncApi = useCallback(asyncApi => (...params) => {\r\n setReloadingFolders(true);\r\n return asyncApi(...params).then((result) => {\r\n // reload grids\r\n reloadFolders().finally(() => {\r\n setReloadingFolders(false);\r\n });\r\n const destFolderId = params[0] && params[0].destFolderId;\r\n const reloadFolderPathTreeFolderIdArr = [currentFolderId];\r\n if (destFolderId) {\r\n reloadFolderPathTreeFolderIdArr.push(destFolderId);\r\n }\r\n // reload folder path tree\r\n reloadFolderPathTreeItem(reloadFolderPathTreeFolderIdArr);\r\n return result;\r\n }).tapCatch(() => {\r\n setReloadingFolders(false);\r\n }).finally(() => {\r\n resetSelectionState();\r\n });\r\n }, [currentFolderId, reloadFolderPathTreeItem, reloadFolders, resetSelectionState]);\r\n\r\n const createFolderAsync = callAsyncApi(createFolder);\r\n const renameFolderAsync = callAsyncApi(renameFolder);\r\n const deleteFolderAsync = callAsyncApi(deleteFolder);\r\n const batchDeleteAsync = callAsyncApi(({ onItemDeleted }) => batchDelete({ folders: selectedFolders, assets: selectedAssets, onItemDeleted }));\r\n const batchMoveAsync = callAsyncApi(({ destFolderId }) => batchMove({ destFolderId, folders: selectedFolders, assets: selectedAssets }));\r\n\r\n const onCreateFolderSuccess = (folderName) => {\r\n notificationApi.showInfo(i18n.getString(_TL_('Your folder {{name}} was successfully created.'), { name: folderName }));\r\n };\r\n\r\n const onRenameFolderSuccess = ({ folderName, newFolderName }) => {\r\n notificationApi.showInfo(i18n.getString(_TL_('The {{folderName}} folder was successfully renamed to {{newFolderName}}.'), { folderName, newFolderName }));\r\n };\r\n\r\n const onDeleteFolderSuccess = ({ deletedItems, folderName }) => {\r\n if (_.find(deletedItems, itm => !!itm.err)) {\r\n showNotificationError(i18n.getString(_TL_(\"The {{folderName}} folder couldn't be deleted due to errors. To review the errors, select \"), { folderName }), {\r\n buttonLabel: i18n.getString(_TL_('View details')),\r\n onButtonClick: () => {\r\n logger.logTrace('View deleting folder details result');\r\n summaryResultModal.openFolderDeleteSummaryResultModal(deletedItems);\r\n },\r\n });\r\n } else {\r\n notificationApi.showInfo(i18n.getString(_TL_('The {{folderName}} folder was successfully deleted.'), { folderName }));\r\n }\r\n };\r\n\r\n const onBatchDeleteSuccess = ({ deletedItems, folderCount, assetCount }) => {\r\n if (_.find(deletedItems, itm => !!itm.err)) {\r\n showNotificationError(i18n.getString(_TL_(\"One or more items couldn't be deleted due to errors. To review the errors, select \")), {\r\n buttonLabel: i18n.getString(_TL_('View details')),\r\n onButtonClick: () => {\r\n logger.logTrace('View batch deleting details result');\r\n summaryResultModal.openBatchDeleteSummaryResultModal(deletedItems);\r\n },\r\n });\r\n } else {\r\n notificationApi.showInfo(i18n.getString(\r\n _TL_('({{folderCount}} folders, {{assetCount}} assets) were successfully deleted.'),\r\n { folderCount, assetCount }\r\n ));\r\n }\r\n };\r\n\r\n const onBatchMoveSuccess = ({ assetsSummary, foldersSummary, hasError }) => {\r\n if (hasError) {\r\n showNotificationError(i18n.getString(_TL_(\"One or more items couldn't be moved due to errors. To review the errors, select \")), {\r\n buttonLabel: i18n.getString(_TL_('View details')),\r\n onButtonClick: () => {\r\n logger.logTrace('View batch moving details result');\r\n summaryResultModal.openBatchMoveSummaryResultModal({ assetsSummary, foldersSummary });\r\n },\r\n });\r\n } else {\r\n notificationApi.showInfo(i18n.getString(\r\n _TL_('All items ({{folderCount}} folders, {{assetCount}} assets) were successfully moved. '),\r\n { folderCount: foldersSummary.length, assetCount: assetsSummary.length }\r\n ));\r\n }\r\n };\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nLibraryPageComponent.propTypes = {\r\n dataService: PropTypes.shape({\r\n assets: PropTypes.arrayOf(PropTypes.shape({})),\r\n folders: PropTypes.arrayOf(PropTypes.shape({})),\r\n totalAssetCount: PropTypes.number,\r\n imageCroppingTasks: PropTypes.shape({}),\r\n loadData: PropTypes.func,\r\n loadMoreData: PropTypes.func,\r\n createFolder: PropTypes.func,\r\n reloadFolders: PropTypes.func,\r\n navigateIntoFolder: PropTypes.func,\r\n deleteFolder: PropTypes.func,\r\n renameFolder: PropTypes.func,\r\n batchDelete: PropTypes.func,\r\n batchMove: PropTypes.func,\r\n resetFolderData: PropTypes.func,\r\n getImageById: PropTypes.func,\r\n currentFolderId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\r\n reloadFolderPathTreeItem: PropTypes.func,\r\n renameAsset: 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 navigation: PropTypes.shape({\r\n gotoAddImage: PropTypes.func.isRequired,\r\n gotoEditImage: PropTypes.func.isRequired,\r\n gotoItemDetail: PropTypes.func.isRequired,\r\n gotoVideoDetail: PropTypes.func,\r\n gotoPerformancePage: PropTypes.func.isRequired,\r\n // goBack: PropTypes.func.isRequired,\r\n }).isRequired,\r\n // lcid: PropTypes.number.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 getToday: PropTypes.func,\r\n formatCivilDate: PropTypes.func,\r\n }).isRequired,\r\n aid: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\r\n cid: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\r\n oDataConfig: PropTypes.shape({}).isRequired,\r\n assetLibraryUserPreferences: PropTypes.shape({\r\n sortBy: PropTypes.string,\r\n setSortBy: PropTypes.func,\r\n }),\r\n assetLibraryAccountPreferences: PropTypes.shape({}),\r\n isReadonly: PropTypes.bool,\r\n reload: PropTypes.shape({}), // if changed, force to reload\r\n perfMarker: PropTypes.shape({\r\n done: PropTypes.func,\r\n }).isRequired,\r\n allowedAssetType: PropTypes.string,\r\n isAssetLibraryAIGCMVPEnabled: PropTypes.bool,\r\n isAdsStudioAIGCMVPEnabled: PropTypes.bool,\r\n useBatchMoveModalHook: PropTypes.func.isRequired,\r\n renderHelpPopup: PropTypes.func.isRequired,\r\n notificationApi: PropTypes.shape({\r\n showInfo: PropTypes.func,\r\n showWarning: PropTypes.func,\r\n dismiss: PropTypes.func,\r\n }).isRequired,\r\n targetDropFolder: PropTypes.shape({}),\r\n isAIGCRegionRestricted: PropTypes.bool,\r\n permissions: PropTypes.shape({\r\n dynamic: PropTypes.shape({}),\r\n }),\r\n};\r\n\r\nLibraryPageComponent.defaultProps = {\r\n assetLibraryUserPreferences: null,\r\n assetLibraryAccountPreferences: null,\r\n isReadonly: false,\r\n reload: null,\r\n allowedAssetType: null,\r\n isAssetLibraryAIGCMVPEnabled: false,\r\n isAdsStudioAIGCMVPEnabled: false,\r\n targetDropFolder: null,\r\n isAIGCRegionRestricted: false,\r\n permissions: { dynamic: {} },\r\n};\r\n","import React, { useState, useCallback, useRef } from 'react';\r\n\r\nimport { ConfirmDialog } from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\n\r\nexport const useDragAndDropConfirmDialog = (i18n, logger) => {\r\n const [showConfirmDialog, setShowConfirmDialog] = useState(false);\r\n const [showUIBlocker, setShowUIBlocker] = useState(false);\r\n const targetFolderItemRef = useRef();\r\n\r\n const open = ({ targetFolder }) => {\r\n setShowConfirmDialog(true);\r\n targetFolderItemRef.current = targetFolder;\r\n };\r\n\r\n const render = useCallback((batchMoveApiAsync, onSuccess, onError) => {\r\n const targetFolderItem = targetFolderItemRef.current;\r\n\r\n const { folderId, folderName } = targetFolderItem || {};\r\n\r\n const title = i18n.getString(_TL_('Are you sure you want to move the selected item(s) to the folder \"{{folderName}}\"?'), { folderName });\r\n\r\n const batchMoveApiAsyncWrapper = () => {\r\n setShowUIBlocker(true);\r\n return batchMoveApiAsync({ destFolderId: folderId })\r\n .then((result) => {\r\n onSuccess(result);\r\n\r\n const { hasError } = result || {};\r\n if (hasError) {\r\n logger.logTrace('Drag and drop to move items is done with some errors');\r\n } else {\r\n logger.logTrace('Drag and drop to move items successfully');\r\n }\r\n }).catch((alODataErr) => {\r\n const { getUXMessage } = alODataErr;\r\n logger.logError(alODataErr);\r\n onError(getUXMessage(i18n));\r\n }).finally(() => {\r\n setShowUIBlocker(false);\r\n setShowConfirmDialog(false);\r\n });\r\n };\r\n\r\n const onCancel = () => {\r\n setShowConfirmDialog(false);\r\n };\r\n\r\n return (\r\n {cardData.map(card => (\r\n
\r\n \r\n );\r\n};\r\n\r\n\r\nAssetsEntryCardContainer.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n aid: PropTypes.number.isRequired,\r\n cid: PropTypes.number.isRequired,\r\n oDataConfig: PropTypes.shape({}).isRequired,\r\n navigation: PropTypes.shape({\r\n gotoUploadFilesPanelPage: PropTypes.func,\r\n gotoAddVideoPanelPage: PropTypes.func,\r\n gotoInvestVideoPanelPage: PropTypes.func,\r\n }).isRequired,\r\n logger: PropTypes.shape({\r\n logTrace: PropTypes.func,\r\n }).isRequired,\r\n permissions: PropTypes.shape({\r\n dynamic: PropTypes.shape({}),\r\n }),\r\n};\r\n\r\nAssetsEntryCardContainer.defaultProps = {\r\n permissions: { dynamic: {} },\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { mergeClasses } from '@fluentui/react-components';\r\nimport { AssetsEntryCardContainer } from './assets-entry-cards-container';\r\nimport { useVideoPageTopBannerContainerStyle } from '../../styles';\r\n\r\nconst TopVideoPageBannerComponent = ({\r\n i18n,\r\n aid,\r\n cid,\r\n oDataConfig,\r\n navigation,\r\n logger,\r\n permissions,\r\n}) => {\r\n const classes = useVideoPageTopBannerContainerStyle();\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nTopVideoPageBannerComponent.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n aid: PropTypes.number.isRequired,\r\n cid: PropTypes.number.isRequired,\r\n oDataConfig: PropTypes.shape({}).isRequired,\r\n navigation: PropTypes.shape({}).isRequired,\r\n logger: PropTypes.shape({\r\n logTrace: PropTypes.func,\r\n }).isRequired,\r\n};\r\n\r\nexport default TopVideoPageBannerComponent;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { mergeClasses } from '@fluentui/react-components';\r\nimport { EmptyViewIcons } from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\n\r\nimport { useVideoEmptyViewStyle } from '../../styles';\r\n\r\nexport const VideoEmptyView = ({ i18n, isFilterResult }) => {\r\n const classes = useVideoEmptyViewStyle();\r\n\r\n return (\r\n \r\n
\r\n \r\n {i18n.getString(_TL_('Videos'))}\r\n
\r\n \r\n {i18n.getString(_TL_('Add new videos or search for existing ones'))}\r\n
\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nVideoEmptyView.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n isFilterResult: PropTypes.bool,\r\n};\r\n\r\nVideoEmptyView.defaultProps = {\r\n isFilterResult: false,\r\n};\r\n","import _ from 'underscore';\r\nimport React, { useCallback, useMemo, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {\r\n AdsStudioAssetGridCell,\r\n GridSectionName,\r\n SectionTilesGrid,\r\n DEFAULT_PAGE_SIZE,\r\n} from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\n\r\nexport const VideoGridView = ({\r\n i18n,\r\n dataService,\r\n logger,\r\n onFailedToLoadData,\r\n searchText,\r\n navigation,\r\n permissions,\r\n}) => {\r\n const {\r\n assets,\r\n totalAssetCount,\r\n loadMoreData,\r\n renameAsset,\r\n } = dataService;\r\n\r\n const videosGridSection = useMemo(() => ({\r\n sectionName: GridSectionName.Asset,\r\n sectionClassName: 'ads-studio-video-section',\r\n itemKey: 'id',\r\n items: assets,\r\n totalItemCount: totalAssetCount,\r\n config: {\r\n scrollContainer: '[role=\"main\"]',\r\n minItemHeight: 42,\r\n },\r\n }), [assets, totalAssetCount]);\r\n\r\n const sectionGridData = useMemo(\r\n () => ([videosGridSection]),\r\n [videosGridSection]\r\n );\r\n\r\n const onRenderCell = useCallback(({ item }) => {\r\n const { _index, id, folderAssetType } = item;\r\n\r\n const onCellDetailsClick = () => {\r\n navigation.gotoAssetDetails({\r\n assetId: id, assets, totalAssetCount, folderAssetType, loadMoreData, renameAsset,\r\n });\r\n };\r\n\r\n /* istanbul ignore next */\r\n const onEditClick = () => {\r\n if (item && item.id && item.metaData) {\r\n navigation.gotoEditVideoPage({ videoId: item.id });\r\n }\r\n };\r\n\r\n return (\r\n \r\n 
\r\n
\r\n \r\n {isFilterResult ? i18n.getString(_TL_('No videos match your search. Please try again.')) : i18n.getString(_TL_('You haven\\'t added any videos yet. Choose from the options above.'))}\r\n
\r\n \r\n {isPageLoading && (\r\n \r\n \r\n )}\r\n
\r\n );\r\n};\r\n\r\nVideosPageComponent.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n dataService: PropTypes.shape({}),\r\n notificationApi: PropTypes.shape({}),\r\n logger: PropTypes.shape({\r\n logTrace: PropTypes.func,\r\n }).isRequired,\r\n aid: PropTypes.number.isRequired,\r\n cid: PropTypes.number.isRequired,\r\n oDataConfig: PropTypes.shape({}).isRequired,\r\n adsStudioUserPreferences: PropTypes.shape({}),\r\n reload: PropTypes.shape({}),\r\n navigation: PropTypes.shape({}).isRequired,\r\n};\r\n\r\nVideosPageComponent.defaultProps = {\r\n dataService: {},\r\n notificationApi: {},\r\n adsStudioUserPreferences: undefined,\r\n reload: null,\r\n};\r\n","import { makeStyles, shorthands, tokens } from '@fluentui/react-components';\r\n\r\nexport const useTemplateVideoStyles = makeStyles({\r\n videoCard: {\r\n width: '300px',\r\n filter: 'drop-shadow(0px 0.3px 0.9px rgba(0, 0, 0, 0.1)) drop-shadow(0px 1.6px 3.6px rgba(0, 0, 0, 0.13))',\r\n ...shorthands.padding(tokens.spacingVerticalNone, tokens.spacingHorizontalNone),\r\n ...shorthands.borderRadius('6px'),\r\n },\r\n videoCardThumbnail: {\r\n objectFit: 'cover',\r\n ...shorthands.overflow('hidden'),\r\n },\r\n flexColumn: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'flex-start',\r\n justifyContent: 'center',\r\n },\r\n templateWithCaption: {\r\n ...shorthands.gap(tokens.spacingVerticalM),\r\n },\r\n caption: {\r\n ...shorthands.gap(tokens.spacingVerticalXS),\r\n },\r\n darkGrayText: {\r\n color: '3B3B4F',\r\n },\r\n grayText: {\r\n color: tokens.colorNeutralForeground3,\r\n },\r\n});\r\n\r\nexport const useTemplateGridStyles = makeStyles({\r\n gridContainer: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n justifyContent: 'flex-start',\r\n alignItems: 'flex-start',\r\n rowGap: tokens.spacingVerticalL,\r\n columnGap: tokens.spacingHorizontalL,\r\n marginTop: tokens.spacingVerticalXXL,\r\n },\r\n skeletonContainer: {\r\n alignItems: 'center',\r\n display: 'grid',\r\n position: 'relative',\r\n gridTemplateColumns: 'repeat(5, 1fr)',\r\n ...shorthands.gap(tokens.spacingVerticalL),\r\n },\r\n templateBody: {\r\n paddingTop: '10px',\r\n },\r\n filtersRow: {\r\n display: 'flex',\r\n justifyContent: 'flex-start',\r\n flexWrap: 'wrap',\r\n marginTop: '15px',\r\n ...shorthands.gap(tokens.spacingHorizontalS),\r\n },\r\n filterButton: {\r\n minWidth: 'auto',\r\n whiteSpace: 'nowrap',\r\n },\r\n});\r\n","import React, { useMemo, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { List, ListItem } from '@fluentui/react-list-preview';\r\n\r\nimport { Card, mergeClasses, Title2, Caption2, Caption1Strong, Body2, ToggleButton } from '@fluentui/react-components';\r\nimport { Overlay } from '@bingads-webui-react/fabric-control';\r\nimport { AdsStudioSpinner } from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\n\r\nimport { useTemplateVideoStyles, useTemplateGridStyles } from './style';\r\n\r\nexport const VideoTemplateCard = ({\r\n template,\r\n setClickedTemplate,\r\n i18n,\r\n getAssetCountInfo,\r\n}) => {\r\n const classes = useTemplateVideoStyles();\r\n\r\n const onClick = () => {\r\n setClickedTemplate(template);\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n 
\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nVideoTemplateCard.propTypes = {\r\n template: PropTypes.shape({\r\n TemplateId: PropTypes.string.isRequired,\r\n TemplateName: PropTypes.string.isRequired,\r\n Duration: PropTypes.number,\r\n AspectRatio: PropTypes.string,\r\n Themes: PropTypes.arrayOf(PropTypes.string),\r\n NumberOfImages: PropTypes.number,\r\n NumberOfText: PropTypes.number,\r\n TemplateThumbnailUrl: PropTypes.string.isRequired,\r\n TemplatePreviewUrl: PropTypes.string.isRequired,\r\n // NumberOfLogos: PropTypes.string.isRequired,\r\n }).isRequired,\r\n setClickedTemplate: PropTypes.func.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n getAssetCountInfo: PropTypes.func.isRequired,\r\n};\r\n\r\n\r\nexport const TemplateGrid = ({\r\n templates,\r\n setClickedTemplate,\r\n loading,\r\n i18n,\r\n logger,\r\n getAssetCountInfo,\r\n templateTagOptions,\r\n templateTagsMapping,\r\n}) => {\r\n const classes = useTemplateGridStyles();\r\n const [selectedFilter, setSelectedFilter] = useState(templateTagOptions.all);\r\n const filterOptions = [templateTagOptions.all, templateTagOptions.brandAwareness, templateTagOptions.performance, templateTagOptions.premiumStreaming, templateTagOptions.onlineVideo];\r\n\r\n const getTitleMessage = useMemo(() => (\r\n (templates && templates.length) ? i18n.getString(_TL_('Video templates')) : i18n.getString(_TL_('No templates found'))\r\n ), [templates, i18n]);\r\n\r\n return (\r\n <>\r\n {loading ? (\r\n \r\n {template.LocalizedTemplateName || template.TemplateName} \r\n {getAssetCountInfo(template)} \r\n
\r\n \r\n \r\n \r\n
\r\n ) : (\r\n \r\n { getTitleMessage } \r\n {\r\n (templates && templates.length > 0) &&\r\n
\r\n )}\r\n \r\n );\r\n};\r\n\r\nTemplateGrid.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n templates: PropTypes.arrayOf(PropTypes.shape({\r\n TemplateId: PropTypes.string.isRequired,\r\n TemplateName: PropTypes.string.isRequired,\r\n Duration: PropTypes.number,\r\n AspectRatio: PropTypes.string,\r\n Themes: PropTypes.arrayOf(PropTypes.string),\r\n NumberOfImages: PropTypes.number,\r\n NumberOfText: PropTypes.number,\r\n TemplateThumbnailUrl: PropTypes.string.isRequired,\r\n TemplatePreviewUrl: PropTypes.string.isRequired,\r\n // NumberOfLogos: PropTypes.string.isRequired,\r\n })).isRequired,\r\n setClickedTemplate: PropTypes.func.isRequired,\r\n loading: PropTypes.bool,\r\n logger: PropTypes.shape({\r\n logTrace: PropTypes.func,\r\n }).isRequired,\r\n getAssetCountInfo: PropTypes.func.isRequired,\r\n};\r\n\r\nTemplateGrid.defaultProps = {\r\n loading: true,\r\n};\r\n","import { makeStyles, shorthands, tokens } from '@fluentui/react-components';\r\n\r\nexport const useTemplateDetailsModalStyles = makeStyles({\r\n dialog: {\r\n minWidth: '1030px',\r\n minHeight: '450px',\r\n '@media (max-width: 1030px)': {\r\n minWidth: 'max-content',\r\n minHeight: 'auto',\r\n },\r\n },\r\n dialogContentContainer: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n ...shorthands.gap(tokens.spacingHorizontalXXXL),\r\n '@media (max-width: 1030px)': {\r\n flexDirection: 'column',\r\n paddingBottom: tokens.spacingVerticalL,\r\n },\r\n },\r\n detailsContainer: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n ...shorthands.gap(tokens.spacingVerticalL),\r\n },\r\n textGroup: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n ...shorthands.gap(tokens.spacingHorizontalS),\r\n },\r\n errorMsg: {\r\n color: tokens.colorStatusDangerForeground1,\r\n },\r\n});\r\n","import React, { useMemo, useState, useCallback } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {\r\n Dialog,\r\n DialogContent,\r\n DialogBody,\r\n DialogSurface,\r\n DialogTitle,\r\n Button,\r\n mergeClasses,\r\n Subtitle1,\r\n Caption1,\r\n Label,\r\n} from '@fluentui/react-components';\r\n\r\nimport { Dismiss20Regular } from '@fluentui/react-icons';\r\nimport { UrlInputFluent } from '@bingads-webui-campaign-react/url-input-fluent-v2';\r\nimport { ClipchampPlayer } from '@bingads-webui-campaign-react/clipchamp-player';\r\nimport { useTemplateDetailsModalStyles } from './style';\r\n\r\nexport const TemplateDetailsModal = ({\r\n template,\r\n show,\r\n onShowChange,\r\n onSelectTemplate,\r\n setCopilotFinalUrl,\r\n onClose,\r\n i18n,\r\n getAssetCountInfo,\r\n loadClipchampPlayer,\r\n}) => {\r\n const [finalUrlError, setFinalUrlError] = useState('');\r\n const [url, setUrl] = useState('');\r\n\r\n /* istanbul ignore next */\r\n const onGetStartedButton = useCallback(() => {\r\n if (finalUrlError) {\r\n return;\r\n }\r\n\r\n if (!url) {\r\n setFinalUrlError(i18n.getString(_TL_('Please enter a valid URL.')));\r\n return;\r\n }\r\n\r\n onSelectTemplate({ template });\r\n }, [onSelectTemplate, template, setFinalUrlError, i18n, finalUrlError, url]);\r\n\r\n const DismissIcon = useMemo(() => \r\n \r\n {templates.filter((template) => {\r\n const { TemplateId } = template;\r\n const templateDetails = templateTagsMapping[TemplateId];\r\n return templateDetails && (selectedFilter === templateTagOptions.all || (templateDetails && templateDetails.tags && templateDetails.tags.includes(selectedFilter)));\r\n }).map((template) => {\r\n const { TemplateId } = template;\r\n return (\r\n
\r\n }\r\n \r\n \r\n {i18n.getString(_TL_('Create a video using a template.'))}\r\n \r\n
\r\n \r\n {filterOptions.map((filter, index) => (\r\n \r\n setSelectedFilter(filter)}\r\n className={mergeClasses(`filter-${index}`, classes.filterButton)}\r\n disabled={loading}\r\n checked={selectedFilter === filter}\r\n >\r\n {i18n.getString(filter)}\r\n \r\n \r\n ))}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {template.LocalizedTemplateName || template.TemplateName} \r\n
\r\n \r\n {getAssetCountInfo(template)}\r\n
\r\n \r\n {i18n.getString(_TL_('Duration: {{seconds}} seconds'), { seconds: template.Duration })}\r\n
\r\n \r\n {\r\n setFinalUrlError(urlErrors[0]);\r\n setCopilotFinalUrl(newUrl);\r\n setUrl(newUrl);\r\n }}\r\n textFieldAriaLabel={i18n.getString(_TL_('Enter your URL'))}\r\n i18n={i18n}\r\n additionalProperties={{\r\n placeholder: i18n.getString(_TL_('Enter your URL')),\r\n id: 'url-input',\r\n }}\r\n />\r\n {finalUrlError && {finalUrlError} }\r\n
\r\n \r\n {template.LocalizedTemplateDescription || template.TemplateDescription}
\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nVideoTemplatesPage.propTypes = {\r\n copilotDomainDataService: PropTypes.shape({\r\n getVideoTemplates: PropTypes.func,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n notificationApi: PropTypes.shape({\r\n showWarning: PropTypes.func,\r\n }),\r\n logger: PropTypes.shape({\r\n logTrace: PropTypes.func,\r\n }).isRequired,\r\n adsStudioUserPreferences: PropTypes.shape({}),\r\n reload: PropTypes.shape({}),\r\n navigation: PropTypes.shape({\r\n gotoEditVideoPage: PropTypes.func.isRequired,\r\n }).isRequired,\r\n setCopilotFinalUrl: PropTypes.func.isRequired,\r\n setDataLoaded: PropTypes.func.isRequired,\r\n pagePerfMarker: PropTypes.shape({\r\n willFetchData: PropTypes.func,\r\n willRender: PropTypes.func,\r\n }).isRequired,\r\n loadClipchampPlayer: PropTypes.func.isRequired,\r\n};\r\n\r\nVideoTemplatesPage.defaultProps = {\r\n notificationApi: {\r\n showWarning: () => {},\r\n },\r\n adsStudioUserPreferences: undefined,\r\n reload: null,\r\n};\r\n\r\nconst VideoTemplatesPageWithContexts = ({ ...props }) => {\r\n const [copilotFinalUrl, setCopilotFinalUrl] = React.useState('');\r\n const serverContext = useContext(ServerContext);\r\n const { permissions } = props;\r\n const useClipchamp = permissions && permissions.dynamic && permissions.dynamic.VideoTemplateUI;\r\n\r\n return (\r\n \r\n {(isLoading || isSaving) && (\r\n \r\n \r\n )}\r\n {\r\n (!isLoading) && videoMetadata && videoMetadata.template &&\r\n
\r\n );\r\n};\r\n\r\nEditVideoPage.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n logger: PropTypes.shape({\r\n logTrace: PropTypes.func,\r\n }).isRequired,\r\n permissions: PropTypes.shape({}).isRequired,\r\n isCTV: PropTypes.bool.isRequired,\r\n setDataLoaded: PropTypes.func.isRequired,\r\n pagePerfMarker: PropTypes.shape({\r\n willFetchData: PropTypes.func,\r\n willRender: PropTypes.func,\r\n }).isRequired,\r\n};\r\n\r\nEditVideoPage.defaultProps = {};\r\n\r\nconst EditVideoPageWithContexts = ({ ...props }) => {\r\n const serverContext = useContext(ServerContext);\r\n const { permissions } = props;\r\n const useClipchamp = permissions && permissions.dynamic && permissions.dynamic.VideoTemplateUI;\r\n\r\n return (\r\n {videoId ? i18n.getString(_TL_('Loading...')) : i18n.getString(_TL_('Generating the video for you. This may take a few minutes...'))}
\r\n \r\n {}}\r\n isCTV={isCTV}\r\n cid={cid}\r\n aid={aid}\r\n finalUrl={finalUrl}\r\n assetLibraryConfig={assetLibraryConfig}\r\n permissions={permissions}\r\n isAADUser={serverContext && serverContext.IsAADUser}\r\n serverContext={serverContext}\r\n perfMarker={perfMarker && perfMarker.createChild('VideoTemplateEditor')}\r\n isDialog={false}\r\n loadClipchampPlayer={loadClipchampPlayer}\r\n showVideoTemplateSummaryBarControl\r\n />\r\n
\r\n }\r\n {\r\n !isLoading && (!videoMetadata || !videoMetadata.template) &&\r\n \r\n
\r\n }\r\n \r\n \r\n {i18n.getString(_TL_('An error occured while loading the video.'))}\r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n};\r\n","import {\r\n makeStyles,\r\n makeResetStyles,\r\n shorthands,\r\n tokens,\r\n} from '@fluentui/react-components';\r\n\r\nexport const usePromptEditorStyles = makeStyles({\r\n selectedButton: {\r\n backgroundColor: '#F0EEEE',\r\n ...shorthands.border('1px', 'solid', tokens.colorStrokeFocus2),\r\n },\r\n toggleButton: {\r\n backgroundColor: '#FAFAFA',\r\n },\r\n textareaPlaceHolder: {\r\n width: '100%',\r\n backgroundColor: 'transparent',\r\n boxShadow: '0px 0px 2px 0px rgba(23, 26, 31, 0.12), 0px 0px 1px 0px rgba(23, 26, 31, 0.07)',\r\n '& textarea': {\r\n color: '#8F8F8F',\r\n fontSize: '24px',\r\n fontWeight: '400',\r\n lineHeight: '36px',\r\n },\r\n },\r\n textarea: {\r\n width: '100%',\r\n boxShadow: '0px 0px 2px 0px rgba(23, 26, 31, 0.12), 0px 0px 1px 0px rgba(23, 26, 31, 0.07)',\r\n backgroundColor: 'transparent',\r\n '& textarea': {\r\n color: '#000',\r\n fontSize: '24px',\r\n fontWeight: '600',\r\n lineHeight: '32px',\r\n },\r\n },\r\n autoCompleteTextarea: {\r\n position: 'absolute',\r\n backgroundColor: '#FAFAFA',\r\n width: '100%',\r\n '& textarea': {\r\n color: '#999',\r\n fontSize: '24px',\r\n fontWeight: '600',\r\n lineHeight: '32px',\r\n },\r\n },\r\n});\r\n\r\nexport const usePromptEditorBaseStyles = makeResetStyles({\r\n width: '100%',\r\n '& .prompt': {\r\n ...shorthands.borderRadius('8px', '8px', '0px', '0px'),\r\n ...shorthands.borderBottom('none'),\r\n clipPath: 'inset(-2px -2px 0 -2px)',\r\n borderBottomStyle: 'none',\r\n '&:hover, &:active, &:focus, &:focus-within': {\r\n borderBottomStyle: 'none',\r\n },\r\n '::after': {\r\n display: 'none',\r\n },\r\n height: 'calc(38% - 70px)',\r\n minHeight: '348px',\r\n paddingTop: '12px',\r\n '& textarea': {\r\n maxHeight: 'unset',\r\n height: 'unset',\r\n },\r\n },\r\n '& .words, .buttons': {\r\n backgroundColor: '#FAFAFA',\r\n width: '100%',\r\n },\r\n '& .words': {\r\n ...shorthands.borderLeft('1px', 'solid', tokens.colorNeutralStroke1),\r\n ...shorthands.borderRight('1px', 'solid', tokens.colorNeutralStroke1),\r\n boxShadow: '0px 0px 2px 0px rgba(23, 26, 31, 0.12), 0px 0px 1px 0px rgba(23, 26, 31, 0.07)',\r\n clipPath: 'inset(0px -2px 0px -2px)',\r\n paddingLeft: '12px',\r\n paddingBottom: '20px',\r\n display: 'flex',\r\n gap: '12px',\r\n alignItems: 'center',\r\n flexWrap: 'wrap',\r\n borderTopStyle: 'none',\r\n '& button': {\r\n height: '32px',\r\n ...shorthands.borderRadius('8px', '8px', '8px', '8px'),\r\n ...shorthands.border('1px', 'solid', '#B0BEFF'),\r\n backgroundColor: '#FAFAFA',\r\n fontWeight: tokens.fontWeightRegular,\r\n '&:hover': {\r\n backgroundColor: tokens.colorNeutralBackground1Hover,\r\n borderColor: tokens.colorStrokeFocus2,\r\n borderWidth: '1px',\r\n borderStyle: 'solid',\r\n },\r\n minWidth: 'unset',\r\n whiteSpace: 'nowrap',\r\n },\r\n },\r\n '& .buttons': {\r\n ...shorthands.borderRadius('8px', '8px', '8px', '8px'),\r\n ...shorthands.borderTop('1px', 'solid', tokens.colorNeutralStroke1),\r\n ...shorthands.borderLeft('1px', 'solid', tokens.colorNeutralStroke1),\r\n ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStroke1),\r\n ...shorthands.borderRight('1px', 'solid', tokens.colorNeutralStroke1),\r\n boxShadow: '0px 0px 2px 0px rgba(23, 26, 31, 0.12), 0px 0px 1px 0px rgba(23, 26, 31, 0.07)',\r\n position: 'relative',\r\n top: '-8px',\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n alignItems: 'center',\r\n padding: '12px 12px',\r\n ...shorthands.gap('12px'),\r\n overflowX: 'hidden',\r\n '& button': {\r\n fontWeight: tokens.fontWeightRegular,\r\n height: '32.1px',\r\n ...shorthands.borderRadius('8px', '8px', '8px', '8px'),\r\n '&:hover': {\r\n backgroundColor: tokens.colorNeutralBackground1Hover,\r\n borderColor: tokens.colorStrokeFocus2,\r\n borderWidth: '1px',\r\n borderStyle: 'solid',\r\n },\r\n minWidth: 'unset',\r\n whiteSpace: 'nowrap',\r\n },\r\n },\r\n});\r\n","\r\nimport React, { useState, useRef, useEffect } from 'react';\r\nimport {\r\n mergeClasses,\r\n Button,\r\n Textarea,\r\n} from '@fluentui/react-components';\r\nimport { ToggleButtons } from '@bingads-webui-campaign-react/ads-studio-shared-components';\r\nimport {\r\n ArrowClockwise16Regular,\r\n} from '@fluentui/react-icons';\r\nimport { getOptions } from './options';\r\nimport { usePromptEditorBaseStyles, usePromptEditorStyles } from './style';\r\n\r\nconst displayCount = 5;\r\n\r\nconst sliceOptions = (options, index, usedOptions) => {\r\n const filteredOptions = options.filter(option => !usedOptions.find(usedOption => usedOption.key === option.key));\r\n const roundedIndex = index % filteredOptions.length;\r\n\r\n let slicedOptions = filteredOptions.slice(roundedIndex, roundedIndex + displayCount);\r\n\r\n\r\n if (slicedOptions.length < displayCount) {\r\n slicedOptions = [...slicedOptions, ...filteredOptions.slice(0, (Math.min(displayCount, filteredOptions.length) - slicedOptions.length))];\r\n }\r\n\r\n return slicedOptions;\r\n};\r\n\r\nexport const PromptEditor = (props) => {\r\n const {\r\n i18n,\r\n prompt,\r\n setPrompt,\r\n logger,\r\n textAreaRef: textArea,\r\n } = props;\r\n\r\n const [usedOptions, setUsedOptions] = useState([]);\r\n const options = getOptions(i18n, usedOptions);\r\n const promptEditorBaseStyles = usePromptEditorBaseStyles();\r\n const promptEditorStyles = usePromptEditorStyles();\r\n const [optionsState, setOptionsState] = useState({});\r\n const selectedOption = options.find(option => optionsState[option.key]);\r\n const [textToComplete, setTextToComplete] = useState('');\r\n const [optionsIndex, setOptionsIndex] = useState(0);\r\n\r\n const nextOption = () => {\r\n setOptionsIndex((optionsIndex + displayCount));\r\n };\r\n\r\n const slicedOptions = selectedOption && selectedOption.words.length > 0\r\n ? sliceOptions(selectedOption.words, optionsIndex, usedOptions)\r\n : [];\r\n\r\n const shadowTextArea = useRef();\r\n const wordsRef = useRef();\r\n\r\n useEffect(() => {\r\n // sync the scroll position of the shadow textarea with the main textarea\r\n if (textArea && textArea.current && shadowTextArea.current) {\r\n if (textToComplete === '') {\r\n shadowTextArea.current.style.visibility = 'hidden';\r\n shadowTextArea.current.style.overflowY = '';\r\n textArea.current.style.overflowY = '';\r\n } else if (textArea && textArea.current && textArea.current.scrollHeight > textArea.current.clientHeight) {\r\n // scrollbar of the textarea is visible\r\n shadowTextArea.current.style.overflowY = 'scroll';\r\n shadowTextArea.current.style.visibility = '';\r\n shadowTextArea.current.scrollTop = textArea.current.scrollTop;\r\n } else if (shadowTextArea.current.scrollHeight > shadowTextArea.current.clientHeight) {\r\n // scrollbar of the shadow textarea is visible\r\n shadowTextArea.current.style.visibility = '';\r\n textArea.current.style.overflowY = 'scroll';\r\n textArea.current.scrollTop = shadowTextArea.current.scrollTop;\r\n } else {\r\n shadowTextArea.current.style.overflowY = '';\r\n shadowTextArea.current.style.visibility = '';\r\n textArea.current.style.overflowY = '';\r\n }\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [textArea, shadowTextArea.current, textToComplete]);\r\n\r\n return (\r\n \r\n
\r\n {i18n.getString(_TL_('Brand detected: Image contains \"{{brandName}}\"'), { brandName })}
\r\n {i18n.getString(_TL_('Note: Your request for the image may contain content that is subject to the intellectual property rights of third parties.'))}
\r\n \r\n
\r\n \r\n 0 && prompt && prompt.length > 0 ?\r\n `${prompt}${prompt[prompt.length - 1] === ' ' ? '' : ' '}${textToComplete}` : ''}\r\n />\r\n 0 ?\r\n mergeClasses('main-textarea', 'prompt', promptEditorStyles.textarea) :\r\n mergeClasses('main-textarea', 'prompt', promptEditorStyles.textareaPlaceHolder)}\r\n placeholder={i18n.getString(_TL_('What image do you want to create? Describe the subject, key elements, place, style, lighting, and/or mood.'))}\r\n value={prompt}\r\n onChange={(e, data) => setPrompt(data.value)}\r\n />\r\n
);\r\n};\r\n","import React from 'react';\r\nimport {\r\n PuzzlePiece20Regular,\r\n Color20Regular,\r\n ShapeSubtract20Regular,\r\n Lightbulb20Regular,\r\n Emoji20Regular,\r\n} from '@fluentui/react-icons';\r\n\r\nexport const getOptions = (i18n, usedOptions) => ([\r\n {\r\n key: 'keyElements',\r\n text: i18n.getString(_TL_('Key elements')),\r\n icon: \r\n {selectedOption\r\n &&\r\n selectedOption.words.length > 0\r\n &&\r\n <>\r\n {slicedOptions.map(word => (\r\n {\r\n if (logger && logger.logTrace) {\r\n logger.logTrace('AIgeneratedImage: prompt button clicked', { word: word.word });\r\n }\r\n setPrompt(`${prompt}${((prompt === '') || (prompt && prompt.length > 0 && prompt[prompt.length - 1] === ' ')) ? '' : ' '}${word.word}`);\r\n setUsedOptions([...usedOptions, word]);\r\n setTextToComplete('');\r\n\r\n if (textArea && textArea.current) {\r\n textArea.current.focus();\r\n }\r\n }}\r\n onMouseOver={() => {\r\n if (textToComplete !== word.word) {\r\n setTextToComplete(word.word);\r\n }\r\n }}\r\n onMouseOut={() => setTextToComplete('')}\r\n >\r\n {word.word}\r\n \r\n ))}\r\n } onClick={nextOption} className=\"refresh\" aria-label={i18n.getString(_TL_('Refresh'))} />\r\n \r\n }\r\n
\r\n \r\n {\r\n if (logger && logger.logTrace) {\r\n logger.logTrace('AIgeneratedImage: toggle button clicked', { key });\r\n }\r\n setOptionsIndex(0);\r\n setOptionsState({\r\n ...(options.map(option => ({ [option.key]: false }))),\r\n [key]: !optionsState[key],\r\n });\r\n\r\n if (!optionsState[key]) {\r\n if (wordsRef && wordsRef.current) {\r\n setTimeout(() => {\r\n const suggestedWords = wordsRef.current.querySelectorAll('.suggested-word');\r\n if (suggestedWords && suggestedWords.length > 0) {\r\n suggestedWords[0].focus();\r\n }\r\n });\r\n }\r\n }\r\n }}\r\n />\r\n
\r\n \r\n
\r\n );\r\n } else if (isSaving) {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n return (\r\n \r\n
\r\n );\r\n }, []);\r\n\r\n const AddButton = useCallback(({\r\n addImage,\r\n onKeyDown,\r\n isSaved,\r\n isSaving,\r\n }) => {\r\n let tooltipContent = '';\r\n if (isSaved) {\r\n tooltipContent = i18n.getString(_TL_('Asset saved'));\r\n } else if (isSaving) {\r\n tooltipContent = i18n.getString(_TL_('Saving'));\r\n } else {\r\n tooltipContent = i18n.getString(_TL_('Save to my library'));\r\n }\r\n\r\n return (\r\n \r\n \r\n
\r\n );\r\n }, [Icon, i18n]);\r\n\r\n const onRenderAIGCCell = useCallback(({ item }) => {\r\n if (isLoading) {\r\n return \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n }, [AddButton, addAIGCImage, i18n, isLoading, logger, onRenderImageSpinner, savedAIGCImages, savingAIGCImages]);\r\n\r\n const onRenderStockCell = useCallback(({ item }) => {\r\n const {\r\n Preview: { Url },\r\n Id,\r\n } = item;\r\n\r\n const isSaved = savedStockImages.includes(Id);\r\n const isSaving = savingStockImages.includes(Id);\r\n\r\n /* istanbul ignore next */\r\n const addImage = (event) => {\r\n if (isSaved || isSaving) { return; }\r\n if (logger && logger.logTrace) {\r\n logger.logTrace('Start to add stock image');\r\n }\r\n addStockImage(Id);\r\n event.stopPropagation();\r\n };\r\n\r\n /* istanbul ignore next */\r\n const onKeyDown = (event) => {\r\n event.preventDefault();\r\n if (event.key === 'Enter') {\r\n addImage();\r\n }\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n );\r\n }, [savedStockImages, savingStockImages, i18n, AddButton, logger, addStockImage]);\r\n\r\n const aigcImagesWithAction = useMemo(() => aigcImages.map((image) => {\r\n const {\r\n thumbnailSrc: src,\r\n modelSource,\r\n } = image;\r\n\r\n const isSaved = savedAIGCImages.includes(src);\r\n const isSaving = savingAIGCImages.includes(src);\r\n\r\n return ({\r\n ...image,\r\n onAction: () => {\r\n /* istanbul ignore if */\r\n if (isSaved || isSaving) { return; }\r\n /* istanbul ignore next */\r\n addAIGCImage(src, modelSource);\r\n },\r\n });\r\n }), [aigcImages, savedAIGCImages, savingAIGCImages, addAIGCImage]);\r\n\r\n const stockImagesWithAction = useMemo(() => stockImages.map((image) => {\r\n const {\r\n Id,\r\n } = image;\r\n\r\n const isSaved = savedStockImages.includes(Id);\r\n const isSaving = savingStockImages.includes(Id);\r\n\r\n return ({\r\n ...image,\r\n onAction: () => {\r\n /* istanbul ignore if */\r\n if (isSaved || isSaving) { return; }\r\n /* istanbul ignore next */\r\n addStockImage(Id);\r\n },\r\n });\r\n }), [stockImages, savedStockImages, savingStockImages, addStockImage]);\r\n\r\n const aigcImagesGridSection = useMemo(() => ({\r\n sectionName: 'AIGCImages',\r\n sectionClassName: 'aigc-image-section',\r\n itemKey: 'id',\r\n items: isLoading ? Array.from({ length: MAXAIGCCount }, (v, k) => ({ k })) : aigcImagesWithAction,\r\n totalItemCount: isLoading ? MAXAIGCCount : aigcImagesWithAction.length,\r\n config: {\r\n width: 285,\r\n height: 285,\r\n gridMode: true,\r\n maxColumns: 2,\r\n columnPadding: 16,\r\n rowPadding: 16,\r\n scrollContainer: scrollContainer !== undefined ? scrollContainer : '[role=\"main\"]',\r\n },\r\n }), [aigcImagesWithAction, isLoading, scrollContainer]);\r\n\r\n const stockImagesGridSection = useMemo(() => ({\r\n sectionName: 'StockImages',\r\n sectionClassName: 'stock-image-section',\r\n itemKey: 'id',\r\n items: stockImagesWithAction,\r\n totalItemCount: totalStockImagesCount,\r\n config: {\r\n width: 285,\r\n maxColumns: 2,\r\n columnPadding: 16,\r\n rowPadding: 16,\r\n scrollContainer: scrollContainer !== undefined ? scrollContainer : '[role=\"main\"]',\r\n },\r\n }), [scrollContainer, stockImagesWithAction, totalStockImagesCount]);\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nGeneratedImages.propTypes = {\r\n stockImages: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\r\n aigcImages: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n isLoading: PropTypes.bool.isRequired,\r\n};\r\n\r\nexport {\r\n GeneratedImages,\r\n};\r\n","import {\r\n makeResetStyles,\r\n shorthands,\r\n} from '@fluentui/react-components';\r\n\r\nexport const useExampleImageStyles = makeResetStyles({\r\n position: 'relative',\r\n width: '100%',\r\n height: '100%',\r\n '& .example-image': {\r\n position: 'absolute',\r\n top: '50%',\r\n left: '50%',\r\n transform: 'translate(-50%, -50%)',\r\n '& .cell-image-frame': {\r\n ...shorthands.borderRadius('6px'),\r\n overflow: 'hidden',\r\n },\r\n },\r\n});\r\n","import React from 'react';\r\nimport {\r\n mergeClasses\r\n} from '@fluentui/react-components';\r\nimport {\r\n TilesGridCellImage,\r\n} from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\n\r\nimport { useExampleImageStyles } from './style';\r\n\r\nexport const ExampleImage = (props) => {\r\n const {\r\n i18n,\r\n generateImageExample,\r\n classes,\r\n } = props;\r\n const baseClasses = useExampleImageStyles();\r\n\r\n return (\r\n \r\n
\r\n {!isLoading && stockImages && stockImages.length > 0 &&\r\n (\r\n \r\n
\r\n {\r\n isLoading && (\r\n \r\n
\r\n )\r\n }\r\n \r\n {isLoading ? null : {i18n.getString(_TL_('Created with Microsoft Advertising'))} }\r\n
\r\n \r\n
\r\n )\r\n }\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n","import {\r\n makeResetStyles, shorthands,\r\n} from '@fluentui/react-components';\r\n\r\nexport const useExplorePromptsStyles = makeResetStyles({\r\n '& .title': {\r\n marginBottom: '24px',\r\n '& span': {\r\n color: '#605E5C',\r\n fontSize: '16px',\r\n fontWeight: '600',\r\n lineHeight: '24px',\r\n letterSpacing: '-0.16px',\r\n },\r\n },\r\n '& .tiles-grid-cell': {\r\n '&:hover, &:focus-within': {\r\n '& .image-with-prompt .prompt-overlay': {\r\n animationName: [{\r\n '0%': { opacity: '0' },\r\n '100%': { opacity: '1' },\r\n }],\r\n animationDuration: '0.5s',\r\n animationTimingFunction: 'ease-in-out',\r\n '& .example-prompt-template': { // Need height for ellipsis calculation to work\r\n animationName: [{\r\n '0%': { transform: 'translateY(10px)' },\r\n '100%': { transform: 'translateY(0px)' },\r\n }],\r\n animationDuration: '0.5s',\r\n animationTimingFunction: 'ease-in-out',\r\n },\r\n visibility: 'visible',\r\n width: '100%',\r\n height: '100%',\r\n top: 0,\r\n left: 0,\r\n position: 'absolute',\r\n padding: '14px',\r\n fontSize: '16px',\r\n fontWeight: '600',\r\n color: '#FFF',\r\n backgroundImage: 'var(--gradient, linear-gradient(180deg, #F8ADFA -4.49%, rgba(168, 110, 221, 0.00) 13.18%), radial-gradient(166.31% 133.62% at 82.99% -9.79%, #8C48FF 6.62%, #F2598A 50%, #FFB152 89.58%))',\r\n },\r\n },\r\n '& .image-with-prompt': {\r\n width: '100%',\r\n height: '100%',\r\n position: 'relative',\r\n ...shorthands.borderRadius('8px', '8px', '8px', '8px'),\r\n ...shorthands.overflow('hidden', 'hidden'),\r\n '& img': {\r\n width: '100%',\r\n height: '100%',\r\n objectFit: 'cover',\r\n },\r\n '& .prompt-overlay': {\r\n visibility: 'hidden',\r\n width: '100%',\r\n height: '100%',\r\n top: 0,\r\n left: 0,\r\n right: 0,\r\n bottom: 0,\r\n position: 'absolute',\r\n padding: '14px',\r\n fontSize: '16px',\r\n fontWeight: '600',\r\n '& .example-prompt-template': { // Need height for ellipsis calculation to work\r\n width: '100%',\r\n height: '100%',\r\n top: 0,\r\n left: 0,\r\n right: 0,\r\n bottom: 0,\r\n },\r\n },\r\n },\r\n },\r\n});\r\n","import React, { memo, useMemo } from 'react';\r\nimport {\r\n mergeClasses,\r\n} from '@fluentui/react-components';\r\nimport {\r\n SectionTilesGrid,\r\n AIPromptExamples as prompts\r\n} from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\nimport { useExplorePromptsStyles } from './style';\r\n\r\nexport const ExplorePrompts = memo((props) => {\r\n const {\r\n i18n,\r\n setPrompt,\r\n MultiLineEllipsisText,\r\n scrollContainer,\r\n logger,\r\n } = props;\r\n\r\n const explorePromptsStyles = useExplorePromptsStyles();\r\n const onRenderCell = ({ item }) => {\r\n const {\r\n promptText,\r\n imageSrc,\r\n } = item;\r\n\r\n const localizedPromptText = i18n.getString(promptText);\r\n\r\n const onClick = (event) => {\r\n if (logger && logger.logTrace) {\r\n logger.logTrace('AIgeneratedImage: example prompt images clicked', { promptText: localizedPromptText });\r\n }\r\n event.preventDefault();\r\n setPrompt(localizedPromptText);\r\n };\r\n\r\n // TODO: on key down not working\r\n const onKeyDown = (event) => {\r\n if (event.key === 'Enter') {\r\n event.preventDefault();\r\n setPrompt(localizedPromptText);\r\n }\r\n };\r\n\r\n return (\r\n \r\n {generateImageExample && generateImageExample.imageUrl &&
\r\n \r\n
\r\n \r\n );\r\n };\r\n\r\n const promptsWithAction = prompts.map(prompt => ({\r\n ...prompt,\r\n tabIndex: -1,\r\n onAction: (event) => {\r\n if (event) {\r\n event.preventDefault();\r\n }\r\n setPrompt(i18n.getString(prompt.promptText));\r\n },\r\n }));\r\n\r\n const promptsGridSection = useMemo(() => ({\r\n sectionName: 'Prompts',\r\n sectionClassName: 'prompts-with-image-section',\r\n itemKey: 'id',\r\n items: promptsWithAction,\r\n totalItemCount: promptsWithAction.length,\r\n config: {\r\n width: 216,\r\n height: 184,\r\n gridMode: true,\r\n columnPadding: 12,\r\n rowPadding: 12,\r\n scrollContainer: scrollContainer !== undefined ? scrollContainer : '[role=\"main\"]',\r\n },\r\n }), [promptsWithAction, scrollContainer]);\r\n\r\n const sectionGridData = useMemo(\r\n () => ([promptsGridSection]),\r\n [promptsGridSection]\r\n );\r\n\r\n return (\r\n \r\n
\r\n );\r\n});\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Link, makeResetStyles, makeStyles, mergeClasses, shorthands, tokens, } from '@fluentui/react-components';\r\nimport { MessageBar, MessageBarBody } from '@fluentui/react-message-bar';\r\n\r\n\r\nconst useAIGCDisclaimerStyles = makeStyles({\r\n marginLeft4: {\r\n marginLeft: '4px',\r\n ...shorthands.textDecoration('underline'),\r\n },\r\n});\r\n\r\nconst useAIGCDisclaimerDefaultStyles = makeResetStyles({\r\n '&:focus': {\r\n borderStyle: 'solid',\r\n borderWidth: '1px',\r\n borderColor: tokens.colorStrokeFocus2,\r\n },\r\n});\r\n\r\nexport const AIGCDisclaimer = (props) => {\r\n const {\r\n i18n,\r\n } = props;\r\n\r\n const classes = useAIGCDisclaimerStyles();\r\n const defaultClasses = useAIGCDisclaimerDefaultStyles();\r\n\r\n return (\r\n \r\n \r\n {i18n.getString(_TL_('Explore prompts'))}\r\n \r\n
\r\n \r\n \r\n \r\n {i18n.getString(_TL_('Please ensure you review any newly created images carefully. It\\'s your responsibility to ensure that the images do not infringe upon any third-party rights, including copyright or other intellectual property rights.'))}\r\n \r\n {i18n.getString(_TL_('Learn more'))}\r\n \r\n \r\n \r\n
);\r\n};\r\n\r\n\r\nAIGCDisclaimer.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n};\r\n\r\nAIGCDisclaimer.defaultProps = {\r\n};\r\n","import React from 'react';\r\nimport {\r\n mergeClasses, Text,\r\n} from '@fluentui/react-components';\r\n\r\nexport const RemainingText = ({\r\n i18n, className,\r\n}) => {\r\n const remainingText = i18n.getString(_TL_('Please note you have a limited number of image requests that we can generate quickly each day. After that, image generations may take longer than expected.'));\r\n return (\r\n <>\r\n \r\n {remainingText} \r\n
\r\n \r\n );\r\n};\r\n","import React from 'react';\r\nimport { MessageBar, MessageBarBody } from '@fluentui/react-message-bar';\r\n\r\n\r\nexport const ErrorMessage = (props) => {\r\n const {\r\n error,\r\n } = props;\r\n\r\n if (error == null) return null;\r\n\r\n return (error && error.length > 0 &&\r\n \r\n \r\n \r\n {error}\r\n \r\n \r\n
);\r\n};\r\n\r\n","import {\r\n makeResetStyles, shorthands,\r\n} from '@fluentui/react-components';\r\n\r\nexport const useGenerateImagePageStyles = makeResetStyles({\r\n display: 'flex',\r\n width: '100%',\r\n height: '100%',\r\n '& .prompt-panel': {\r\n width: 'calc((100% - 69px)/2)',\r\n paddingTop: '56px',\r\n paddingLeft: '44px',\r\n paddingRight: '44px',\r\n position: 'fixed',\r\n overflowY: 'auto',\r\n '& .title': {\r\n display: 'flex',\r\n alignItems: 'center',\r\n '& span': {\r\n color: '#171A1F',\r\n },\r\n },\r\n '& .remainingText': {\r\n marginTop: '4px',\r\n color: '#605e5c',\r\n marginBottom: '24px',\r\n },\r\n '& .prompt-section': {\r\n position: 'relative',\r\n },\r\n '& .message-bar': {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n ...shorthands.gap('8px'),\r\n marginTop: '24px',\r\n width: '100%',\r\n },\r\n '& .action-bar': {\r\n display: 'flex',\r\n marginTop: '25px',\r\n alignItems: 'center',\r\n justifyContent: 'flex-end',\r\n gap: '12px',\r\n '& button': {\r\n minWidth: 'unset',\r\n whiteSpace: 'nowrap',\r\n },\r\n '& .generate-button': {\r\n '& span': {\r\n color: '#FFFFFF',\r\n },\r\n '& .sparkle-icon': {\r\n fontSize: '24px',\r\n height: '24px',\r\n width: '24px',\r\n },\r\n backgroundImage: 'linear-gradient(91deg, #185ABD 0%, #8763C2 100%)',\r\n },\r\n },\r\n },\r\n '& .image-panel': {\r\n marginLeft: 'calc((100vw - (100vw - 100%)) / 2 + (100vw - 69px - 100%) / 2)',\r\n width: '50%',\r\n paddingTop: '48px',\r\n paddingBottom: '48px',\r\n backgroundColor: '#FAFAFA',\r\n paddingLeft: '36px',\r\n paddingRight: '36px',\r\n '& .loading-view': {\r\n width: '100%',\r\n height: '100%',\r\n },\r\n },\r\n});\r\n","import React, { useMemo, useCallback, useState, useLayoutEffect, useEffect, useRef } from 'react';\r\nimport queryString from 'query-string';\r\nimport {\r\n makeStyles,\r\n mergeClasses,\r\n Subtitle1, Subtitle2, Button,\r\n} from '@fluentui/react-components';\r\nimport {\r\n ArrowReset24Regular,\r\n} from '@fluentui/react-icons';\r\nimport {\r\n HollowSparkleSVGIcon,\r\n HiddenDivForAnnounce,\r\n} from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\nimport { setClarityTag } from '@bingads-webui-universal/clarity';\r\nimport { usePageActiveTimeTracker } from '@bingads-webui-campaign-react/common-hooks';\r\nimport { Mode } from '@bingads-webui-react/app-layout-container';\r\n\r\nimport { useGenerateImagePageState, statuses } from './state';\r\nimport { BrandDetectionConfirmation } from './brand-detection-confirmation';\r\nimport { PromptEditor } from './prompt-editor';\r\nimport { GeneratedImages } from './generated-images';\r\nimport { ExampleImage } from './example-image';\r\nimport { ExplorePrompts } from './explore-prompts';\r\nimport { AIGCDisclaimer } from './disclaimer';\r\nimport { RemainingText } from './remaing-text';\r\nimport { ErrorMessage } from './error';\r\nimport { useGenerateImagePageStyles } from './style';\r\n\r\nconst ActionBar = (props) => {\r\n const {\r\n i18n,\r\n startOver,\r\n generateImage,\r\n isLoading,\r\n isValid,\r\n } = props;\r\n\r\n const onStartOverKeyDown = (evt) => {\r\n if (evt.code === 'Enter' || evt.code === 'Space') {\r\n startOver(evt);\r\n evt.stopPropagation();\r\n evt.preventDefault();\r\n }\r\n };\r\n\r\n const onGenerateImageKeyDown = (evt) => {\r\n if (evt.code === 'Enter' || evt.code === 'Space') {\r\n generateImage(evt);\r\n evt.stopPropagation();\r\n evt.preventDefault();\r\n }\r\n };\r\n\r\n return (\r\n \r\n \r\n {i18n.getString(_TL_('Start over'))}\r\n \r\n \r\n \r\n {i18n.getString(_TL_('Generate'))}\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nconst useTopDivMetaData = (topDiv) => {\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]);\r\n\r\n return [offset];\r\n};\r\n\r\nconst PromptPanel = (props) => {\r\n const {\r\n i18n,\r\n setPrompt,\r\n prompt,\r\n startOver,\r\n generateImage,\r\n detectedBrandName,\r\n renderHelpButton,\r\n onGenerateImage,\r\n logger,\r\n isLoading,\r\n promptError,\r\n serverError,\r\n isValid,\r\n textAreaRef,\r\n } = props;\r\n\r\n const [topDiv, setTopDiv] = useState(null);\r\n const [offset] = useTopDivMetaData(topDiv);\r\n\r\n return (\r\n setTopDiv(ref)} style={{ height: `calc(100% - 33px - ${offset}px)` }}>\r\n onGenerateImage(true)}\r\n logger={logger}\r\n renderHelpButton={renderHelpButton}\r\n />\r\n )}\r\n
\r\n );\r\n};\r\n\r\nconst useStyles = makeStyles({\r\n hidden: {\r\n display: 'none',\r\n },\r\n});\r\n\r\nconst ImagePanel = (props) => {\r\n const {\r\n i18n,\r\n generateImageExample,\r\n setPrompt,\r\n MultiLineEllipsisText,\r\n isLoading,\r\n stockImages,\r\n aigcImages,\r\n loadMoreStockImages,\r\n totalStockImagesCount,\r\n addAIGCImage,\r\n addStockImage,\r\n cancel,\r\n savedAIGCImages,\r\n savedStockImages,\r\n savingAIGCImages,\r\n savingStockImages,\r\n scrollContainer,\r\n logger,\r\n stopGeneratingBtnRef,\r\n } = props;\r\n\r\n const classes = useStyles();\r\n const hasAIGCImages = (aigcImages && aigcImages.length > 0);\r\n const hasAIGCImageExample = (generateImageExample && generateImageExample.imageUrl);\r\n\r\n return (\r\n \r\n {i18n.getString(_TL_('Generate image'))} \r\n
\r\n \r\n
\r\n )}\r\n {detectedBrandName && (\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport const GenerateImagePageComponent = (props) => {\r\n const {\r\n i18n,\r\n dataService,\r\n logger,\r\n renderHelpButton,\r\n MultiLineEllipsisText,\r\n notificationApi,\r\n aid,\r\n search,\r\n scrollContainer,\r\n pagePerfMarker: generateImagePerfMarker,\r\n changeLayout,\r\n setDataLoaded,\r\n } = props;\r\n const textAreaRef = useRef(null);\r\n const stopGeneratingBtnRef = useRef(null);\r\n const [announcedText, setAnnouncedText] = useState('');\r\n const queries = queryString.parse(search);\r\n const {\r\n folderId = '',\r\n } = queries || {};\r\n\r\n const {\r\n prompt,\r\n setPrompt,\r\n detectedBrandName,\r\n getImages,\r\n setDetectedBrandName,\r\n state,\r\n loadStockImages,\r\n loadMoreStockImages,\r\n totalStockImagesCount,\r\n cancel,\r\n aigcImages,\r\n stockImages,\r\n addAIGCImage,\r\n addStockImage,\r\n isValid,\r\n promptError,\r\n serverError,\r\n savedAIGCImages,\r\n savedStockImages,\r\n savingAIGCImages,\r\n savingStockImages,\r\n onStartOver,\r\n generateImageExample,\r\n } = useGenerateImagePageState({\r\n logger,\r\n i18n,\r\n dataService,\r\n aid,\r\n notificationApi,\r\n folderId,\r\n perfMarker: generateImagePerfMarker,\r\n });\r\n\r\n const onGenerateImage = useCallback((skipBrandDetection) => {\r\n loadStockImages();\r\n getImages(skipBrandDetection);\r\n setDetectedBrandName(null);\r\n if (skipBrandDetection) {\r\n logger.logTrace(`AIGenerateImagesView: skipped detected brand name: ${detectedBrandName}`);\r\n }\r\n }, [detectedBrandName, getImages, loadStockImages, logger, setDetectedBrandName]);\r\n\r\n const classes = useGenerateImagePageStyles();\r\n const startOver = (event) => {\r\n onStartOver();\r\n\r\n if ((event.code === 'Enter' || event.code === 'Space') && !(generateImageExample && generateImageExample.prompt)) {\r\n // if no initial prompt, click start over button will clean the prompt text, then the start over button will be disabled, focus on the text area.\r\n if (textAreaRef && textAreaRef.current) {\r\n textAreaRef.current.focus();\r\n }\r\n }\r\n };\r\n\r\n const isLoading = useMemo(() => (state.status === statuses.cancelling\r\n || state.status === statuses.loading), [state]);\r\n\r\n const generateImage = (event) => {\r\n onGenerateImage();\r\n setAnnouncedText(i18n.getString(_TL_('Start to generate images')));\r\n\r\n if (event.code === 'Enter' || event.code === 'Space') {\r\n setTimeout(() => {\r\n if (stopGeneratingBtnRef && stopGeneratingBtnRef.current) {\r\n stopGeneratingBtnRef.current.focus();\r\n }\r\n });\r\n }\r\n };\r\n\r\n usePageActiveTimeTracker(logger, 'Generate-image');\r\n\r\n useEffect(() => {\r\n if (setDataLoaded && generateImagePerfMarker) {\r\n generateImagePerfMarker.willRender();\r\n setDataLoaded();\r\n }\r\n }, [generateImagePerfMarker, setDataLoaded]);\r\n\r\n useEffect(() => {\r\n setClarityTag({ LoadAdsStudioImageGenerationPage: true });\r\n }, []);\r\n\r\n useLayoutEffect(() => {\r\n if (changeLayout) {\r\n changeLayout(\r\n {\r\n nav: {\r\n mode: Mode.Hidden,\r\n },\r\n },\r\n true, // isPageConfig\r\n true // isPageConfigPartialUpdate\r\n );\r\n }\r\n }, [changeLayout]);\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
);\r\n};\r\n","import PropTypes from 'prop-types';\r\nimport React, { useCallback, useEffect, useRef } from 'react';\r\nimport classNames from 'classnames';\r\nimport { get, find } from 'underscore';\r\nimport { Button, makeStyles, shorthands, Spinner, mergeClasses } from '@fluentui/react-components';\r\nimport { Overlay } from '@bingads-webui-react/fabric-control';\r\nimport { AdsStudioPanelContainer, ClarityTags, useClarityTags, getImageAssetLimitPerAccount } from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\n\r\nconst useButtonStyles = makeStyles({\r\n bottonWrapper: {\r\n ...shorthands.padding('16px', '24px', '24px'),\r\n },\r\n button: {\r\n minWidth: 'auto',\r\n ...shorthands.padding('6px', '12px'),\r\n marginRight: '6px',\r\n },\r\n});\r\n\r\nconst useStyles = makeStyles({\r\n helpLink: {\r\n color: '#337ab7',\r\n ...shorthands.textDecoration('underline'),\r\n fontWeight: 'normal',\r\n backgroundColor: 'transparent',\r\n ...shorthands.borderRadius('0px', '0px', '0px', '0px'),\r\n ...shorthands.border('none'),\r\n },\r\n overlay: {\r\n zIndex: 2,\r\n },\r\n spinner: {\r\n marginTop: '250px',\r\n },\r\n});\r\n\r\nexport const AdsStudioAddAssetPanel = (props) => {\r\n const {\r\n aid, i18n, isOpen, dismiss, logger, headerText, isReadonly, notificationApi, selectedAsset, onClickSelect, showBlocker, children, isMultiSelection,\r\n } = props;\r\n const classes = useStyles();\r\n const buttonClasses = useButtonStyles();\r\n const panelRef = useRef(null);\r\n\r\n useClarityTags([\r\n ClarityTags.LaunchedAdsStudio,\r\n ClarityTags.LaunchedAddImageAssetsFromAdsStudio,\r\n ]);\r\n\r\n const handleJobErrors = useCallback((jobErrors) => {\r\n if (jobErrors.length > 0) {\r\n const assetLimitError = find(jobErrors, (err) => {\r\n const errorCode = get(err, ['body', 'value', 0, 'Code'], '');\r\n return errorCode === 'ImagesLimitExceededPerAccount';\r\n });\r\n\r\n if (assetLimitError) {\r\n const assetLimit = getImageAssetLimitPerAccount(aid, logger);\r\n notificationApi.showWarning(i18n.getString(_TL_('One or more images failed to upload because your account has exceeded the {{value}}-image asset limit. Please remove assets and try again.'), { value: assetLimit }));\r\n } else {\r\n const genericError = (\r\n \r\n { i18n.getString(_TL_('One or more assets failed to upload. Please try again')) }\r\n \r\n \r\n );\r\n notificationApi.showWarning(genericError);\r\n }\r\n }\r\n }, [aid, logger, notificationApi, i18n, classes.helpLink]);\r\n\r\n const onSelectAddImages = useCallback(() => {\r\n onClickSelect(handleJobErrors);\r\n }, [handleJobErrors, onClickSelect]); // todo: implement\r\n\r\n const onRenderFooterContent = useCallback(() => (\r\n \r\n {isMultiSelection &&\r\n \r\n {i18n.getString(_TL_('Add'))}\r\n \r\n }\r\n \r\n
\r\n ), [buttonClasses.bottonWrapper, buttonClasses.button, onSelectAddImages, isReadonly, selectedAsset, i18n, dismiss, isMultiSelection]);\r\n\r\n useEffect(() => {\r\n if (isOpen) {\r\n const firstNode = document.querySelector('.panel-close-button');\r\n const lastNode = document.querySelector('.cancel-panel-button');\r\n const handleTabKey = (event) => {\r\n if (event.key === 'Tab' && !event.shiftKey) {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n firstNode.focus();\r\n }\r\n };\r\n const handleShiftTabKey = (event) => {\r\n if (event.key === 'Tab' && event.shiftKey) {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n lastNode.focus();\r\n }\r\n };\r\n\r\n if (lastNode && firstNode && lastNode !== firstNode) {\r\n lastNode.addEventListener('keydown', handleTabKey);\r\n firstNode.addEventListener('keydown', handleShiftTabKey);\r\n }\r\n\r\n return () => {\r\n if (lastNode && firstNode) {\r\n lastNode.removeEventListener('keydown', handleTabKey);\r\n firstNode.removeEventListener('keydown', handleShiftTabKey);\r\n }\r\n };\r\n }\r\n return () => {};\r\n }, [isOpen]);\r\n\r\n useEffect(() => {\r\n if (panelRef.current) {\r\n const handleESCKey = (event) => {\r\n if (event.key === 'Escape') {\r\n dismiss();\r\n }\r\n };\r\n\r\n const target = panelRef.current;\r\n\r\n if (isOpen) {\r\n target.addEventListener('keydown', handleESCKey);\r\n return () => {\r\n target.removeEventListener('keydown', handleESCKey);\r\n };\r\n }\r\n }\r\n return () => {};\r\n }, [dismiss, isOpen]);\r\n\r\n return (\r\n \r\n \r\n
\r\n ), [classes, i18n, dismiss]);\r\n\r\n const onFilesAddedCallback = useCallback(() => {\r\n setErrors([]);\r\n navigation.goBack({ reload: true });\r\n }, [navigation]);\r\n\r\n const {\r\n previewArr,\r\n onFileRead,\r\n } = useUploadFiles({\r\n dataService, logger, notificationApi, i18n, aid, onFilesAddedCallback, setErrors, filePickerI18n, perfMarker, isUploadImageUpscaleEnabled,\r\n });\r\n\r\n const isOpen = useMemo(() => (previewArr.length > 0 || errors.length > 0), [errors.length, previewArr.length]);\r\n const supportedFileExtensions = useMemo(() => {\r\n if (mode === 'image') {\r\n return supportedImageExtensions;\r\n } else if (mode === 'video') {\r\n return supportedVideoExtensions;\r\n }\r\n return [\r\n ...supportedImageExtensions,\r\n ...supportedVideoExtensions,\r\n ];\r\n }, [mode]);\r\n\r\n const clearInputFile = useCallback((event) => {\r\n if (event) {\r\n // eslint-disable-next-line no-param-reassign\r\n event.target.value = '';\r\n }\r\n }, []);\r\n\r\n const readFile = useCallback((event) => {\r\n const { files: fileObjects } = event.target;\r\n const selectedFiles = !_.isUndefined(fileObjects) && fileObjects.length > 0 && fileObjects;\r\n if (selectedFiles) {\r\n const selectedFilesCount = selectedFiles.length;\r\n let fileIndex;\r\n const errorArr = [];\r\n\r\n for (fileIndex = 0; fileIndex < selectedFilesCount; fileIndex += 1) {\r\n const fileObj = selectedFiles[fileIndex];\r\n const fileSizeMB = (fileObj.size / 1024 / 1024).toFixed(3);\r\n let reachLimit;\r\n\r\n if (isReachFileSizeLimit) {\r\n const { ext } = parseFileName(fileObj.name);\r\n reachLimit = isReachFileSizeLimit({ ext, fileSizeMB });\r\n }\r\n\r\n if (reachLimit) {\r\n errorArr.push(getReachFileSizeLimitErrorMessage({ i18n }));\r\n\r\n break;\r\n }\r\n }\r\n if (_.isEmpty(errorArr)) {\r\n if (logger && logger.logTrace) {\r\n logger.logTrace('File starts to upload', { mode });\r\n }\r\n return onFileRead(selectedFiles, () => clearInputFile(event));\r\n }\r\n clearInputFile(event);\r\n setErrors(errorArr);\r\n } // else no media picked, so do nothing\r\n\r\n return ''; // for testability\r\n }, [clearInputFile, i18n, logger, mode, onFileRead]);\r\n\r\n useEffect(() => {\r\n if (openSystemUpload) {\r\n uploadInput.current.click();\r\n }\r\n }, [openSystemUpload]);\r\n\r\n return (\r\n <>\r\n \r\n \r\n
\r\n ), [buttonClasses.bottonWrapper, buttonClasses.button, i18n, dismiss]);\r\n\r\n const onUploadError = useCallback((error) => {\r\n fileAdditionalInfoArrRef.current = [];\r\n isUploadRunning.current = false;\r\n setShowUploadPreview(false);\r\n if (error === NO_VALID_FILES_ERROR) {\r\n setErrors([i18n.getString(_TL_('Your folder doesn\\'t contain supported assets. Please try again.'))]);\r\n } else if (error === ASSET_LIMIT_EXCEEDED_ERROR) {\r\n setErrors([i18n.getString(_TL_('Your folder failed to upload because it exceeds the 100-asset limit. Please try again'))]);\r\n } else {\r\n // no other known errors should cause the whole operation to fail, so just show generic error\r\n setErrors([i18n.getString(_TL_('We\\'ve encountered an error and could not finish this task. Please try again or contact support.'))]);\r\n }\r\n logger.logError('Upload folder failed', { error });\r\n }, [i18n, logger]);\r\n\r\n const uploadAsset = useCallback(({\r\n dataURL,\r\n fileObject,\r\n nameWithoutExt,\r\n folderId,\r\n isVideo,\r\n isImageUpscaled,\r\n }) => uploadFileAsync({\r\n dataURL,\r\n fileObject,\r\n nameWithoutExt,\r\n folderId,\r\n isVideo,\r\n }).then((res) => {\r\n fileAdditionalInfoArrRef.current.push({\r\n isImageUpscaled,\r\n text: nameWithoutExt,\r\n });\r\n setUploadFolderInfo((prevState) => {\r\n if (prevState) {\r\n const rootFolder = prevState[0];\r\n completedAssetCount.current += 1;\r\n const updatedProgress = (completedAssetCount.current + 1) / assetCount.current;\r\n\r\n return [{\r\n ...rootFolder,\r\n progress: updatedProgress,\r\n }];\r\n }\r\n return prevState;\r\n });\r\n return res;\r\n }), [uploadFileAsync]);\r\n\r\n const onUploadStart = useCallback(({\r\n totalSize,\r\n rootFolderName,\r\n acceptedAssets,\r\n }) => {\r\n fileAdditionalInfoArrRef.current = [];\r\n setErrors([]);\r\n setShowUploadPreview(true);\r\n isUploadRunning.current = true;\r\n\r\n const previewImage = acceptedAssets[0];\r\n\r\n assetCount.current = acceptedAssets.length;\r\n\r\n readFileAsDataURLAsync(previewImage).then((imageData) => {\r\n setUploadFolderInfo([{\r\n name: rootFolderName,\r\n url: imageData,\r\n size: totalSize,\r\n progress: 0,\r\n numberOfAssets: assetCount.current,\r\n }]);\r\n });\r\n\r\n logger.logTrace(`Upload folder from local, assets number: ${assetCount.current}`);\r\n }, [logger]);\r\n\r\n const getErrorInfo = useCallback((folderCreationErrors, assetUploadErrors) => getFolderUploadError({\r\n folderCreationErrors,\r\n assetUploadErrors,\r\n i18n,\r\n filePickerI18n,\r\n aid,\r\n logger,\r\n }), [aid, i18n, logger, filePickerI18n]);\r\n\r\n const clearInputFile = useCallback((event) => {\r\n if (event) {\r\n // eslint-disable-next-line no-param-reassign\r\n event.target.value = '';\r\n }\r\n }, []);\r\n\r\n const onUploadPartialComplete = useCallback(({\r\n assetUploadErrors,\r\n folderCreationErrors,\r\n }) => {\r\n const warnMessage = getErrorInfo(folderCreationErrors, assetUploadErrors);\r\n logger.logTrace('Upload folder from local partial successfully');\r\n notificationApi.showWarning(warnMessage);\r\n dismissAndRefreshLibrary();\r\n reloadFolderPathTreeItem([currentFolderId]);\r\n }, [currentFolderId, dismissAndRefreshLibrary, getErrorInfo, logger, notificationApi, reloadFolderPathTreeItem]);\r\n\r\n const onUploadComplete = useCallback(() => {\r\n logger.logTrace('Upload folder from local successfully');\r\n\r\n const upscaledImagesArr = _.filter(fileAdditionalInfoArrRef.current, item => item && item.isImageUpscaled);\r\n const upscaledImagesArrCount = upscaledImagesArr.length;\r\n\r\n if (upscaledImagesArrCount > 0) {\r\n notificationApi.showInfo(i18n.getString(_TL_('Your folder was uploaded and we upscaled {{fileCount}} image(s) to meet the minimum required file size. You can always upload higher quality images if needed.'), { fileCount: upscaledImagesArrCount }));\r\n } else {\r\n notificationApi.showInfo((\r\n \r\n {i18n.getString(_TL_('Your folder was successfully uploaded.'))}\r\n \r\n \r\n ));\r\n }\r\n dismissAndRefreshLibrary();\r\n reloadFolderPathTreeItem([currentFolderId]);\r\n }, [logger, notificationApi, i18n, buttonClasses.linkButton, dismissAndRefreshLibrary, reloadFolderPathTreeItem, currentFolderId]);\r\n\r\n const FolderPreviewComponent = useMemo(() => createFolderPreviewComponent({ i18n }), [i18n]);\r\n const isOpen = useMemo(() => Boolean((showUploadPreview && uploadFolderInfo) || errors.length > 0), [errors.length, showUploadPreview, uploadFolderInfo]);\r\n const supportedFileExtensions = useMemo(() => {\r\n if (mode === 'image') {\r\n return supportedImageExtensions;\r\n } else if (mode === 'video') {\r\n return supportedVideoExtensions;\r\n }\r\n return [\r\n ...supportedImageExtensions,\r\n ...supportedVideoExtensions,\r\n ];\r\n }, [mode]);\r\n\r\n const { onFolderRead } = useUploadFolder({\r\n createFolderAsync: createFolderBulk,\r\n currentFolderId: isRootFolderId(currentFolderId) ? undefined : currentFolderId,\r\n uploadAssetAsync: uploadAsset,\r\n getCustomizedHandlerOptions,\r\n onUploadError,\r\n onUploadStart,\r\n onUploadPartialComplete,\r\n onUploadComplete,\r\n supportedExtensions: supportedFileExtensions,\r\n clearInputFile,\r\n isUploadImageUpscaleEnabled: false,\r\n logger,\r\n });\r\n\r\n useEffect(() => {\r\n if (openSystemUpload) {\r\n uploadInput.current.click();\r\n }\r\n }, [openSystemUpload]);\r\n\r\n return (\r\n <>\r\n \r\n {isPageLoading && (\r\n \r\n
\r\n );\r\n};\r\n\r\nSearchResultView.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n search: PropTypes.string.isRequired,\r\n navigation: PropTypes.shape({}).isRequired,\r\n logger: PropTypes.shape({\r\n logTrace: PropTypes.func,\r\n }).isRequired,\r\n dataService: PropTypes.shape({}),\r\n notificationApi: PropTypes.shape({}),\r\n reload: PropTypes.shape({}),\r\n};\r\n\r\nSearchResultView.defaultProps = {\r\n dataService: {},\r\n notificationApi: {},\r\n reload: null,\r\n};\r\n","\r\nimport { useState, useMemo, useCallback, useEffect } from 'react';\r\nimport _ from 'underscore';\r\n\r\nimport {\r\n CSMLAdType,\r\n CSMLAssetSource,\r\n getPreviewText,\r\n getSizeErrorRatioList,\r\n getAllSizeErrorRatioList,\r\n getPlacementsToExpand,\r\n} from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\nimport { ImageExperienceImage } from '@bingads-webui-campaign-react/image-experience-model';\r\nimport {\r\n useAdPreviewModel,\r\n UAPPlacementTypeAlias,\r\n getCropSettingsFromRoi,\r\n} from '@bingads-webui-campaign-react/unified-ad-preview-library-cmui';\r\nimport { usePageActiveTimeTracker } from '@bingads-webui-campaign-react/common-hooks';\r\n\r\nimport GenericImage from '../media/1.91to1.jpg';\r\n\r\nconst getPlacementSetConfig = (image, getSmartCroppings, isAudienceAdSmartCropEnabled, isMMAV2Enabled, isPMaxAspectRatiosV2Enabled, isAdPreviewRefreshEnabled, getExpandedCroppingsFunc = undefined) => ([\r\n {\r\n image,\r\n placementSets: [\r\n {\r\n placementSetName: CSMLAdType.PMax,\r\n // eslint-disable-next-line no-nested-ternary\r\n placementTypes: isPMaxAspectRatiosV2Enabled ? (isAdPreviewRefreshEnabled ? UAPPlacementTypeAlias.PMaxV2.AllV2 : UAPPlacementTypeAlias.PMaxV2.All) : UAPPlacementTypeAlias.PMax.All,\r\n getDefaultPlacementsCropping: getSmartCroppings,\r\n },\r\n {\r\n placementSetName: CSMLAdType.MMA,\r\n placementTypes: UAPPlacementTypeAlias.MMA.All,\r\n getDefaultPlacementsCropping: getSmartCroppings,\r\n },\r\n {\r\n placementSetName: CSMLAdType.Audience,\r\n placementTypes: isMMAV2Enabled ? UAPPlacementTypeAlias.MSANV2.All : UAPPlacementTypeAlias.MSAN.All,\r\n // eslint-disable-next-line no-nested-ternary\r\n getDefaultPlacementsCropping: getExpandedCroppingsFunc ? getExpandedCroppingsFunc(CSMLAdType.Audience) : (isAudienceAdSmartCropEnabled ? getSmartCroppings : undefined),\r\n },\r\n {\r\n placementSetName: CSMLAdType.ImageExtension,\r\n placementTypes: isAdPreviewRefreshEnabled ? UAPPlacementTypeAlias.ImageExt.AllV2 : UAPPlacementTypeAlias.ImageExt.All,\r\n getDefaultPlacementsCropping: isAudienceAdSmartCropEnabled ? getSmartCroppings : undefined,\r\n },\r\n ],\r\n }, {\r\n image: GenericImage,\r\n placementSets: [\r\n {\r\n placementSetName: CSMLAdType.ImageExtension,\r\n placementTypes: [\r\n UAPPlacementTypeAlias.ImageExt.BingDesktopMultiImage,\r\n UAPPlacementTypeAlias.ImageExt.BingMobileMultiImage,\r\n ],\r\n },\r\n ],\r\n }]);\r\n\r\nexport const useAdPlacement = ({\r\n image,\r\n permissions,\r\n setDataLoaded,\r\n logger,\r\n i18n,\r\n getSmartCroppings,\r\n setLoadingStatus,\r\n imageCroppingTasks,\r\n isImageFittingEnabled,\r\n dataService,\r\n}) => {\r\n const isAudienceAdSmartCropEnabled = permissions && permissions.dynamic.AudienceAdSmartCrop;\r\n const [adType, setAdType] = useState(CSMLAdType.PMax);\r\n const [errorTip, setErrorTip] = useState('');\r\n const [showRequiredOnly, setShowRequiredOnly] = useState(false);\r\n const [currentImage, setCurrentImage] = useState(null);\r\n\r\n const [editingPlacementInfo, setEditingPlacementInfo] = useState(null);\r\n\r\n // useClarityTags([ClarityTags.LaunchedAssetLibrary, ClarityTags.LaunchedEditImage]);\r\n\r\n // click on a placement's edit aspect ratio button\r\n const onEditPlacement = useCallback((placementInfo) => {\r\n setEditingPlacementInfo(placementInfo);\r\n logger.logTrace('Edit Page: onEditPlacement', { imageId: currentImage.id });\r\n }, [currentImage, logger]);\r\n\r\n const onAdPreviewError = useCallback((err) => {\r\n logger.logError(`Edit Page: ad preview error, ${JSON.stringify(err)}`);\r\n }, [logger]);\r\n\r\n const {\r\n firstImage,\r\n setPlacementConfig,\r\n multiImagePlacementSets: placementSets,\r\n updatePlacementCropping,\r\n updatePlacementCroppingByImageType,\r\n hasDataChanged: hasCropSettingsChanged,\r\n changedCropSettings,\r\n } = useAdPreviewModel(null, onAdPreviewError);\r\n const { imageMeta: imageInfo, imageCropping: cropSettings } = firstImage || {};\r\n\r\n const placementList = useMemo(() => {\r\n const { placementList: pl } = _.find(placementSets, ({ placementSetName }) => placementSetName === adType) || {};\r\n return pl;\r\n }, [adType, placementSets]);\r\n\r\n const previewTexts = useMemo(\r\n () => getPreviewText(adType === CSMLAdType.ImageExtension, i18n),\r\n [adType, i18n]\r\n );\r\n\r\n usePageActiveTimeTracker(logger, 'Edit image');\r\n\r\n useEffect(() => {\r\n if (image && image.url) {\r\n if (setDataLoaded) {\r\n setDataLoaded();\r\n }\r\n setLoadingStatus(true);\r\n setCurrentImage(prev => (prev && prev.url === image.url ? prev : image));\r\n logger.logTrace('Edit Page: page loaded', { imageId: image.id });\r\n }\r\n }, [image, logger, setLoadingStatus]);\r\n\r\n const isMMAV2Enabled = useMemo(() => permissions && permissions.IsMMAV2Enabled && !(permissions.IsAmplifyEnabled && permissions.dynamic.DisplayPlusAmplify), [permissions]);\r\n const isPMaxAspectRatiosV2Enabled = useMemo(() => permissions && permissions.dynamic.PMaxNewAspectRatios && !permissions.dynamic.PMaxExcludeNewAspectRatios, [permissions]);\r\n const isAdPreviewRefreshEnabled = useMemo(() => _.get(permissions, ['dynamic', 'AdPreviewRefresh']), [permissions]);\r\n\r\n const { imageFit } = dataService;\r\n\r\n const getExpandedCroppingsInner = useCallback(adTypeInner => (argObj) => {\r\n const { imageMeta } = argObj;\r\n // we should call fitting if\r\n // 1. the image is applied filter/blur/background change, and not saved to library yet\r\n // 2. the image is stock image from search result page which is not saved to library yet\r\n setLoadingStatus(true);\r\n const placementsToExpand = getPlacementsToExpand(adTypeInner);\r\n return imageFit({\r\n imageUrl: currentImage.url,\r\n placements: placementsToExpand,\r\n skipOutpainting: currentImage.sourceType === CSMLAssetSource.Shutterstock,\r\n }).then(res => getCropSettingsFromRoi({\r\n ...argObj,\r\n imageMeta: {\r\n ...imageMeta,\r\n expandedMeta: res,\r\n },\r\n })).catch(() => {\r\n }).finally(() => {\r\n setLoadingStatus(false);\r\n });\r\n }, [currentImage, imageFit, setLoadingStatus]);\r\n useEffect(() => {\r\n let getExpandedCroppingsFunc;\r\n if (isImageFittingEnabled && currentImage && currentImage.roiInfo && currentImage.id) {\r\n getExpandedCroppingsFunc = () => getCropSettingsFromRoi;\r\n }\r\n if (isImageFittingEnabled && currentImage && !currentImage.id && !currentImage.roiInfo) {\r\n getExpandedCroppingsFunc = getExpandedCroppingsInner;\r\n }\r\n\r\n if (currentImage && currentImage.originalUrl) {\r\n const placementSetConfig = getPlacementSetConfig(currentImage, getSmartCroppings, isAudienceAdSmartCropEnabled, isMMAV2Enabled, isPMaxAspectRatiosV2Enabled, isAdPreviewRefreshEnabled, getExpandedCroppingsFunc);\r\n setPlacementConfig(placementSetConfig);\r\n } else if (currentImage && currentImage.url) {\r\n const clonedImage = { ...currentImage, originalUrl: currentImage.url };\r\n const placementSetConfig = getPlacementSetConfig(clonedImage, getSmartCroppings, isAudienceAdSmartCropEnabled, isMMAV2Enabled, isPMaxAspectRatiosV2Enabled, isAdPreviewRefreshEnabled, getExpandedCroppingsFunc);\r\n setPlacementConfig(placementSetConfig);\r\n }\r\n }, [setPlacementConfig, isAudienceAdSmartCropEnabled, currentImage, getSmartCroppings, isMMAV2Enabled, isImageFittingEnabled, getExpandedCroppingsInner, isPMaxAspectRatiosV2Enabled, isAdPreviewRefreshEnabled]);\r\n\r\n useEffect(() => {\r\n if (placementList && placementList.length) {\r\n setLoadingStatus(false);\r\n }\r\n }, [setLoadingStatus, placementList]);\r\n\r\n const maxCropBox = useMemo(() => (imageInfo ? {\r\n SourceX: 0,\r\n SourceY: 0,\r\n SourceWidth: imageInfo.originalWidth,\r\n SourceHeight: imageInfo.originalHeight,\r\n } : null), [imageInfo]);\r\n\r\n const handleInvalidCropSetting = useCallback((invalidRatioList) => {\r\n let errorInfo = '';\r\n if (invalidRatioList.length === 1) {\r\n errorInfo = i18n.getString(\r\n _TL_('Your image doesn\\'t meet the size requirements for the following ad placement: {{ratio}} {{placement}}'),\r\n {\r\n ratio: `${invalidRatioList[0].aspectRatioAsRatio}`,\r\n placement: `${i18n.getString(invalidRatioList[0].previewTypeString)}`,\r\n }\r\n );\r\n } else if (invalidRatioList.length === 2) {\r\n errorInfo = i18n.getString(\r\n _TL_('Your image doesn\\'t meet the size requirements for the following ad placements: {{ratio1}} {{placement1}} and {{ratio2}} {{placement2}}'),\r\n {\r\n ratio1: `${invalidRatioList[0].aspectRatioAsRatio}`,\r\n ratio2: `${invalidRatioList[1].aspectRatioAsRatio}`,\r\n placement1: `${i18n.getString(invalidRatioList[0].previewTypeString)}`,\r\n placement2: `${i18n.getString(invalidRatioList[1].previewTypeString)}`,\r\n }\r\n );\r\n }\r\n\r\n setErrorTip(errorInfo);\r\n }, [i18n]);\r\n\r\n useEffect(() => {\r\n const invalidRatioList = getSizeErrorRatioList(\r\n adType,\r\n cropSettings || maxCropBox,\r\n true,\r\n isMMAV2Enabled,\r\n isPMaxAspectRatiosV2Enabled\r\n );\r\n handleInvalidCropSetting(invalidRatioList);\r\n }, [adType, cropSettings, handleInvalidCropSetting, isMMAV2Enabled, isPMaxAspectRatiosV2Enabled, maxCropBox]);\r\n\r\n const saveCropPlacement = useCallback((placement, newCropping) => {\r\n const { placementMeta } = placement || {};\r\n const { placementType, imageType } = placementMeta || {};\r\n if (adType === CSMLAdType.ImageExtension || adType === CSMLAdType.PMax) {\r\n // for image extension placements, all placements with same image type should be updated together\r\n updatePlacementCroppingByImageType({ placementSetName: adType, imageType, newPlacementCropping: newCropping });\r\n } else {\r\n updatePlacementCropping({ placementSetName: adType, placementType, newPlacementCropping: newCropping });\r\n }\r\n setEditingPlacementInfo(null);\r\n logger.logTrace('Edit page: save crop placement', {\r\n imageId: currentImage.id,\r\n adType,\r\n placementType: imageType,\r\n cropSettings: JSON.stringify(newCropping),\r\n });\r\n }, [adType, currentImage, logger, updatePlacementCropping, updatePlacementCroppingByImageType]);\r\n\r\n const cancelCropPlacement = useCallback(() => {\r\n setEditingPlacementInfo(null);\r\n logger.logTrace('Edit page: cancel edit placement', { imageId: currentImage.id });\r\n }, [currentImage, logger]);\r\n\r\n const switchAdType = useCallback((type) => {\r\n logger.logTrace('Edit Page: switchAdType', { imageId: currentImage.id, adType: type });\r\n setAdType(type);\r\n }, [currentImage, logger]);\r\n\r\n const switchShowRequiredOnly = useCallback((checked) => {\r\n setShowRequiredOnly(checked);\r\n logger.logTrace('Edit page: show required only', { imageId: currentImage.id, showRequiredOnly: checked });\r\n }, [currentImage, logger]);\r\n\r\n const updateImage = useCallback((newImage) => {\r\n if (!_.isEqual(newImage, currentImage)) {\r\n setCurrentImage(newImage);\r\n }\r\n }, [currentImage]);\r\n\r\n const previewImage = useMemo(() => (imageInfo ?\r\n new ImageExperienceImage({\r\n src: imageInfo.originalUrl,\r\n width: imageInfo.originalWidth,\r\n height: imageInfo.originalHeight,\r\n })\r\n : null), [imageInfo]);\r\n\r\n const hasCroppingTask = useMemo(() => {\r\n if (currentImage && currentImage.id) {\r\n const onGoingTask = imageCroppingTasks && imageCroppingTasks[currentImage.id];\r\n\r\n return !!onGoingTask;\r\n }\r\n return false;\r\n }, [currentImage, imageCroppingTasks]);\r\n\r\n const cropSettingsToUpdate = useMemo(() => _.first(changedCropSettings), [changedCropSettings]);\r\n\r\n const allSizeInvalidRatioList = useMemo(() => getAllSizeErrorRatioList(cropSettings || maxCropBox, false, isMMAV2Enabled), [cropSettings, isMMAV2Enabled, maxCropBox]);\r\n\r\n const requiredSizeInvalidRatioList = useMemo(() => getAllSizeErrorRatioList(cropSettings || maxCropBox, true, isMMAV2Enabled), [cropSettings, isMMAV2Enabled, maxCropBox]);\r\n\r\n const allViewErrorTip = useMemo(() => {\r\n let errorInfo = '';\r\n if (requiredSizeInvalidRatioList.length === 1) {\r\n errorInfo = i18n.getString(\r\n _TL_('Your image doesn\\'t meet the size requirements for {{ratio}} {{placement}} ads.'),\r\n {\r\n ratio: requiredSizeInvalidRatioList[0].aspectRatioAsRatio,\r\n placement: i18n.getString(requiredSizeInvalidRatioList[0].previewTypeString),\r\n }\r\n );\r\n } else if (requiredSizeInvalidRatioList.length === 2) {\r\n errorInfo = i18n.getString(\r\n _TL_('Your image doesn\\'t meet the size requirements for {{ratio1}} {{previewName1}} and {{ratio2}} {{previewName2}} ads.'),\r\n {\r\n ratio1: requiredSizeInvalidRatioList[0].aspectRatioAsRatio,\r\n ratio2: requiredSizeInvalidRatioList[1].aspectRatioAsRatio,\r\n previewName1: i18n.getString(requiredSizeInvalidRatioList[0].previewTypeString),\r\n previewName2: i18n.getString(requiredSizeInvalidRatioList[1].previewTypeString),\r\n }\r\n );\r\n }\r\n\r\n return errorInfo;\r\n }, [i18n, requiredSizeInvalidRatioList]);\r\n\r\n return {\r\n adType,\r\n currentViewErrorTip: errorTip,\r\n allViewErrorTip,\r\n showRequiredOnly,\r\n editingPlacementInfo,\r\n placementList,\r\n firstImage,\r\n previewTexts,\r\n maxCropBox,\r\n previewImage,\r\n hasCroppingTask,\r\n cropSettingsToUpdate,\r\n hasCropSettingsChanged,\r\n onEditPlacement,\r\n saveCropPlacement,\r\n cancelCropPlacement,\r\n switchAdType,\r\n switchShowRequiredOnly,\r\n updateImage,\r\n allSizeInvalidRatioList,\r\n requiredSizeInvalidRatioList,\r\n };\r\n};\r\n","import { useCallback, useState, useEffect, useMemo } from 'react';\r\nimport { Promise } from 'bluebird';\r\nimport { createColorBackground, fetchImgPromise, parseMaskResultPromise } from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\nimport { useMaskedImage } from './use-masked-image';\r\n\r\nexport const useBackgroundChange = ({\r\n dataService,\r\n perfMarker,\r\n logger,\r\n}) => {\r\n const [fetchSegmentationError, setFetchSegmentationError] = useState('');\r\n const [isFetchingSegmentations, setIsFetchingSegmentations] = useState(false);\r\n\r\n const {\r\n getImageSegmentations,\r\n generateImageBackground,\r\n } = dataService;\r\n\r\n const {\r\n alphaArray,\r\n imageUrlWithoutBackground,\r\n setImageUrlWithoutBackground,\r\n imageUrlWithGeneratedBackground,\r\n setImageUrlWithGeneratedBackground,\r\n imageUrlWithColoredBackground,\r\n setImageUrlWithColoredBackground,\r\n segmentationMasks,\r\n setSegmentationMasks,\r\n getMaskValueAtPoint,\r\n selectedMasks,\r\n setSelectedMasks,\r\n selectedImageSrc,\r\n setSelectedImageSrc,\r\n maskSetsBase64,\r\n setMaskSetsBase64,\r\n resetStates,\r\n maskValues,\r\n } = useMaskedImage();\r\n\r\n const drawColorBackground = useCallback((color, imageWidth, imageHeight) => {\r\n if ((selectedImageSrc || imageUrlWithoutBackground) && segmentationMasks) {\r\n return fetchImgPromise(selectedImageSrc || imageUrlWithoutBackground).then((image) => {\r\n const coloredBackground = createColorBackground(image, imageWidth, imageHeight, color, segmentationMasks, selectedMasks, alphaArray);\r\n setImageUrlWithColoredBackground(coloredBackground);\r\n });\r\n }\r\n return Promise.resolve(null);\r\n }, [selectedImageSrc, imageUrlWithoutBackground, segmentationMasks, selectedMasks, alphaArray, setImageUrlWithColoredBackground]);\r\n\r\n const getSegmentations = useCallback(({\r\n imageUrl, imageWidth, imageHeight,\r\n }) => {\r\n const imageSegmentationPerfMarker = perfMarker.createChild('ImageSegmentations');\r\n imageSegmentationPerfMarker.willInit();\r\n setIsFetchingSegmentations(true);\r\n resetStates();\r\n const ret = getImageSegmentations(imageUrl).then(result => (\r\n parseMaskResultPromise({\r\n result,\r\n imageUrl,\r\n imageWidth,\r\n imageHeight,\r\n })\r\n )).then((parsedResult) => {\r\n const {\r\n rawMaskSetsBase64String: rawMaskSetsBase64,\r\n maskSetsArray,\r\n selectedMasksArray,\r\n alphaArray: newAlphaArray,\r\n imageUrlWithoutBackground: selfDrawnImageUrl,\r\n } = parsedResult || {};\r\n setImageUrlWithoutBackground(selfDrawnImageUrl);\r\n setSegmentationMasks({ maskSetsArray, selectedMasksArray, newAlphaArray });\r\n setMaskSetsBase64(rawMaskSetsBase64);\r\n logger.logTrace('Copilot change image background - get image segmentations successfully', { originalUrl: imageUrl });\r\n }).catch((err) => {\r\n setFetchSegmentationError(err.uxMessage);\r\n })\r\n .finally(() => {\r\n setIsFetchingSegmentations(false);\r\n imageSegmentationPerfMarker.done();\r\n });\r\n return ret;\r\n }, [resetStates, perfMarker,\r\n getImageSegmentations, setImageUrlWithoutBackground, setSegmentationMasks, setMaskSetsBase64, logger]);\r\n\r\n const generateBackground = useCallback(({\r\n prompt, imageUrl, imageWidth, imageHeight,\r\n }) => {\r\n const backgroundGenerationPerfMarker = perfMarker.createChild('ImageBackgroundGeneration');\r\n backgroundGenerationPerfMarker.willInit();\r\n const ret = generateImageBackground({\r\n prompt,\r\n imageUrl,\r\n selectedMasks,\r\n maskSetsBase64,\r\n outputImageWidth: imageWidth,\r\n outputImageHeight: imageHeight,\r\n }).then((res) => {\r\n const { imageUrl: newImageUrl } = res || {};\r\n logger.logTrace('Copilot change image background - generate image background successfully', { generatedUrl: newImageUrl, prompt });\r\n setImageUrlWithGeneratedBackground(newImageUrl);\r\n return newImageUrl;\r\n }).finally(() => {\r\n backgroundGenerationPerfMarker.done();\r\n });\r\n return ret;\r\n }, [selectedMasks, perfMarker,\r\n generateImageBackground, maskSetsBase64, logger, setImageUrlWithGeneratedBackground]);\r\n\r\n useEffect(() => {\r\n logger.logTrace('Copilot change image background - user entered the page');\r\n }, [logger]);\r\n\r\n const resultImage = useMemo(() => (imageUrlWithGeneratedBackground && {\r\n url: imageUrlWithGeneratedBackground,\r\n }), [imageUrlWithGeneratedBackground]);\r\n\r\n return {\r\n // APIs\r\n getSegmentations,\r\n isFetchingSegmentations,\r\n generateBackground,\r\n drawColorBackground,\r\n\r\n // image states\r\n imageUrlWithoutBackground, // the image url without background\r\n imageUrlWithGeneratedBackground,\r\n setImageUrlWithGeneratedBackground,\r\n imageUrlWithColoredBackground,\r\n resultImage,\r\n getMaskValueAtPoint,\r\n segmentationMasks,\r\n setSelectedImageSrc,\r\n selectedImageSrc, // the image after user selected objects\r\n selectedMasks,\r\n setSelectedMasks,\r\n maskValues,\r\n fetchSegmentationError,\r\n };\r\n};\r\n","import { useCallback, useState, useMemo } from 'react';\r\nimport { getMaskValueAtPointFunc } from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\n\r\nexport const useMaskedImage = () => {\r\n const [imageUrlWithoutBackground, setImageUrlWithoutBackground] = useState(null);\r\n const [imageUrlWithGeneratedBackground, setImageUrlWithGeneratedBackground] = useState(null);\r\n const [imageUrlWithColoredBackground, setImageUrlWithColoredBackground] = useState(null);\r\n const [segmentationMasks, setSegmentationMaskInternal] = useState(null);\r\n const [selectedMasks, setSelectedMasks] = useState([]);\r\n const [selectedImageSrc, setSelectedImageSrc] = useState(null);\r\n const [maskSetsBase64, setMaskSetsBase64] = useState(null);\r\n const [alphaArray, setAlphaArray] = useState([]);\r\n\r\n // mask is encoded in base64 format, decode it here\r\n const setSegmentationMasks = useCallback(({ maskSetsArray, selectedMasksArray, newAlphaArray }) => {\r\n setSegmentationMaskInternal(maskSetsArray);\r\n setSelectedMasks(selectedMasksArray);\r\n setAlphaArray(newAlphaArray);\r\n }, []);\r\n\r\n const resetStates = useCallback(() => {\r\n setImageUrlWithoutBackground(null);\r\n setSegmentationMaskInternal(null);\r\n setSelectedMasks([]);\r\n setSelectedImageSrc(null);\r\n setMaskSetsBase64(null);\r\n }, []);\r\n\r\n const maskValues = useMemo(() => Array.from(new Set(segmentationMasks)).filter(x => x > 0), [segmentationMasks]);\r\n\r\n const getMaskValueAtPoint = useCallback((x, y, originalImageWidth) =>\r\n getMaskValueAtPointFunc(x, y, originalImageWidth, segmentationMasks), [segmentationMasks]);\r\n\r\n return {\r\n imageUrlWithoutBackground,\r\n setImageUrlWithoutBackground,\r\n imageUrlWithGeneratedBackground,\r\n setImageUrlWithGeneratedBackground,\r\n imageUrlWithColoredBackground,\r\n setImageUrlWithColoredBackground,\r\n\r\n // mask\r\n alphaArray,\r\n segmentationMasks,\r\n setSegmentationMasks,\r\n getMaskValueAtPoint,\r\n selectedMasks,\r\n setSelectedMasks,\r\n selectedImageSrc,\r\n setSelectedImageSrc,\r\n maskSetsBase64,\r\n maskValues,\r\n setMaskSetsBase64,\r\n resetStates,\r\n };\r\n};\r\n","import { buildImageAssetMetadataToSave, extractInfoForDeserialization } from '@bingads-webui-campaign/media-metadata-model';\r\nimport _ from 'underscore';\r\n\r\nexport const ViewName = {\r\n PlacementListView: 'placementListView',\r\n PlacementEditView: 'placementEditView',\r\n ImageAdjustView: 'imageAdjustView',\r\n BackgroundChangeView: 'backgroundChangeView',\r\n};\r\n\r\nexport const convertMetaData = (resultFilterAndBlurImage) => {\r\n const combinedEffect = [];\r\n if (resultFilterAndBlurImage.filter) {\r\n const filterEffect = buildImageAssetMetadataToSave({\r\n effectSettings: {\r\n effectKey: 'DesignerEffects',\r\n effectOptions: {\r\n designerEffect: resultFilterAndBlurImage.filter,\r\n },\r\n },\r\n });\r\n combinedEffect.push(filterEffect);\r\n }\r\n if (resultFilterAndBlurImage.blur) {\r\n const blurEffect = buildImageAssetMetadataToSave({\r\n effectSettings: {\r\n effectKey: 'BackgroundBlur',\r\n effectOptions: {\r\n backgroundBlur: resultFilterAndBlurImage.blur,\r\n },\r\n },\r\n });\r\n combinedEffect.push(blurEffect);\r\n }\r\n if (combinedEffect.length > 0) {\r\n return {\r\n effect: combinedEffect[0].effect,\r\n combinedEffect,\r\n };\r\n }\r\n return null;\r\n};\r\n\r\nconst revertMetaDataInner = (metaData) => {\r\n const combinedEffectArray = _.isArray(metaData.combinedEffect) ? metaData.combinedEffect : _.keys(metaData.combinedEffect).map(key => metaData.combinedEffect[key]);\r\n if (combinedEffectArray.length > 0) {\r\n const filterEffect = combinedEffectArray.find(effect => effect.effect.key === 'DesignerEffects');\r\n const blurEffect = combinedEffectArray.find(effect => effect.effect.key === 'BackgroundBlur');\r\n return {\r\n filter: filterEffect ? extractInfoForDeserialization({ obj: filterEffect }) : null,\r\n blur: blurEffect ? extractInfoForDeserialization({ obj: blurEffect }) : null,\r\n };\r\n } else if (metaData.effect) {\r\n if (metaData.effect.key === 'DesignerEffects') {\r\n return {\r\n filter: extractInfoForDeserialization({ obj: metaData }),\r\n blur: null,\r\n };\r\n } else if (metaData.effect.key === 'BackgroundBlur') {\r\n return {\r\n filter: null,\r\n blur: extractInfoForDeserialization({ obj: metaData }),\r\n };\r\n }\r\n }\r\n return null;\r\n};\r\n\r\nexport const revertMetaData = (metaData) => {\r\n const { filter, blur } = revertMetaDataInner(metaData);\r\n const filterValue = filter ? filter.effectSettings.effectOptions.designerEffect : null;\r\n const blurValue = blur ? blur.effectSettings.effectOptions.backgroundBlur : null;\r\n return {\r\n filter: filterValue,\r\n blur: blurValue,\r\n };\r\n};\r\n","/* eslint-disable arrow-body-style */\r\nimport _ from 'underscore';\r\nimport { useCallback, useContext, useEffect, useMemo, useState } from 'react';\r\nimport { Promise } from 'bluebird';\r\n\r\nimport { CSMLAssetSource, ROOT_FOLDER_ID, useAdsStudioServices, fetchImgPromise } from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\nimport { isCopilotRegionRestricted } from '@bingads-webui-react/copilot-utils';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\nimport { DataContext } from '@bingads-webui-campaign-react/ads-studio-shared-components';\r\n\r\nimport { useFilterAndBlur } from './use-filter-and-blur';\r\nimport { useAdPlacement } from './use-ad-placement';\r\nimport { useBackgroundChange } from './background-change/use-background-change';\r\nimport { ViewName, convertMetaData, revertMetaData } from './utils';\r\n\r\nexport const useEditImageState = ({\r\n imageId,\r\n dataService,\r\n editImageUrl,\r\n perfMarker,\r\n setDataLoaded,\r\n permissions,\r\n logger,\r\n i18n,\r\n getSmartCroppings,\r\n navigation,\r\n initialCurrentView,\r\n folderId,\r\n getAssetEnhancementSettings,\r\n}) => {\r\n const [currentView, setCurrentView] = useState(ViewName.PlacementListView);\r\n const [originalImage, setOriginalImage] = useState({});\r\n const [loadingStatus, setLoadingStatus] = useState(true);\r\n const [initialAssetLoading, setInitialAssetLoading] = useState(false);\r\n const [backgroundChangedResult, setBackgroundChangedResult] = useState(null);\r\n const [savedBackgroundColorChangedImage, setSavedBackgroundColorChangedImage] = useState([]);\r\n const [filterBlurBaseImage, setFilterBlurBaseImage] = useState(null);\r\n const [isConfirmDialogOpen, setIsConfirmDialogOpen] = useState(false);\r\n const [assetsAIEnhancementEnabled, setAssetsAIEnhancementEnabled] = useState(false);\r\n const serverContext = useContext(ServerContext);\r\n const { setData } = useContext(DataContext);\r\n const cropDataService = useAdsStudioServices();\r\n\r\n const { cropImage, imageCroppingTasks } = cropDataService;\r\n\r\n const isImageFittingEnabled = useMemo(() => _.result(permissions, ['dynamic', 'ImageFittingMVP'], false) && !_.result(permissions, ['dynamic', 'ImageFittingExlcudeMAE'], true)\r\n && _.result(permissions, ['dynamic', 'ImageFittingUnifiedImageROI'], false), [permissions]);\r\n const isBrandKitEnabled = useMemo(() => _.result(permissions, ['dynamic', 'BrandKitUI'], false), [permissions]);\r\n\r\n const finalImageFittingEnabled = useMemo(() => isImageFittingEnabled && assetsAIEnhancementEnabled, [isImageFittingEnabled, assetsAIEnhancementEnabled]);\r\n\r\n useEffect(() => {\r\n if (initialCurrentView) {\r\n setCurrentView(initialCurrentView);\r\n }\r\n }, [initialCurrentView]);\r\n\r\n useEffect(() => {\r\n // We need the image url, image width and height for the background removal\r\n if (editImageUrl) {\r\n setLoadingStatus(true);\r\n fetchImgPromise(editImageUrl).then((image) => {\r\n setOriginalImage({\r\n url: editImageUrl,\r\n width: image.naturalWidth,\r\n height: image.naturalHeight,\r\n originalWidth: image.naturalWidth,\r\n originalHeight: image.naturalHeight,\r\n sourceType: CSMLAssetSource.Shutterstock,\r\n });\r\n setLoadingStatus(false);\r\n });\r\n } else if (!originalImage.url) {\r\n setLoadingStatus(true);\r\n setInitialAssetLoading(true);\r\n perfMarker.willFetchData();\r\n getAssetEnhancementSettings().then((settings) => {\r\n const assetsAIEnhancementEnabledInner = settings.AssetAIEnhancementOptout === 'false';\r\n const promises = [\r\n dataService.getImageById({ imageId, isImageFittingEnabled: isImageFittingEnabled && assetsAIEnhancementEnabledInner }),\r\n isBrandKitEnabled ? isCopilotRegionRestricted({\r\n feature: 'displayTemplate',\r\n permissions,\r\n serverContext,\r\n }) : Promise.resolve(true),\r\n ];\r\n Promise.all(promises).then(([res, isRestricted]) => {\r\n if (res.baseId && res.metadata && (res.metadata.effect || res.metadata.combinedEffect)) {\r\n // applied smart effect, get to the base image\r\n const { filter, blur } = revertMetaData(res.metadata) || {};\r\n dataService.getImageById({ imageId: res.baseId, isImageFittingEnabled: isImageFittingEnabled && assetsAIEnhancementEnabledInner }).then((image) => {\r\n setFilterBlurBaseImage({ ...image, filter, blur });\r\n setOriginalImage(res);\r\n setLoadingStatus(false);\r\n setInitialAssetLoading(false);\r\n });\r\n } else if (isBrandKitEnabled && !isRestricted && res.metadata && res.metadata.template &&\r\n res.metadata.template.templateId &&\r\n Number(res.metadata.template.version) >= 1.2\r\n ) {\r\n // template based AIGC image, navigate to the edit display image page\r\n setData({\r\n imageId: res.id,\r\n url: res.url,\r\n metadata: res.metadata,\r\n height: res.height,\r\n width: res.width,\r\n sourceType: res.sourceType,\r\n });\r\n navigation.gotoEditDisplayImagePage({\r\n imageId,\r\n folderId,\r\n templateId: res.metadata.template.templateId,\r\n });\r\n } else {\r\n setOriginalImage(res);\r\n setLoadingStatus(false);\r\n setInitialAssetLoading(false);\r\n }\r\n });\r\n setAssetsAIEnhancementEnabled(assetsAIEnhancementEnabledInner);\r\n });\r\n }\r\n }, [dataService, editImageUrl, imageId, isImageFittingEnabled, originalImage.url, navigation, folderId, isBrandKitEnabled, permissions, serverContext]);\r\n\r\n const {\r\n filterIndex,\r\n setFilterIndex,\r\n updateImage,\r\n backgroundBlurEnabled,\r\n toggleBackgroundBlur,\r\n changeBackgroundBlurLevel,\r\n backgroundBlurLevel,\r\n resultImage: resultFilterAndBlurImage,\r\n imagesWithFilter,\r\n getImagesWithFilter,\r\n isImageUpdated: isFilterAndBlurImageUpdated,\r\n isImageChangedWhenActive: isFilterAndBlurImageChangedWhenActive,\r\n } = useFilterAndBlur({\r\n dataService,\r\n // eslint-disable-next-line no-nested-ternary\r\n originalImage: editImageUrl ? '' : (filterBlurBaseImage ? filterBlurBaseImage.url : originalImage.url), // if editImageUrl is set, it means the image is from shutter stock which is not supported by adjust\r\n setLoadingStatus,\r\n initialFilter: filterBlurBaseImage ? filterBlurBaseImage.filter : null,\r\n initialBlur: filterBlurBaseImage ? filterBlurBaseImage.blur : null,\r\n isActive: currentView === ViewName.ImageAdjustView,\r\n });\r\n\r\n const {\r\n getSegmentations,\r\n generateBackground,\r\n drawColorBackground,\r\n imageUrlWithColoredBackground,\r\n imageUrlWithoutBackground, // the image url without background\r\n imageUrlWithGeneratedBackground,\r\n setImageUrlWithGeneratedBackground,\r\n getMaskValueAtPoint,\r\n segmentationMasks,\r\n setSelectedImageSrc,\r\n selectedImageSrc, // the image after user selected objects\r\n selectedMasks,\r\n setSelectedMasks,\r\n fetchSegmentationError,\r\n isFetchingSegmentations,\r\n maskValues,\r\n } = useBackgroundChange({\r\n dataService,\r\n perfMarker,\r\n logger,\r\n });\r\n\r\n const adPlacementResult = useAdPlacement({\r\n image: originalImage,\r\n permissions,\r\n setDataLoaded,\r\n logger,\r\n i18n,\r\n getSmartCroppings,\r\n setLoadingStatus,\r\n imageCroppingTasks,\r\n isImageFittingEnabled: finalImageFittingEnabled,\r\n dataService,\r\n });\r\n\r\n const {\r\n updateImage: updateAdPlacementImageInner,\r\n cropSettingsToUpdate,\r\n hasCropSettingsChanged,\r\n hasCroppingTask,\r\n requiredSizeInvalidRatioList,\r\n allViewErrorTip,\r\n } = adPlacementResult;\r\n\r\n const {\r\n saveImageCopy, uploadImageToFolder, saveImageWithBaseId, getImageById, uploadStockImage, saveImage, moveImageToFolder, addImageWithBaseIdToFolder,\r\n } = dataService;\r\n\r\n const folderIdNumber = useMemo(() =>\r\n (folderId && folderId !== ROOT_FOLDER_ID ? Number(folderId) : null), [folderId]);\r\n\r\n const replaceBackground = useCallback((backgroundChangedImage, needToSave) => {\r\n setLoadingStatus(true);\r\n if (needToSave) {\r\n // save the image to asset library first, since the image data is base64 which is not supported by filter and blur API\r\n uploadImageToFolder({\r\n imageData: backgroundChangedImage.url,\r\n folderId: folderIdNumber,\r\n }).then((res) => {\r\n logger.logTrace('edit image services: replace with single color background for image id', { imageId: res });\r\n getImageById({ imageId: res, isImageFittingEnabled: finalImageFittingEnabled }).then((image) => {\r\n updateImage(image).then(() => {\r\n setLoadingStatus(false);\r\n });\r\n setSavedBackgroundColorChangedImage([...savedBackgroundColorChangedImage, image.url]);\r\n setBackgroundChangedResult(image);\r\n setCurrentView(ViewName.ImageAdjustView);\r\n });\r\n });\r\n } else {\r\n logger.logTrace('edit image services: replace with generated background', { imageData: backgroundChangedImage.url });\r\n setBackgroundChangedResult(backgroundChangedImage);\r\n setCurrentView(ViewName.ImageAdjustView);\r\n updateImage(backgroundChangedImage).then(() => {\r\n setLoadingStatus(false);\r\n });\r\n }\r\n setImageUrlWithGeneratedBackground(null);\r\n }, [setImageUrlWithGeneratedBackground, uploadImageToFolder, folderIdNumber, logger, getImageById, finalImageFittingEnabled, updateImage, savedBackgroundColorChangedImage]);\r\n\r\n const isUnsavedStockImage = useMemo(() => !_.isEmpty(editImageUrl), [editImageUrl]);\r\n\r\n const isSavedStockImage = useMemo(() => _.get(originalImage, 'sourceType') === CSMLAssetSource.Shutterstock, [originalImage]);\r\n\r\n const isStockImage = useMemo(() => isUnsavedStockImage || isSavedStockImage, [isSavedStockImage, isUnsavedStockImage]);\r\n\r\n const isImageUpdated = useMemo(() => (\r\n originalImage && resultFilterAndBlurImage && (isFilterAndBlurImageUpdated || backgroundChangedResult)\r\n ), [originalImage, resultFilterAndBlurImage, isFilterAndBlurImageUpdated, backgroundChangedResult]);\r\n\r\n const cropImageAndGoBack = useCallback((id, backToLibraryPage) => {\r\n const { placementSettings } = cropSettingsToUpdate;\r\n if (hasCropSettingsChanged) {\r\n cropImage({\r\n imageId: id,\r\n placementSettings,\r\n }).then(() => {\r\n setLoadingStatus(false);\r\n if (backToLibraryPage) {\r\n navigation.gotoLibraryPage();\r\n } else {\r\n navigation.goBack();\r\n }\r\n });\r\n } else {\r\n setLoadingStatus(false);\r\n if (backToLibraryPage) {\r\n navigation.gotoLibraryPage();\r\n } else {\r\n navigation.goBack();\r\n }\r\n }\r\n }, [cropImage, cropSettingsToUpdate, hasCropSettingsChanged, navigation]);\r\n\r\n const onConfirmDialogSave = useCallback(() => {\r\n if (isImageUpdated) {\r\n // When the url is changed, need to update asset. Then save its crop changes if have.\r\n setLoadingStatus(true);\r\n saveImage({\r\n id: originalImage.id,\r\n type: originalImage.type,\r\n url: resultFilterAndBlurImage.url,\r\n })\r\n .then(() => {\r\n cropImageAndGoBack(originalImage.id);\r\n });\r\n } else {\r\n setLoadingStatus(true);\r\n cropImageAndGoBack(originalImage.id);\r\n }\r\n }, [cropImageAndGoBack, isImageUpdated, originalImage, resultFilterAndBlurImage, saveImage]);\r\n\r\n const saveImageDirectly = useCallback(() => {\r\n if (isUnsavedStockImage) {\r\n // When it's an unsaved stock image, upload it first. Then save its crop changes if have.\r\n setLoadingStatus(true);\r\n uploadStockImage({ stockImageId: imageId })\r\n .then((id) => {\r\n cropImageAndGoBack(id, true);\r\n });\r\n } else if (isImageUpdated || hasCropSettingsChanged) {\r\n setIsConfirmDialogOpen(true);\r\n } else {\r\n navigation.goBack();\r\n }\r\n }, [cropImageAndGoBack, hasCropSettingsChanged, imageId, isImageUpdated, isUnsavedStockImage, navigation, uploadStockImage]);\r\n\r\n const updateAdPlacementImage = useCallback(() => {\r\n if ((isImageUpdated || isFilterAndBlurImageChangedWhenActive) && resultFilterAndBlurImage.url !== originalImage.url) {\r\n const image = new Image();\r\n image.src = resultFilterAndBlurImage.url;\r\n image.onload = () => {\r\n updateAdPlacementImageInner({\r\n url: resultFilterAndBlurImage.url,\r\n width: image.width,\r\n height: image.height,\r\n originalWidth: image.width,\r\n originalHeight: image.height,\r\n });\r\n };\r\n } else if ((isImageUpdated || isFilterAndBlurImageChangedWhenActive) && resultFilterAndBlurImage.url === originalImage.url) {\r\n updateAdPlacementImageInner(originalImage);\r\n }\r\n }, [isImageUpdated, isFilterAndBlurImageChangedWhenActive, resultFilterAndBlurImage.url, originalImage, updateAdPlacementImageInner]);\r\n\r\n const saveBackgroundChangedResult = useCallback(() => {\r\n return new Promise((resolve) => {\r\n // image already saved in asset library, return directly\r\n if (backgroundChangedResult && savedBackgroundColorChangedImage.includes(backgroundChangedResult.url)) {\r\n logger.logTrace('edit image services: save single color background');\r\n resolve(backgroundChangedResult);\r\n // save background changed image to asset library\r\n } else if (backgroundChangedResult) {\r\n saveImageCopy({\r\n image: backgroundChangedResult,\r\n folderId: folderIdNumber,\r\n }).then((res) => {\r\n logger.logTrace('edit image services: save generated background for image id', { imageId: res, imageUrl: backgroundChangedResult.url });\r\n resolve({ id: res, url: backgroundChangedResult.url });\r\n });\r\n // no background changed image, return original image id\r\n } else {\r\n const baseImage = filterBlurBaseImage || originalImage;\r\n resolve(baseImage);\r\n }\r\n });\r\n }, [backgroundChangedResult, filterBlurBaseImage, folderIdNumber, logger, originalImage, saveImageCopy, savedBackgroundColorChangedImage]);\r\n\r\n const moveImageToFolderInner = useCallback((id) => {\r\n if (folderId && folderId !== ROOT_FOLDER_ID) {\r\n return getImageById({ imageId: id }).then((image) => {\r\n return moveImageToFolder({\r\n image,\r\n destFolderId: folderIdNumber,\r\n });\r\n });\r\n }\r\n return Promise.resolve();\r\n }, [folderId, folderIdNumber, getImageById, moveImageToFolder]);\r\n\r\n const saveAsCopy = useCallback(() => {\r\n if (isImageUpdated) {\r\n setLoadingStatus(true);\r\n // save background changed image to asset library first\r\n saveBackgroundChangedResult().then((res) => {\r\n // save the image with filter and blur\r\n if (resultFilterAndBlurImage && resultFilterAndBlurImage.url !== res.url) {\r\n const metaData = convertMetaData(resultFilterAndBlurImage);\r\n if (finalImageFittingEnabled) {\r\n addImageWithBaseIdToFolder({\r\n imageSrc: resultFilterAndBlurImage.url,\r\n baseId: Number(res.id),\r\n folderId: folderIdNumber,\r\n metaData: JSON.stringify(metaData),\r\n }).then((resInner) => {\r\n logger.logTrace('edit image services: save image as copy with baseId', { id: resInner, baseId: res.id });\r\n cropImageAndGoBack(resInner);\r\n });\r\n } else {\r\n saveImageWithBaseId({\r\n image: {\r\n url: resultFilterAndBlurImage.url,\r\n metaData,\r\n },\r\n baseId: res.id,\r\n }).then((inner) => {\r\n // currently MT doesn't support to save image with baseId to a folder, so move it to the folder\r\n logger.logTrace('edit image services: save image as copy with baseId', { id: inner, baseId: res.id });\r\n moveImageToFolderInner(inner).then(() => {\r\n // crop the image if needed\r\n cropImageAndGoBack(inner);\r\n });\r\n });\r\n }\r\n } else {\r\n const { id } = res || {};\r\n logger.logTrace('edit image services: save image as copy', { id });\r\n cropImageAndGoBack(res.id);\r\n }\r\n });\r\n } else {\r\n navigation.goBack();\r\n }\r\n }, [addImageWithBaseIdToFolder, cropImageAndGoBack, finalImageFittingEnabled, folderIdNumber, isImageUpdated, logger, moveImageToFolderInner, navigation, resultFilterAndBlurImage, saveBackgroundChangedResult, saveImageWithBaseId]);\r\n\r\n const disableSave = useMemo(() => (\r\n (!isUnsavedStockImage && !isImageUpdated && !hasCropSettingsChanged) || hasCroppingTask || (hasCropSettingsChanged && requiredSizeInvalidRatioList && requiredSizeInvalidRatioList.length > 0)\r\n ), [isUnsavedStockImage, isImageUpdated, hasCropSettingsChanged, hasCroppingTask, requiredSizeInvalidRatioList]);\r\n\r\n const saveButtonTooltip = useMemo(() => {\r\n let tooltip;\r\n if (disableSave && hasCropSettingsChanged && requiredSizeInvalidRatioList && requiredSizeInvalidRatioList.length > 0) {\r\n tooltip = allViewErrorTip;\r\n }\r\n\r\n return tooltip;\r\n }, [allViewErrorTip, disableSave, hasCropSettingsChanged, requiredSizeInvalidRatioList]);\r\n\r\n return {\r\n originalImage,\r\n resultImage: resultFilterAndBlurImage,\r\n currentView,\r\n setCurrentView,\r\n filterIndex,\r\n setFilterIndex,\r\n updateImage,\r\n backgroundBlurEnabled,\r\n toggleBackgroundBlur,\r\n changeBackgroundBlurLevel,\r\n backgroundBlurLevel,\r\n loadingStatus,\r\n initialAssetLoading,\r\n saveAsCopy,\r\n saveImageDirectly,\r\n imagesWithFilter,\r\n getImagesWithFilter,\r\n isImageUpdated,\r\n replaceBackground,\r\n isStockImage,\r\n disableSave,\r\n haveCroppingTasks: !_.isEmpty(imageCroppingTasks),\r\n isConfirmDialogOpen,\r\n setIsConfirmDialogOpen,\r\n onConfirmDialogSave,\r\n saveButtonTooltip,\r\n updateAdPlacementImage,\r\n ...adPlacementResult,\r\n\r\n // Change Background\r\n generateBackground,\r\n getSegmentations,\r\n drawColorBackground,\r\n imageUrlWithColoredBackground,\r\n imageUrlWithoutBackground,\r\n imageUrlWithGeneratedBackground,\r\n setImageUrlWithGeneratedBackground,\r\n getMaskValueAtPoint,\r\n segmentationMasks,\r\n setSelectedImageSrc,\r\n selectedImageSrc, // the image after user selected objects\r\n selectedMasks,\r\n setSelectedMasks,\r\n maskValues,\r\n fetchSegmentationError,\r\n isFetchingSegmentations,\r\n };\r\n};\r\n","import { useCallback, useEffect, useMemo, useState, useRef } from 'react';\r\n\r\nexport const useFilterAndBlur = ({\r\n dataService,\r\n originalImage,\r\n setLoadingStatus,\r\n initialFilter,\r\n initialBlur,\r\n isActive,\r\n}) => {\r\n const {\r\n imagesWithFilter,\r\n imagesWithFilterAndBlur,\r\n getImagesWithFilter,\r\n getImagesWithFilterAndBlur,\r\n } = dataService;\r\n\r\n const [filterIndex, setFilterIndex] = useState(0);\r\n const [backgroundBlurEnabled, setBackgroundBlurEnabled] = useState(false);\r\n const [imagesWithFilterAndBlurCached, setImagesWithFilterAndBlurCached] = useState([]);\r\n const [backgroundBlurLevel, setBackgroundBlurLevel] = useState(50);\r\n const [currentImage, setCurrentImage] = useState('');\r\n const [initialStateApplied, setInitialStateApplied] = useState(false);\r\n\r\n const initialStatusWhenActive = useRef();\r\n\r\n useEffect(() => {\r\n if (isActive) {\r\n initialStatusWhenActive.current = {\r\n filterIndex,\r\n backgroundBlurLevel,\r\n backgroundBlurEnabled,\r\n };\r\n } else {\r\n initialStatusWhenActive.current = null;\r\n }\r\n }, [isActive, filterIndex, backgroundBlurLevel, backgroundBlurEnabled]);\r\n\r\n useEffect(() => {\r\n if (imagesWithFilter && imagesWithFilter.length > 0 && !initialStateApplied && (initialFilter || initialBlur)) {\r\n if (initialFilter) {\r\n const index = imagesWithFilter.findIndex(image => image.filter === initialFilter);\r\n if (index !== -1) {\r\n setFilterIndex(index);\r\n }\r\n }\r\n if (initialBlur) {\r\n setBackgroundBlurEnabled(true);\r\n setBackgroundBlurLevel(initialBlur);\r\n getImagesWithFilterAndBlur(originalImage, initialBlur);\r\n }\r\n setInitialStateApplied(true);\r\n }\r\n }, [getImagesWithFilterAndBlur, imagesWithFilter, imagesWithFilterAndBlur, initialBlur, initialFilter, initialStateApplied, originalImage]);\r\n\r\n // update image when image changes. e.g., background removal\r\n const updateImage = useCallback((newImage) => {\r\n setCurrentImage(newImage.url);\r\n if (backgroundBlurEnabled) {\r\n getImagesWithFilter(newImage.url);\r\n return getImagesWithFilterAndBlur(newImage.url, backgroundBlurLevel);\r\n }\r\n setImagesWithFilterAndBlurCached([]);\r\n return getImagesWithFilter(newImage.url);\r\n }, [backgroundBlurEnabled, backgroundBlurLevel, getImagesWithFilter, getImagesWithFilterAndBlur]);\r\n\r\n const resultImage = useMemo(() => {\r\n if (backgroundBlurEnabled && imagesWithFilterAndBlurCached.length) {\r\n return imagesWithFilterAndBlurCached[filterIndex];\r\n } else if (imagesWithFilter && imagesWithFilter.length) {\r\n return imagesWithFilter[filterIndex];\r\n }\r\n\r\n return ({\r\n filter: null,\r\n url: originalImage,\r\n });\r\n }, [backgroundBlurEnabled, filterIndex, imagesWithFilter, imagesWithFilterAndBlurCached, originalImage]);\r\n\r\n const getImagesWithFilterImp = useCallback((image) => {\r\n setLoadingStatus(true);\r\n getImagesWithFilter(image).finally(() => {\r\n setLoadingStatus(false);\r\n });\r\n }, [getImagesWithFilter, setLoadingStatus]);\r\n\r\n useEffect(() => {\r\n if (imagesWithFilterAndBlur) {\r\n setImagesWithFilterAndBlurCached(imagesWithFilterAndBlur);\r\n }\r\n }, [imagesWithFilterAndBlur]);\r\n\r\n useEffect(() => {\r\n if (originalImage) {\r\n setCurrentImage(originalImage);\r\n setLoadingStatus(true);\r\n getImagesWithFilter(originalImage).finally(() => {\r\n setLoadingStatus(false);\r\n });\r\n }\r\n }, [getImagesWithFilter, originalImage, setLoadingStatus]);\r\n\r\n const toggleBackgroundBlur = useCallback((enableBackgroundBlur) => {\r\n if (enableBackgroundBlur) {\r\n if (!imagesWithFilterAndBlurCached.length) {\r\n setLoadingStatus(true);\r\n getImagesWithFilterAndBlur(currentImage, backgroundBlurLevel).finally(() => {\r\n setLoadingStatus(false);\r\n });\r\n }\r\n }\r\n setBackgroundBlurEnabled(enableBackgroundBlur);\r\n }, [backgroundBlurLevel, currentImage, getImagesWithFilterAndBlur, imagesWithFilterAndBlurCached.length, setLoadingStatus]);\r\n\r\n const changeBackgroundBlurLevel = useCallback((blurLevel = 50) => {\r\n setLoadingStatus(true);\r\n setBackgroundBlurLevel(blurLevel);\r\n getImagesWithFilterAndBlur(currentImage, blurLevel).finally(() => {\r\n setLoadingStatus(false);\r\n });\r\n }, [currentImage, getImagesWithFilterAndBlur, setLoadingStatus]);\r\n\r\n const isImageUpdated = useMemo(() => {\r\n if (initialBlur && initialFilter && initialStateApplied) {\r\n return !backgroundBlurEnabled || initialBlur !== backgroundBlurLevel || initialFilter !== imagesWithFilter[filterIndex].filter;\r\n } else if (initialBlur && initialStateApplied) {\r\n return !backgroundBlurEnabled || initialBlur !== backgroundBlurLevel || filterIndex !== 0;\r\n } else if (initialFilter && initialStateApplied) {\r\n return initialFilter !== imagesWithFilter[filterIndex].filter || backgroundBlurEnabled;\r\n }\r\n return resultImage && resultImage.url !== originalImage;\r\n }, [backgroundBlurEnabled, backgroundBlurLevel, filterIndex, imagesWithFilter, initialBlur, initialFilter, initialStateApplied, originalImage, resultImage]);\r\n\r\n // check if image is changed when current view is active\r\n // maybe is same as original image but different from the one when user landed on this view\r\n const isImageChangedWhenActive = useMemo(\r\n () =>\r\n initialStatusWhenActive.current &&\r\n (initialStatusWhenActive.current.filterIndex !== filterIndex\r\n || initialStatusWhenActive.current.backgroundBlurLevel !== backgroundBlurLevel\r\n || initialStatusWhenActive.current.backgroundBlurEnabled !== backgroundBlurEnabled),\r\n [backgroundBlurEnabled, backgroundBlurLevel, filterIndex]\r\n );\r\n\r\n return {\r\n filterIndex,\r\n setFilterIndex,\r\n updateImage,\r\n backgroundBlurEnabled,\r\n toggleBackgroundBlur,\r\n changeBackgroundBlurLevel,\r\n backgroundBlurLevel,\r\n resultImage,\r\n imagesWithFilter,\r\n getImagesWithFilter: getImagesWithFilterImp,\r\n isImageUpdated,\r\n isImageChangedWhenActive,\r\n };\r\n};\r\n","import { makeStyles, shorthands } from '@fluentui/react-components';\r\n\r\nexport const useStyles = makeStyles({\r\n imagePreviewView: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n justifyContent: 'flex-start',\r\n ...shorthands.margin('12px'),\r\n ...shorthands.gap('32px'),\r\n ...shorthands.flex(1),\r\n\r\n '& .image-preview-image-wrapper': {\r\n width: '598px',\r\n '& img': {\r\n width: '100%',\r\n height: 'auto',\r\n },\r\n },\r\n\r\n '& .image-preview-button-wrapper': {\r\n boxShadow: '0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14)',\r\n ...shorthands.borderRadius('6px'),\r\n\r\n '& .button-item': {\r\n ...shorthands.border('none'),\r\n ...shorthands.padding('12px'),\r\n\r\n '&.first-button-item': {\r\n borderTopLeftRadius: '6px',\r\n borderBottomLeftRadius: '6px',\r\n },\r\n\r\n '&.last-button-item': {\r\n borderTopRightRadius: '6px',\r\n borderBottomRightRadius: '6px',\r\n },\r\n },\r\n },\r\n\r\n '& .image-preview-notification-wrapper': {\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n backgroundColor: '#FFFFFF',\r\n boxShadow: '0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14)',\r\n ...shorthands.gap('4px'),\r\n ...shorthands.borderRadius('6px'),\r\n ...shorthands.padding('12px'),\r\n },\r\n },\r\n});\r\n","/* eslint-disable arrow-body-style */\r\nimport _ from 'underscore';\r\nimport React, { useCallback, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {\r\n Image,\r\n Button,\r\n mergeClasses,\r\n} from '@fluentui/react-components';\r\nimport { Dismiss20Regular } from '@fluentui/react-icons';\r\n\r\nimport { useStyles } from './style';\r\n\r\nexport const ImagePreviewView = ({\r\n imageView,\r\n url,\r\n buttonsConfig,\r\n buttonsRef,\r\n notificationConfig,\r\n}) => {\r\n const classes = useStyles();\r\n\r\n const buttonNum = buttonsConfig.length;\r\n\r\n const buttonItem = useCallback(({ config, index, key }) => {\r\n const {\r\n onClick,\r\n icon: Icon,\r\n disabled,\r\n text,\r\n } = config;\r\n\r\n const isFirstButton = index === 0;\r\n const isLastButton = index === buttonNum - 1;\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n {i18n.getString(_TL_('Images'))}\r\n
\r\n \r\n {i18n.getString(_TL_('Images that match your search for “'))}\r\n {cachedSearchText}\r\n {i18n.getString(_TL_('”'))}\r\n
\r\n \r\n {icon}\r\n {content}\r\n {\r\n _.isFunction(onDismiss) &&\r\n
\r\n );\r\n }, [notificationConfig]);\r\n\r\n return (\r\n \r\n {\r\n buttonNum > 0 &&\r\n
\r\n );\r\n};\r\n\r\nImagePreviewView.propTypes = {\r\n imageView: PropTypes.shape({}),\r\n url: PropTypes.string,\r\n buttonsConfig: PropTypes.arrayOf(PropTypes.shape({})),\r\n buttonsRef: PropTypes.shape({}),\r\n notificationConfig: PropTypes.shape({}),\r\n};\r\n\r\nImagePreviewView.defaultProps = {\r\n imageView: undefined,\r\n url: undefined,\r\n buttonsConfig: [],\r\n buttonsRef: undefined,\r\n notificationConfig: undefined,\r\n};\r\n","import { makeResetStyles, shorthands, tokens } from '@fluentui/react-components';\r\n\r\nexport const useStyles = makeResetStyles({\r\n display: 'flex',\r\n flexDirection: 'row',\r\n '& .filters-card': {\r\n width: '320px',\r\n '& .filters-list': {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n justifyContent: 'space-between',\r\n paddingLeft: '4px',\r\n paddingRight: '4px',\r\n paddingTop: '8px',\r\n paddingBottom: '8px',\r\n '& .filter-wrapper': {\r\n width: '80px',\r\n height: '100px',\r\n ...shorthands.border('none'),\r\n ...shorthands.padding('0'),\r\n backgroundColor: '#fff',\r\n '& img': {\r\n width: '100%',\r\n height: '80px',\r\n ...shorthands.borderRadius('8px'),\r\n objectFit: 'cover',\r\n },\r\n '&.selected': {\r\n '& img': {\r\n ...shorthands.outline('2px', 'solid', tokens.colorBrandBackground),\r\n outlineOffset: '1px',\r\n ...shorthands.borderRadius('8px'),\r\n },\r\n },\r\n '& .filter-name': {\r\n fontSize: '10px',\r\n textAlign: 'center',\r\n lineHeight: '14px',\r\n fontWeight: 600,\r\n ...shorthands.gap('4px'),\r\n },\r\n },\r\n },\r\n },\r\n '& .blur-card': {\r\n width: '320px',\r\n marginTop: '12px',\r\n '& .blur-header': {\r\n display: 'flex',\r\n alignItems: 'center',\r\n height: '36px',\r\n '& svg': {\r\n marginRight: '10px',\r\n marginLeft: '8px',\r\n },\r\n },\r\n '& .blur-slider': {\r\n width: '100%',\r\n '& .blur-slider-value-wrapper': {\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n alignItems: 'center',\r\n fontSize: '14px',\r\n lineHeight: '20px',\r\n '& .blur-slider-label': {\r\n marginLeft: '8px',\r\n },\r\n '& .blur-slider-value': {\r\n marginRight: '8px',\r\n },\r\n },\r\n },\r\n '& .blur-slider-control': {\r\n width: '100%',\r\n },\r\n '& .blur-switch': {\r\n '&.fui-Switch input': {\r\n width: '100%',\r\n height: '100%',\r\n },\r\n },\r\n },\r\n});\r\n","/* eslint-disable arrow-body-style */\r\nimport _ from 'underscore';\r\nimport React, { useCallback, useMemo, useRef } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\nimport {\r\n Card,\r\n CardHeader,\r\n Slider,\r\n Switch,\r\n Text,\r\n mergeClasses,\r\n} from '@fluentui/react-components';\r\nimport { MessageBar, MessageBarBody } from '@fluentui/react-message-bar';\r\nimport { VideoBackgroundEffect20Regular } from '@fluentui/react-icons';\r\n\r\nimport { ImagePreviewView } from '../image-preview-view';\r\nimport { useStyles } from './style';\r\n\r\nexport const ImageAdjustView = ({\r\n resultImage,\r\n toggleBackgroundBlur,\r\n setFilterIndex,\r\n changeBackgroundBlurLevel,\r\n imagesWithFilter,\r\n i18n,\r\n backgroundBlurEnabled,\r\n backgroundBlurLevel,\r\n goToBackgroundChangeView,\r\n filterIndex,\r\n isAIGCRegionRestricted,\r\n notificationApi,\r\n permissions,\r\n}) => {\r\n const imageAdjustViewStyles = useStyles();\r\n const isAdsStudioBackgroundChangeEnabled = _.get(permissions, ['dynamic', 'AdsStudioBackgroundChange'], false);\r\n\r\n const buttonsConfig = useMemo(() => (isAdsStudioBackgroundChangeEnabled ? [{\r\n text: i18n.getString(_TL_('Replace background')),\r\n icon: VideoBackgroundEffect20Regular,\r\n onClick: () => {\r\n if (isAIGCRegionRestricted) {\r\n notificationApi.showWarning(i18n.getString(_TL_('This feature isn\\'t available in all markets.')));\r\n } else {\r\n goToBackgroundChangeView();\r\n }\r\n },\r\n }] : []), [goToBackgroundChangeView, i18n, isAIGCRegionRestricted, notificationApi, isAdsStudioBackgroundChangeEnabled]);\r\n\r\n const timerRef = useRef(null);\r\n\r\n const handleChangeBlur = useCallback((event, data) => {\r\n if (timerRef.current) {\r\n clearTimeout(timerRef.current);\r\n }\r\n\r\n timerRef.current = setTimeout(() => {\r\n changeBackgroundBlurLevel(data.value);\r\n }, 300);\r\n }, [changeBackgroundBlurLevel]);\r\n\r\n return (\r\n \r\n {\r\n buttonsConfig.map((config, index) => (\r\n buttonItem({ config, index, key: 'image-preview-button' })\r\n ))\r\n }\r\n
\r\n }\r\n \r\n {\r\n imageView ||\r\n
\r\n {\r\n notificationConfig && notificationContent\r\n }\r\n \r\n { toggleBackgroundBlur(!backgroundBlurEnabled); }}\r\n label={backgroundBlurEnabled ? i18n.getString(_TL_('On')) : i18n.getString(_TL_('Off'))}\r\n aria-label={i18n.getString(_TL_('Background blur'))}\r\n />}\r\n />\r\n {\r\n backgroundBlurEnabled &&\r\n
\r\n {\r\n resultImage && resultImage.url &&\r\n \r\n \r\n {i18n.getString(_TL_('Filters'))}}\r\n />\r\n {\r\n imagesWithFilter && imagesWithFilter.length > 1 &&\r\n \r\n \r\n {i18n.getString(_TL_('No filters available'))}\r\n \r\n \r\n }\r\n \r\n \r\n \r\n {i18n.getString(_TL_('Background blur'))} \r\n
}\r\n action={\r\n {\r\n imagesWithFilter.map((image, index) => (\r\n setFilterIndex(index)}\r\n className={classnames('filter-wrapper', filterIndex === index && 'selected')}\r\n aria-selected={filterIndex === index}\r\n role=\"option\"\r\n aria-label={image.filter}\r\n >\r\n 
\r\n
\r\n }\r\n {\r\n imagesWithFilter && imagesWithFilter.length === 1 &&\r\n {image.filter}
\r\n \r\n ))\r\n }\r\n \r\n
\r\n }\r\n \r\n \r\n
\r\n {i18n.getString(_TL_('Blur amount'))}
\r\n {backgroundBlurLevel}
\r\n \r\n \r\n
\r\n \r\n
\r\n {\r\n isRequired &&\r\n {aspectRatioUIString}
\r\n {i18n.getString(previewTypeString)}
\r\n \r\n {i18n.getString(_TL_('Required'))}\r\n
\r\n }\r\n {\r\n !isValid &&\r\n \r\n {i18n.getString(_TL_('Minimum: {{width}} x {{height}} pixels'), {\r\n width: minSize[0],\r\n height: minSize[1],\r\n })}\r\n
\r\n );\r\n\r\n return (\r\n \r\n
: null\r\n // {\r\n // showUIBlocker &&\r\n // \r\n { switchShowRequiredOnly(data.checked); }}\r\n className={classes.showRequiredOnlyCheckbox}\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\nPlacementEditView.propTypes = {\r\n placement: PropTypes.shape({}),\r\n aspectRatioUIString: PropTypes.string.isRequired,\r\n previewTypeString: PropTypes.string.isRequired,\r\n adType: PropTypes.string.isRequired,\r\n maxCropBox: PropTypes.shape({}),\r\n previewImage: PropTypes.shape({\r\n Type: PropTypes.string,\r\n Src: PropTypes.string,\r\n Width: PropTypes.number,\r\n Height: PropTypes.number,\r\n }).isRequired,\r\n previewTexts: PropTypes.shape({}).isRequired,\r\n onSave: PropTypes.func.isRequired,\r\n onCancel: PropTypes.func.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n logger: PropTypes.shape({\r\n logTrace: PropTypes.func,\r\n }).isRequired,\r\n goToPlacementListView: PropTypes.func.isRequired,\r\n};\r\n\r\nPlacementEditView.defaultProps = {\r\n placement: null,\r\n maxCropBox: null,\r\n};\r\n","import { makeStyles, shorthands } from '@fluentui/react-components';\r\n\r\nexport const useStyles = makeStyles({\r\n container: {\r\n height: '44px',\r\n display: 'flex',\r\n alignItems: 'center',\r\n ...shorthands.padding(0, '16px'),\r\n },\r\n\r\n baseSaveButton: {\r\n minWidth: '110px',\r\n },\r\n});\r\n","import _ from 'underscore';\r\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\r\nimport { createPortal } from 'react-dom';\r\nimport PropTypes from 'prop-types';\r\nimport {\r\n Button,\r\n SplitButton,\r\n Menu,\r\n MenuTrigger,\r\n MenuList,\r\n MenuItem,\r\n MenuPopover,\r\n Tooltip,\r\n} from '@fluentui/react-components';\r\nimport { useStyles } from './style';\r\n\r\nexport const SaveButtonInSummaryBar = ({\r\n i18n,\r\n onSaveDirectly,\r\n onSaveAsCopy,\r\n isSaveAsCopyDisabled,\r\n isSaveDisabled,\r\n haveCroppingTasks,\r\n isBaseButton,\r\n baseButtonText,\r\n onBaseButtonClick,\r\n saveButtonTooltip,\r\n}) => {\r\n const classes = useStyles();\r\n\r\n const [summaryBar, setSummaryBar] = useState(null);\r\n const [open, setOpen] = useState(false);\r\n\r\n const onOpenChange = useCallback((e, data) => {\r\n setOpen(data.open);\r\n }, []);\r\n\r\n const renderBaseSaveButton = useCallback(() => (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {isBaseButton ? baseSaveButtonWithTooltip : splitSaveButton}\r\n
\r\n ), [classes.container, haveCroppingTasks, isBaseButton, baseSaveButtonWithTooltip, splitSaveButton]);\r\n\r\n useEffect(() => {\r\n const timer = setInterval(() => {\r\n try {\r\n const summaryBarCustomizeEle = document.getElementById('ad-studio-summary-bar-customize-container');\r\n if (summaryBarCustomizeEle) {\r\n setSummaryBar(summaryBarCustomizeEle);\r\n clearInterval(timer);\r\n }\r\n } catch (error) {\r\n clearInterval(timer);\r\n }\r\n }, 500);\r\n return () => clearInterval(timer);\r\n }, []);\r\n\r\n return (\r\n summaryBar ? createPortal(\r\n customizedContent,\r\n summaryBar\r\n ) : null\r\n );\r\n};\r\n\r\nSaveButtonInSummaryBar.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n onSaveDirectly: PropTypes.func.isRequired,\r\n onSaveAsCopy: PropTypes.func.isRequired,\r\n isSaveAsCopyDisabled: PropTypes.bool,\r\n isSaveDisabled: PropTypes.bool,\r\n haveCroppingTasks: PropTypes.bool,\r\n isBaseButton: PropTypes.bool,\r\n baseButtonText: PropTypes.string,\r\n onBaseButtonClick: PropTypes.func,\r\n saveButtonTooltip: PropTypes.string,\r\n};\r\n\r\nSaveButtonInSummaryBar.defaultProps = {\r\n isSaveAsCopyDisabled: false,\r\n isSaveDisabled: false,\r\n haveCroppingTasks: false,\r\n isBaseButton: false,\r\n baseButtonText: undefined,\r\n onBaseButtonClick: _.noop,\r\n saveButtonTooltip: undefined,\r\n};\r\n","import React from 'react';\r\n\r\nexport const UnselectedAdPlacementSVGIcon = () => (\r\n \r\n);\r\n","import React from 'react';\r\n\r\nexport const SelectedAdPlacementSVGIcon = () => (\r\n \r\n);\r\n","import { makeStyles, shorthands } from '@fluentui/react-components';\r\n\r\nexport const useStyles = makeStyles({\r\n editPageNavigation: {\r\n ...shorthands.padding('8px'),\r\n },\r\n tabList: {\r\n display: 'flex',\r\n ...shorthands.gap('12px'),\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n\r\n '& >div': {\r\n width: '100%',\r\n },\r\n },\r\n tabItemWrapper: {\r\n '&.selected': {\r\n '& .fui-Tab': {\r\n backgroundColor: 'rgba(246, 246, 246, 0.50)',\r\n ...shorthands.borderRadius('3px'),\r\n\r\n '::after': {\r\n color: '#005FB8',\r\n },\r\n\r\n '& .fui-Tab__icon, .fui-Tab__content': {\r\n color: '#005FB8',\r\n },\r\n },\r\n },\r\n },\r\n tabItem: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n width: '100%',\r\n\r\n '::after': {\r\n height: '18px',\r\n alignSelf: 'center',\r\n },\r\n\r\n '&:hover::before': {\r\n height: '18px',\r\n alignSelf: 'center',\r\n },\r\n\r\n '& .fui-Tab__content': {\r\n fontSize: '12px',\r\n '-webkit-box-orient': 'vertical',\r\n ...shorthands.overflow('hidden'),\r\n display: '-webkit-box',\r\n wordBreak: 'break-word',\r\n width: '61px',\r\n },\r\n\r\n '& .fui-Tab__content--reserved-space': {\r\n display: 'none',\r\n },\r\n },\r\n});\r\n","import React, { useCallback, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { TabList, Tab, mergeClasses, Tooltip } from '@fluentui/react-components';\r\nimport { WandFilled } from '@fluentui/react-icons';\r\n\r\nimport { UnselectedAdPlacementSVGIcon } from '../../media/unselected-ad-placement-svg-icon';\r\nimport { SelectedAdPlacementSVGIcon } from '../../media/selected-ad-placement-svg-icon';\r\nimport { ViewName } from '../../model/utils';\r\nimport { useStyles } from './style';\r\n\r\nconst AdPlacementId = 'edit-page-ad-placement-view';\r\nconst AdjustId = 'edit-page-adjust-view';\r\n\r\nexport const NavigationView = ({\r\n i18n,\r\n currentView,\r\n setCurrentView,\r\n isAdjustButtonDisabled,\r\n adjustButtonTooltip,\r\n updateAdPlacementImage,\r\n}) => {\r\n const classes = useStyles();\r\n\r\n const isAdPlacementSelected = useCallback(() => (\r\n currentView === ViewName.PlacementListView || currentView === ViewName.PlacementEditView\r\n ), [currentView]);\r\n\r\n const isAdjustSelected = useCallback(() => (\r\n currentView === ViewName.ImageAdjustView || currentView === ViewName.BackgroundChangeView\r\n ), [currentView]);\r\n\r\n const selectedItemId = useMemo(() => {\r\n if (isAdPlacementSelected()) {\r\n return AdPlacementId;\r\n } else if (isAdjustSelected()) {\r\n return AdjustId;\r\n }\r\n return null;\r\n }, [isAdPlacementSelected, isAdjustSelected]);\r\n\r\n const handleAdPlacementClick = useCallback(() => {\r\n setCurrentView(ViewName.PlacementListView);\r\n updateAdPlacementImage();\r\n }, [setCurrentView, updateAdPlacementImage]);\r\n\r\n const handleAdjustClick = useCallback(() => {\r\n setCurrentView(ViewName.ImageAdjustView);\r\n }, [setCurrentView]);\r\n\r\n const items = useMemo(() => ([\r\n {\r\n id: AdPlacementId,\r\n name: _TL_('Ad placement'),\r\n onClick: handleAdPlacementClick,\r\n icon: \r\n \r\n {items.map(item => (\r\n \r\n
\r\n );\r\n};\r\n\r\nNavigationView.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n currentView: PropTypes.string.isRequired,\r\n setCurrentView: PropTypes.func.isRequired,\r\n isAdjustButtonDisabled: PropTypes.bool,\r\n adjustButtonTooltip: PropTypes.string,\r\n updateAdPlacementImage: PropTypes.func.isRequired,\r\n};\r\n\r\nNavigationView.defaultProps = {\r\n isAdjustButtonDisabled: false,\r\n adjustButtonTooltip: undefined,\r\n};\r\n","import { makeResetStyles, tokens, shorthands } from '@fluentui/react-components';\r\n\r\nexport const useBackgroundChangeStyles = makeResetStyles({\r\n display: 'flex',\r\n flexDirection: 'row',\r\n height: 'calc(100% - 8px)',\r\n '& .control-section': {\r\n maxWidth: '320px',\r\n backgroundColor: tokens.colorNeutralBackground1,\r\n boxShadow: '0px 2px 4px 0px rgba(0, 0, 0, 0.14), 0px 0px 2px 0px rgba(0, 0, 0, 0.12)',\r\n borderRadius: '8px',\r\n width: '100%',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'flex-start',\r\n ...shorthands.padding('12px', '0px'),\r\n },\r\n '& .back-to-adjust': {\r\n ...shorthands.padding('0px', '16px'),\r\n '& button': {\r\n paddingLeft: '0px',\r\n minWidth: 'unset',\r\n },\r\n '& span': {\r\n width: '10px',\r\n height: '10px',\r\n },\r\n },\r\n '& .background-change-tabs': {\r\n ...shorthands.padding('0px', '16px'),\r\n '& [role=\"tablist\"]': {\r\n minWidth: '170px',\r\n flexWrap: 'wrap',\r\n display: 'flex',\r\n },\r\n '& [role=\"tablist\"] button:first-of-type': {\r\n paddingLeft: '0px',\r\n },\r\n },\r\n '& .image-section': {\r\n display: 'flex',\r\n ...shorthands.flex(1),\r\n position: 'relative',\r\n paddingTop: '48px',\r\n '& .target-image-wrapper': {\r\n width: '100%',\r\n backgroundImage: 'linear-gradient(45deg, #EBEBEB 25%, transparent 25%), linear-gradient(-45deg, #EBEBEB 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #EBEBEB 75%), linear-gradient(-45deg, transparent 75%, #EBEBEB 75%)',\r\n backgroundSize: '40px 40px',\r\n backgroundPosition: '0px 0px, 0px 20px, 20px -20px, -20px 0px',\r\n backgroundColor: '#FAFAFA',\r\n position: 'relative',\r\n '& .loading-mask': {\r\n position: 'absolute',\r\n width: '100%',\r\n height: '100%',\r\n opacity: 0.4,\r\n backgroundColor: '#E6E6E6',\r\n backgroundImage: 'linear-gradient(90deg, rgba(255, 255, 255, 0.00) 0%, #47CFFA 50%, #B47CF8 100%)',\r\n top: 0,\r\n left: 0,\r\n },\r\n },\r\n '& .notification-content': {\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n ...shorthands.gap('4px'),\r\n },\r\n '& .dismiss-icon': {\r\n color: tokens.colorStatusDangerForeground1,\r\n },\r\n '& .check-mark-icon': {\r\n color: '#107C10',\r\n },\r\n '& .spinner-icon': {\r\n width: '16px',\r\n animationDuration: '1s',\r\n animationIterationCount: 'infinite',\r\n animationTimingFunction: 'linear',\r\n animationName: [{\r\n from: { transform: 'rotate(0deg)' },\r\n to: { transform: 'rotate(360deg)' },\r\n }],\r\n },\r\n },\r\n '& .prompt-control': {\r\n width: '100%',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'flex-start',\r\n ...shorthands.padding('0px', '16px'),\r\n '& .loading-section': {\r\n width: '100%',\r\n marginTop: '16px',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n ...shorthands.gap('8px'),\r\n color: tokens.colorNeutralForeground3Hover,\r\n },\r\n '& .prompt-example': {\r\n '& .example-image-list-label': {\r\n marginTop: '11px',\r\n color: tokens.colorNeutralForeground3,\r\n },\r\n },\r\n '& .background-change-prompt': {\r\n marginTop: '24px',\r\n width: '100%',\r\n '& .prompt-title': {\r\n fontSize: '14px',\r\n fontWeight: '600',\r\n marginBottom: '8px',\r\n },\r\n '& .prompt-editor': {\r\n position: 'relative',\r\n '& .prompt-textarea': {\r\n width: '100%',\r\n borderRadius: '8px',\r\n paddingBottom: '42px',\r\n paddingTop: '6px',\r\n ...shorthands.overflow('hidden'),\r\n '& textarea': {\r\n minHeight: '75px',\r\n },\r\n '&::after': {\r\n height: '4px',\r\n clipPath: 'none',\r\n backgroundColor: '#464feb',\r\n borderColor: '#464feb',\r\n },\r\n },\r\n '& .action-bar': {\r\n position: 'absolute',\r\n bottom: '12px',\r\n right: '12px',\r\n },\r\n },\r\n },\r\n },\r\n});\r\n","import { makeResetStyles } from '@fluentui/react-components';\r\n\r\nexport const useObjectSelectionStyles = makeResetStyles({\r\n '& .image-wrapper': {\r\n position: 'relative',\r\n width: '100%',\r\n '& img': {\r\n width: '100%',\r\n objectFit: 'contain',\r\n },\r\n '& div': {\r\n width: '100%',\r\n },\r\n '& .original-image': {\r\n },\r\n '& .cover-original-image': {\r\n backgroundImage: 'linear-gradient(90deg, rgba(70, 79, 235, 0.75) 0%, rgba(180, 124, 248, 0.75) 100%)',\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n right: 0,\r\n bottom: 0,\r\n },\r\n '& .loading-segmentations-image': {\r\n backgroundImage: 'linear-gradient(90deg, rgba(70, 79, 235, 0.75) 0%, rgba(180, 124, 248, 0.75) 100%)',\r\n animationDuration: '3s',\r\n animationIterationCount: 'infinite',\r\n animationTimingFunction: 'linear',\r\n animationName: [{\r\n from: { backgroundPosition: '0%' }, // The whole background is 800% and we use only the 0-7 range\r\n to: { backgroundPosition: '100%' },\r\n }],\r\n position: 'absolute',\r\n backgroundSize: '400%',\r\n top: 0,\r\n left: 0,\r\n right: 0,\r\n bottom: 0,\r\n },\r\n '& .selected-image': {\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n },\r\n '& .border-image': {\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n },\r\n '& .highlighted-image': {\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n },\r\n },\r\n});\r\n\r\n","import React, { useRef, useEffect, useCallback } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {\r\n mergeClasses,\r\n Dialog,\r\n DialogTrigger,\r\n DialogSurface,\r\n DialogTitle,\r\n DialogContent,\r\n DialogBody,\r\n DialogActions,\r\n Button,\r\n} from '@fluentui/react-components';\r\nimport {\r\n Dismiss20Regular,\r\n} from '@fluentui/react-icons';\r\nimport {\r\n HiddenDivForAnnounce,\r\n ObjectSelectionImageView,\r\n} from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\nimport { useObjectSelectionStyles } from './style';\r\n\r\nconst DialogForObjectSelection = (props) => {\r\n const {\r\n i18n,\r\n open,\r\n setOpen,\r\n updateSubject,\r\n objectSelectionError,\r\n } = props;\r\n\r\n return (\r\n \r\n
\r\n ))}\r\n \r\n {item.tooltip ?\r\n \r\n {tabItem(item)}\r\n :\r\n tabItem(item)\r\n }\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\n\r\nObjectSelectionView.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n originalImageUrl: PropTypes.string.isRequired,\r\n originalImageHeight: PropTypes.number.isRequired,\r\n originalImageWidth: PropTypes.number.isRequired,\r\n getMaskValueAtPoint: PropTypes.func.isRequired,\r\n logger: PropTypes.shape({\r\n logTrace: PropTypes.func,\r\n }).isRequired,\r\n isFetchingSegmentations: PropTypes.bool.isRequired,\r\n};\r\n\r\nObjectSelectionView.defaultProps = {\r\n};\r\n","import { makeStyles, shorthands } from '@fluentui/react-components';\r\n\r\nexport const useExampleImageListStyles = makeStyles({\r\n exampleImageList: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n width: '100%',\r\n ...shorthands.overflow('hidden'),\r\n ...shorthands.gap('6px'),\r\n },\r\n});\r\n\r\nexport const useExampleImageCellStyles = makeStyles({\r\n exampleImageCell: {\r\n width: 'calc(50% - 3px)', // 3px is half the gap between cells\r\n ...shorthands.borderRadius('6px'),\r\n ...shorthands.overflow('hidden'),\r\n position: 'relative',\r\n\r\n '& img': {\r\n width: '100%',\r\n height: '100%',\r\n objectFit: 'cover',\r\n },\r\n\r\n '&:focus .example-image-list-cell-overlay, &:hover .example-image-list-cell-overlay': {\r\n visibility: 'visible',\r\n animationDuration: '0.2s, 0.5s',\r\n animationTimingFunction: 'ease-in-out, linear',\r\n animationName: [{\r\n from: { transform: 'translateY(100%)' },\r\n to: { transform: 'translateY(0%)' },\r\n }, {\r\n from: { opacity: 0 },\r\n to: { opacity: 1 },\r\n }],\r\n },\r\n\r\n '& .example-image-list-cell-overlay': {\r\n position: 'absolute',\r\n width: '100%',\r\n height: '100%',\r\n top: 0,\r\n left: 0,\r\n right: 0,\r\n bottom: 0,\r\n display: 'flex',\r\n flexDirection: 'column',\r\n visibility: 'hidden',\r\n opacity: 0.8,\r\n\r\n '& .overlay-gradient': {\r\n ...shorthands.flex(1),\r\n alignSelf: 'stretch',\r\n backgroundImage: 'linear-gradient(180deg, rgba(49, 34, 34, 0.20) 44.79%, rgba(49, 34, 34, 0.90) 76.04%, #312222 100%);',\r\n },\r\n\r\n '& .overlay-solid': {\r\n backgroundColor: '#312222',\r\n height: '25%',\r\n flexShrink: 0,\r\n alignSelf: 'stretch',\r\n },\r\n\r\n '& .example-prompt-template': {\r\n width: '100%',\r\n height: '100%',\r\n minWidth: '100px',\r\n minHeight: '100px',\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n right: 0,\r\n bottom: 0,\r\n ...shorthands.padding('8px'),\r\n\r\n color: '#FFF',\r\n fontSize: 14,\r\n fontStyle: 'normal',\r\n fontWeight: 600,\r\n lineHeight: 'normal',\r\n '& .multi-line-hidden-text': {\r\n top: 0,\r\n left: 0,\r\n right: 0,\r\n bottom: 0,\r\n ...shorthands.padding('8px'),\r\n },\r\n },\r\n },\r\n },\r\n});\r\n\r\n","import {\r\n ExampleImageListWithoutStyle,\r\n} from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\nimport {\r\n withOverridableStyles,\r\n} from '@bingads-webui-campaign-react/ads-studio-shared-components';\r\nimport { useExampleImageListStyles } from './style';\r\n\r\nexport const ExampleImageList = withOverridableStyles(ExampleImageListWithoutStyle, useExampleImageListStyles);\r\n","import {\r\n ExampleImageCellWithoutStyle,\r\n} from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\nimport {\r\n withOverridableStyles,\r\n} from '@bingads-webui-campaign-react/ads-studio-shared-components';\r\nimport { useExampleImageCellStyles } from './style';\r\n\r\nexport const ExampleImageCell = withOverridableStyles(ExampleImageCellWithoutStyle, useExampleImageCellStyles);\r\n","import { makeStyles, shorthands, tokens } from '@fluentui/react-components';\r\n\r\nexport const getGenerationHistoryListStyles = makeStyles({\r\n paddleBtn: {\r\n ...shorthands.borderRadius('99px'),\r\n color: tokens.colorNeutralForeground2BrandHover,\r\n boxShadow: '0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13)',\r\n marginRight: '2px',\r\n },\r\n paddleBtnRight: {\r\n ...shorthands.borderRadius('99px'),\r\n color: tokens.colorNeutralForeground2BrandHover,\r\n boxShadow: '0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13)',\r\n },\r\n historyListRoot: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'flex-start',\r\n alignSelf: 'stretch',\r\n marginTop: '24px',\r\n paddingTop: '16px',\r\n ...shorthands.borderTop('1px', 'solid', '#DFDFDF'),\r\n ...shorthands.overflow('hidden'),\r\n\r\n '& .history-list-title-container': {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n marginBottom: '5px',\r\n alignItems: 'center',\r\n\r\n '& .history-icon': {\r\n display: 'flex',\r\n alignItems: 'center',\r\n width: '16px',\r\n height: '16px',\r\n color: tokens.colorNeutralForeground3,\r\n },\r\n '& .history-title': {\r\n marginLeft: '4px',\r\n fontSize: '14px',\r\n lineHeight: '20px',\r\n fontWeight: 600,\r\n color: tokens.colorNeutralForeground3,\r\n },\r\n },\r\n\r\n '& .history-list-container': {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n alignItems: 'center',\r\n width: '100%',\r\n position: 'relative',\r\n '& .right-icon-hint': {\r\n display: 'inline-block',\r\n position: 'absolute',\r\n backgroundImage: 'linear-gradient(270deg, #FFFFFF 0%, rgba(255, 255, 255, 0.927755) 18.23%, rgba(255, 255, 255, 0.776042) 48.44%, rgba(250, 249, 255, 0.5) 78.24%, rgba(255, 255, 255, 0) 100%)',\r\n width: '20px',\r\n height: '80px',\r\n right: '32px',\r\n },\r\n\r\n '& .left-icon-hint': {\r\n display: 'inline-block',\r\n position: 'absolute',\r\n backgroundImage: 'linear-gradient(270deg, #FFFFFF 0%, rgba(255, 255, 255, 0.927755) 18.23%, rgba(255, 255, 255, 0.776042) 48.44%, rgba(250, 249, 255, 0.5) 78.24%, rgba(255, 255, 255, 0) 100%)',\r\n width: '30px',\r\n height: '80px',\r\n left: '34px',\r\n transform: 'rotate(-180deg)',\r\n },\r\n\r\n '& .history-list-images-container': {\r\n flexGrow: 1,\r\n display: 'flex',\r\n flexDirection: 'row',\r\n alignItems: 'center',\r\n ...shorthands.overflow('hidden'),\r\n width: '100%',\r\n\r\n '& .history-list-images': {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n flexDirection: 'row',\r\n alignItems: 'center',\r\n position: 'relative',\r\n },\r\n '& .history-item-root': {\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n width: '96px',\r\n height: '86px',\r\n ...shorthands.borderRadius('9px'),\r\n ...shorthands.border('2px', 'solid', 'white'),\r\n\r\n '&.selected': {\r\n ...shorthands.border('2px', 'solid', tokens.colorBrandForeground1),\r\n },\r\n\r\n '& .history-item': {\r\n width: '90px',\r\n height: '80px',\r\n ...shorthands.borderRadius('6px'),\r\n ...shorthands.overflow('hidden'),\r\n\r\n '& img': {\r\n width: '100%',\r\n height: '100%',\r\n objectFit: 'cover',\r\n },\r\n },\r\n },\r\n },\r\n },\r\n },\r\n});\r\n","import React, { useCallback } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {\r\n withOverridableStyles,\r\n HistoryListImages,\r\n} from '@bingads-webui-campaign-react/ads-studio-shared-components';\r\nimport {\r\n mergeClasses,\r\n} from '@fluentui/react-components';\r\nimport {\r\n History20Regular,\r\n} from '@fluentui/react-icons';\r\n\r\nimport { getGenerationHistoryListStyles } from './generation-history-list-styles';\r\n\r\n\r\nconst HistoryListImpl = ({\r\n selectedIndex,\r\n historyList,\r\n onSelectHistory,\r\n i18n,\r\n classes,\r\n}) => {\r\n const onClick = useCallback((index) => {\r\n onSelectHistory(historyList[index], index);\r\n }, [historyList, onSelectHistory]);\r\n\r\n const onKeyDown = useCallback((index, ev) => {\r\n if (ev.keyCode === 'Enter') {\r\n onClick(index);\r\n }\r\n }, [onClick]);\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nHistoryListImpl.propTypes = {\r\n selectedIndex: PropTypes.number,\r\n historyList: PropTypes.arrayOf(PropTypes.shape({})),\r\n onSelectHistory: PropTypes.func,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n classes: PropTypes.shape({}).isRequired,\r\n};\r\n\r\nHistoryListImpl.defaultProps = {\r\n selectedIndex: -1,\r\n historyList: [],\r\n onSelectHistory: () => {},\r\n};\r\n\r\nexport const GenerationHistoryList = withOverridableStyles(HistoryListImpl, getGenerationHistoryListStyles);\r\n","import React from 'react';\r\nimport { Label, Text, useId } from '@fluentui/react-components';\r\nimport {\r\n LoadingIndicator, PromptEditor, MAX_PROMPT_LENGTH,\r\n} from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\nimport { ExampleImageList, ExampleImageCell } from '../example-image';\r\nimport { GenerationHistoryList } from '../history-list';\r\n\r\nexport const PromptControl = (props) => {\r\n const {\r\n i18n,\r\n generate,\r\n prompt,\r\n setPrompt,\r\n isGenerating,\r\n onSelectExampleImage,\r\n MultiLineEllipsisText,\r\n historyList,\r\n onSelectHistory,\r\n selectedHistoryIndex,\r\n disabled,\r\n } = props;\r\n\r\n const exampleImageId = useId('example-image-list');\r\n\r\n return (\r\n \r\n
\r\n {i18n.getString(_TL_('History'))}
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n","import { makeStyles, shorthands } from '@fluentui/react-components';\r\n\r\nexport const getImageShimmerStyles = makeStyles({\r\n imageShimmerRoot: {\r\n display: 'flex',\r\n justifyContent: 'flex-start',\r\n alignItems: 'center',\r\n ...shorthands.overflow('hidden'),\r\n backgroundSize: '400% 100%',\r\n animationDuration: '1.5s',\r\n animationTimingFunction: 'ease-in-out',\r\n animationDirection: 'alternate',\r\n animationIterationCount: 'infinite',\r\n animationName: [{\r\n from: { backgroundPosition: '0%' },\r\n to: { backgroundPosition: '100%' },\r\n }],\r\n },\r\n});\r\n\r\n","import classNames from 'classnames';\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {\r\n withOverridableStyles,\r\n} from '@bingads-webui-campaign-react/ads-studio-shared-components';\r\nimport { getImageShimmerStyles } from './style';\r\n\r\nconst ImageShimmerImpl = ({ className, classes }) => (\r\n \r\n);\r\n\r\nImageShimmerImpl.propTypes = {\r\n className: PropTypes.string,\r\n classes: PropTypes.shape({}).isRequired,\r\n};\r\n\r\nImageShimmerImpl.defaultProps = {\r\n className: undefined,\r\n};\r\n\r\nexport const ImageShimmer = withOverridableStyles(ImageShimmerImpl, getImageShimmerStyles);\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { makeStyles, mergeClasses } from '@fluentui/react-components';\r\nimport { ImageShimmer } from './image-shimmer';\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n backgroundImage: 'linear-gradient(45deg, #EBEBEB 25%, transparent 25%), linear-gradient(-45deg, #EBEBEB 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #EBEBEB 75%), linear-gradient(-45deg, transparent 75%, #EBEBEB 75%)',\r\n backgroundSize: '40px 40px',\r\n backgroundPositionX: '0px, 0px, 20px, -20px',\r\n backgroundPositionY: '0px, 20px, -20px, 0px',\r\n backgroundColor: '#FAFAFA',\r\n position: 'relative',\r\n lineHeight: 0,\r\n },\r\n mask: {\r\n position: 'absolute',\r\n width: '100%',\r\n height: '100%',\r\n opacity: 0.4,\r\n backgroundColor: '#E6E6E6',\r\n backgroundImage: 'linear-gradient(90deg, rgba(255, 255, 255, 0.00) 0%, #47CFFA 50%, #B47CF8 100%)',\r\n top: 0,\r\n left: 0,\r\n },\r\n});\r\n\r\n\r\nexport const ImageWithShimmer = ({ targetImage, showShimmer, className }) => {\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n MAX_PROMPT_LENGTH || disabled}\r\n placeholder={i18n.getString(_TL_('Describe the background you want. You can use the examples on the below for inspiration.'))}\r\n />\r\n
\r\n {isGenerating &&\r\n \r\n {i18n.getString(_TL_('Creating background images with AI'))} \r\n
}\r\n {!isGenerating && (\r\n \r\n \r\n
)}\r\n {!isGenerating && historyList && historyList.length > 0 && (\r\n \r\n 
\r\n {showShimmer &&
\r\n );\r\n};\r\n\r\nImageWithShimmer.propTypes = {\r\n targetImage: PropTypes.string.isRequired,\r\n showShimmer: PropTypes.bool,\r\n className: PropTypes.string,\r\n};\r\n\r\nImageWithShimmer.defaultProps = {\r\n showShimmer: false,\r\n className: '',\r\n};\r\n","import React, { useCallback, useEffect, useMemo, useState } from 'react';\r\nimport { Text } from '@fluentui/react-components';\r\nimport {\r\n DismissCircle16Filled,\r\n Checkmark20Regular,\r\n Dismiss20Regular,\r\n ImageEdit20Regular,\r\n} from '@fluentui/react-icons';\r\nimport {\r\n MAX_PROMPT_LENGTH,\r\n HiddenDivForAnnounce,\r\n} from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\n\r\nimport { ObjectSelectionView } from './object-selection';\r\nimport { PromptControl } from './prompt-control';\r\nimport { useObjectSelection } from '../../model/background-change/use-object-selection';\r\nimport { ImageWithShimmer } from '../../../image-with-shimmer';\r\n\r\nconst HISTORY_LIST_MAX_LENGTH = 10;\r\n\r\n\r\nconst ImageToUpdate = (props) => {\r\n const {\r\n targetImage,\r\n imageUrlWithoutBackground,\r\n i18n,\r\n } = props;\r\n\r\n return (\r\n <>\r\n \r\n {message} \r\n {others || null}\r\n
\r\n );\r\n return ({\r\n icon: \r\n
\r\n {!showColorPicker &&\r\n \r\n {'EyeDropper' in window ?\r\n \r\n
\r\n \r\n
\r\n : null\r\n }\r\n \r\n {i18n.getString(_TL_('Colors used in the image'))} \r\n {\r\n wrappedDraw(colorValue, ariaLabel);\r\n logSetColorHelper('the last selected color', { color: ariaLabel || colorValue });\r\n }}\r\n ariaLabel={i18n.getString(_TL_('Last used color'))}\r\n />\r\n
\r\n {showColorPicker &&\r\n \r\n \r\n \r\n {showColorPicker ?
\r\n \r\n \r\n {\r\n wrappedDraw(colorValue, ariaLabel);\r\n logSetColorHelper('the selected color', { color: ariaLabel || colorValue });\r\n }}\r\n ariaLabel={i18n.getString(_TL_('Selected color'))}\r\n />\r\n
\r\n \r\n {\r\n debouncedDraw(colorObject.str);\r\n logSetColorHelper('the color picker color', { color: colorObject.str });\r\n setAnnouncedText(i18n.getString(_TL_('Set the color to {{colorValue}}'), { colorValue: colorObject.str }));\r\n }}\r\n alphaType=\"none\"\r\n showPreview\r\n strings={{\r\n // By default, the sliders will use the text field labels as their aria labels.\r\n // Previously this example had more detailed instructions in the labels, but this is\r\n // a bad practice and not recommended. Labels should be concise, and match visible text when possible.\r\n hueAriaLabel: i18n.getString(_TL_('Hue')),\r\n alphaLabel: i18n.getString(_TL_('Alpha')),\r\n greenLabel: i18n.getString(_TL_('Green')),\r\n blueLabel: i18n.getString(_TL_('Blue')),\r\n redLabel: i18n.getString(_TL_('Red')),\r\n }}\r\n />\r\n
}\r\n \r\n {i18n.getString(_TL_('Suggestions'))} \r\n
}\r\n \r\n {\r\n colors.map(item => (\r\n {\r\n wrappedDraw(colorValue, ariaLabel);\r\n logSetColorHelper('the suggested color', { color: ariaLabel || colorValue });\r\n }}\r\n ariaLabel={i18n.getString(item.label)}\r\n />\r\n ))\r\n }\r\n
\r\n \r\n {i18n.getString(_TL_('We\\'ve removed the background. '))} \r\n {i18n.getString(_TL_('You can refine the subject area to keep or remove certain subjects and objects by selecting Edit subject area.'))} \r\n
\r\n );\r\n return ({\r\n icon: \r\n \r\n \r\n {i18n.getString(_TL_('Note that AI-generated content may not always be accurate. Please double-check, crop, and verify AI-generated content before using it.'))}\r\n \r\n \r\n
);\r\n};\r\n\r\n\r\nBackgroundChangeDisclaimer.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n};\r\n\r\nBackgroundChangeDisclaimer.defaultProps = {\r\n};\r\n","import React, { useEffect } from 'react';\r\nimport { Button, Tab,\r\n TabList, mergeClasses } from '@fluentui/react-components';\r\nimport {\r\n ArrowLeftFilled,\r\n ColorBackground20Regular,\r\n} from '@fluentui/react-icons';\r\nimport {\r\n HollowSparkleSVGIcon,\r\n} from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\nimport { setClarityTag } from '@bingads-webui-universal/clarity';\r\nimport { usePageActiveTimeTracker } from '@bingads-webui-campaign-react/common-hooks';\r\n\r\nimport { ImagePreviewView } from '../image-preview-view';\r\nimport { useBackgroundChangeStyles } from './style';\r\nimport { tabs, useControlViewFactoryWithState } from './state';\r\nimport { BackgroundChangeDisclaimer } from '../../../background-change-disclaimer';\r\n\r\nexport const BackgroundChangeView = (props) => {\r\n const {\r\n i18n,\r\n MultiLineEllipsisText,\r\n goToImageAdjustView,\r\n imageUrlWithoutBackground,\r\n drawColorBackground,\r\n imageUrlWithColoredBackground,\r\n imageUrlWithGeneratedBackground,\r\n setImageUrlWithGeneratedBackground,\r\n logger,\r\n originalImage,\r\n resultImage,\r\n getMaskValueAtPoint,\r\n segmentationMasks,\r\n setSelectedImageSrc,\r\n selectedImageSrc, // the image after user selected objects\r\n selectedMasks,\r\n setSelectedMasks,\r\n maskValues,\r\n fetchSegmentationError,\r\n isFetchingSegmentations,\r\n getSegmentations,\r\n generateBackground,\r\n onApplyImage,\r\n } = props;\r\n\r\n const classes = useBackgroundChangeStyles();\r\n\r\n const {\r\n colorControlView,\r\n promptControlView,\r\n buttonsConfig,\r\n imageView,\r\n notificationConfig,\r\n selectedTab,\r\n onTabSelect,\r\n buttonsRef,\r\n isRemovingBackground,\r\n } = useControlViewFactoryWithState({\r\n i18n,\r\n logger,\r\n originalImage,\r\n resultImage,\r\n goToImageAdjustView,\r\n getSegmentations,\r\n generateBackground,\r\n drawColorBackground,\r\n imageUrlWithColoredBackground,\r\n imageUrlWithoutBackground,\r\n imageUrlWithGeneratedBackground,\r\n setImageUrlWithGeneratedBackground,\r\n getMaskValueAtPoint,\r\n segmentationMasks,\r\n setSelectedImageSrc,\r\n selectedImageSrc,\r\n selectedMasks,\r\n setSelectedMasks,\r\n maskValues,\r\n fetchSegmentationError,\r\n isFetchingSegmentations,\r\n MultiLineEllipsisText,\r\n applyImage: onApplyImage,\r\n });\r\n\r\n usePageActiveTimeTracker(logger, 'background change:');\r\n\r\n useEffect(() => {\r\n setClarityTag({ LoadAdsStudioBackgroundRemovalPage: true });\r\n }, []);\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n","import { makeStyles, shorthands } from '@fluentui/react-components';\r\nimport backgroundImg from '../../media/updateBg.png';\r\n\r\nexport const useStyles = makeStyles({\r\n container: {\r\n maxWidth: '500px',\r\n\r\n '& .dialog-body': {\r\n ...shorthands.overflow('hidden'),\r\n },\r\n\r\n '& .update-image': {\r\n width: '324px',\r\n height: '189px',\r\n backgroundSize: '100% 100%',\r\n backgroundImage: `url(\"${backgroundImg}\")`,\r\n ...shorthands.margin('4px', 'auto', '16px', 'auto'),\r\n },\r\n\r\n '& .tip-title': {\r\n fontFamily: 'Segoe UI',\r\n fontWeight: '600',\r\n fontSize: '16px',\r\n lineHeight: '20px',\r\n },\r\n\r\n '& .tip-info': {\r\n ...shorthands.margin('12px', '0', '16px', '0'),\r\n fontFamily: 'Segoe UI',\r\n fontWeight: '400',\r\n fontSize: '14px',\r\n lineHeight: '20px',\r\n color: '#605E5C',\r\n ...shorthands.overflow('hidden'),\r\n },\r\n\r\n '& .error-tip': {\r\n marginBottom: '16px',\r\n\r\n '& .alert.alert-danger': {\r\n ...shorthands.padding('8px'),\r\n },\r\n\r\n '& .alert__icon': {\r\n color: '#A80000',\r\n width: '16px',\r\n height: '16px',\r\n fontSize: '16px',\r\n lineHeight: '16px',\r\n marginRight: '8px',\r\n },\r\n },\r\n },\r\n});\r\n","import React, { useCallback, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\n\r\nimport {\r\n Dialog,\r\n DialogTrigger,\r\n DialogSurface,\r\n DialogTitle,\r\n DialogContent,\r\n DialogBody,\r\n DialogActions,\r\n Button,\r\n} from '@fluentui/react-components';\r\nimport { Dismiss20Regular, DismissCircle20Regular } from '@fluentui/react-icons';\r\n\r\nimport { useStyles } from './style';\r\n\r\nexport const UpdateConfirmDialog = ({\r\n i18n,\r\n open,\r\n setOpen,\r\n onSave,\r\n invalidRatioList,\r\n}) => {\r\n const classes = useStyles();\r\n\r\n // Simplify the logic for generating error info.\r\n // Currently, error info will not be empty only for multimedia ads since the minsize limitation.\r\n const errorTip = useMemo(() => {\r\n if (invalidRatioList.length === 1) {\r\n return i18n.getString(\r\n _TL_('Your image doesn\\'t meet the size requirements for {{ratio}} {{previewName}} ads. This means that any multimedia ads using this image won\\'t serve in that ad placement'),\r\n {\r\n ratio: invalidRatioList[0].aspectRatioAsRatio,\r\n previewName: i18n.getString(invalidRatioList[0].previewTypeString),\r\n }\r\n );\r\n } else if (invalidRatioList.length === 2) {\r\n return i18n.getString(\r\n _TL_('Your image doesn\\'t meet the size requirements for {{ratio1}} {{previewName1}} and {{ratio2}} {{previewName2}} ads. This means that any multimedia ads using this image won\\'t serve in that ad placement'),\r\n {\r\n ratio1: invalidRatioList[0].aspectRatioAsRatio,\r\n previewName1: i18n.getString(invalidRatioList[0].previewTypeString),\r\n ratio2: invalidRatioList[1].aspectRatioAsRatio,\r\n previewName2: i18n.getString(invalidRatioList[1].previewTypeString),\r\n }\r\n );\r\n }\r\n\r\n return '';\r\n }, [i18n, invalidRatioList]);\r\n\r\n const closeDialog = useCallback(() => {\r\n setOpen(false);\r\n }, [setOpen]);\r\n\r\n const onUpdate = useCallback(() => {\r\n onSave();\r\n closeDialog();\r\n }, [closeDialog, onSave]);\r\n\r\n const DismissIcon = useMemo(() => (\r\n } onClick={closeDialog} />\r\n ), [closeDialog]);\r\n\r\n const onOpenChange = useCallback((event, data) => {\r\n // it is the users responsibility to react accordingly to the open state change\r\n setOpen(data.open);\r\n }, [setOpen]);\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n {selectedTab === tabs.AI && (promptControlView)}\r\n {selectedTab === tabs.SolidColor && (colorControlView)}\r\n \r\n
\r\n \r\n \r\n
\r\n {\r\n errorTip &&\r\n \r\n {i18n.getString(_TL_('This image will be updated in all ads and campaigns that use it.'))}\r\n
\r\n \r\n {i18n.getString(_TL_('This update can\\'t be stopped once you start it. You can check the status of the update in your Library. Are you sure you want to make this update?'))}\r\n
\r\n \r\n
\r\n }\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n","import { makeStyles, shorthands } from '@fluentui/react-components';\r\n\r\nexport const useLayoutStyles = makeStyles({\r\n layer: {\r\n top: '60px',\r\n zIndex: '1000',\r\n },\r\n overlay: {\r\n backgroundColor: 'rgba(0, 0, 0, 0.66)',\r\n },\r\n previewContainer: {\r\n width: '100%',\r\n height: '100%',\r\n paddingRight: '480px',\r\n cursor: 'auto',\r\n },\r\n spinner: {\r\n width: '100%',\r\n height: '100%',\r\n zIndex: '2',\r\n position: 'absolute',\r\n },\r\n});\r\n\r\nexport const usePreviewBaseStyles = makeStyles({\r\n previewContainer: {\r\n width: '100%',\r\n height: '100%',\r\n position: 'relative',\r\n },\r\n content: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n width: '100%',\r\n height: '100%',\r\n ...shorthands.padding('26px', '20px', '74px', '20px'),\r\n },\r\n fadeOut: {\r\n opacity: 0,\r\n ...shorthands.transition('all', '0.1s', 'linear'),\r\n },\r\n});\r\n\r\nexport const useSequentialNavigatorStyles = makeStyles({\r\n sequentialNavigatorContainer: {\r\n position: 'absolute',\r\n bottom: '32px',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n width: '100%',\r\n height: '16px',\r\n color: 'white',\r\n },\r\n navigatorStatusContainer: {\r\n fontFamily: 'Segoe UI',\r\n fontStyle: 'normal',\r\n fontWeight: '600',\r\n fontSize: '12px',\r\n lineHeight: '16px',\r\n ...shorthands.margin('0', '12px', '0', '12px'),\r\n },\r\n iconButton: {\r\n fontFamily: 'MsAds MDL2 Assets !important',\r\n fontSize: '16px',\r\n lineHeight: '16px',\r\n backgroundColor: 'transparent',\r\n ...shorthands.border('none'),\r\n ...shorthands.padding('0px'),\r\n color: 'white',\r\n },\r\n chevronLeft: {\r\n '&:before': {\r\n content: '\"\\\\E76B\"',\r\n },\r\n },\r\n chevronRight: {\r\n '&:before': {\r\n content: '\"\\\\E76C\"',\r\n },\r\n },\r\n disabledIcon: {\r\n color: 'rgba(255, 255, 255, 0.5)',\r\n },\r\n});\r\n\r\nexport const useNonActiveVideoPreviewStyle = makeStyles({\r\n container: {\r\n height: '500px',\r\n maxWidth: '746px',\r\n width: '100%',\r\n flexGrow: '1',\r\n },\r\n failedIconContainer: {\r\n color: 'orange',\r\n },\r\n});\r\n\r\nexport const usePanelStyle = makeStyles({\r\n detailPanel: {\r\n width: '480px',\r\n top: '60px',\r\n },\r\n header: {\r\n paddingTop: '16px',\r\n },\r\n content: {\r\n ...shorthands.padding('0', '32px'),\r\n },\r\n footer: {\r\n width: '100%',\r\n ...shorthands.borderTop('1px', 'solid', '#EDEBE9'),\r\n ...shorthands.padding('8px', '24px'),\r\n },\r\n footerButton: {\r\n display: 'block',\r\n width: '60px',\r\n minWidth: '0px',\r\n ...shorthands.overflow('hidden'),\r\n textOverflow: 'ellipsis',\r\n whiteSpace: 'nowrap',\r\n },\r\n navigation: {\r\n marginLeft: '32px',\r\n },\r\n});\r\n\r\nexport const useDetailPanelStyle = makeStyles({\r\n imageUsage: {\r\n marginTop: '24px',\r\n marginLeft: '28px',\r\n },\r\n});\r\n\r\nexport const useInfoPaneHeaderStyle = makeStyles({\r\n detailHeader: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n position: 'relative',\r\n },\r\n panelTitle: {\r\n fontFamily: 'Segoe UI',\r\n fontWeight: 600,\r\n fontSize: '20px',\r\n lineHeight: '27px',\r\n minWidth: '0px',\r\n flexGrow: 1,\r\n },\r\n buttonBox: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n },\r\n // iconBox: getSharedIconBoxStyle({ palette }),\r\n editBox: {\r\n width: '75px',\r\n minWidth: '0px',\r\n marginRight: '8px',\r\n },\r\n deleteBox: {\r\n width: '92px',\r\n marginRight: '8px',\r\n minWidth: '0px',\r\n },\r\n icon: {\r\n width: '20px',\r\n height: '20px',\r\n },\r\n headerText: {\r\n width: '45px',\r\n textAlign: 'center',\r\n fontFamily: 'Segoe UI',\r\n fontWeight: '600',\r\n fontSize: '14px',\r\n lineHeight: '20px',\r\n // color: palette.neutralPrimary,\r\n marginLeft: '4px',\r\n ...shorthands.overflow('hidden'),\r\n textOverflow: 'ellipsis',\r\n whiteSpace: 'nowrap',\r\n },\r\n disabledButton: {\r\n // color: `${palette.neutralTertiary} !important`,\r\n },\r\n closeButton: {\r\n width: '32px',\r\n height: '32px',\r\n },\r\n});\r\n\r\nexport const useInfoItemDefaultStyles = makeStyles({\r\n contentItem: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n fontFamily: 'Segoe UI',\r\n fontWeight: '400',\r\n fontSize: '14px',\r\n lineHeight: '19px',\r\n marginTop: '8px',\r\n },\r\n contentName: {\r\n // color: palette.neutralSecondary,\r\n marginRight: '8px',\r\n width: '97px',\r\n },\r\n contentValue: {\r\n // color: palette.neutralPrimary,\r\n maxWidth: '230px',\r\n ...shorthands.overflow('hidden'),\r\n textOverflow: 'ellipsis',\r\n wordBreak: 'break-all',\r\n whiteSpace: 'nowrap',\r\n },\r\n});\r\n\r\nexport const useItemInfoContentStyles = makeStyles({\r\n contentBox: {\r\n width: '100%',\r\n paddingTop: '10px',\r\n // background: palette.neutralLighterAlt,\r\n },\r\n detailContentWrapper: {\r\n ...shorthands.overflow('hidden'),\r\n ...shorthands.borderTop('1px', 'solid', '#EDEBE9'),\r\n paddingTop: '8px',\r\n },\r\n linkContainer: {\r\n marginTop: '24px',\r\n marginLeft: '28px',\r\n },\r\n});\r\n\r\nexport const useInfoPaneItemRenameStyle = makeStyles({\r\n nameContentBox: {\r\n paddingBottom: '12px',\r\n paddingTop: '8px',\r\n position: 'relative',\r\n },\r\n addNameBox: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n },\r\n addNameTitle: {\r\n fontFamily: 'Segoe UI',\r\n fontSize: '14px',\r\n fontWeight: '600',\r\n lineHeight: '32px',\r\n color: '#484644',\r\n },\r\n addNameIcon: {\r\n color: '#0078D4',\r\n cursor: 'pointer',\r\n marginLeft: '12px',\r\n },\r\n nameBox: {\r\n fontFamily: 'Segoe UI',\r\n fontSize: '14px',\r\n fontWeight: '400',\r\n lineHeight: '19px',\r\n color: '#484644',\r\n maxWidth: '230px',\r\n ...shorthands.overflow('hidden'),\r\n textOverflow: 'ellipsis',\r\n wordBreak: 'break-all',\r\n whiteSpace: 'nowrap',\r\n },\r\n editNameBox: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n },\r\n textField: {\r\n width: '300px',\r\n marginRight: '12px',\r\n '& input[type=\"text\"]::placeholder ': {\r\n color: '#686868',\r\n },\r\n },\r\n completeIcon: {\r\n marginRight: '16px',\r\n },\r\n});\r\n\r\nexport const useItemInfoCopyUrlStyles = makeStyles({\r\n contentItem: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n fontFamily: 'Segoe UI',\r\n fontWeight: '400',\r\n fontSize: '14px',\r\n lineHeight: '19px',\r\n marginTop: '8px',\r\n },\r\n contentName: {\r\n marginRight: '8px',\r\n width: '97px',\r\n },\r\n contentValue: {\r\n maxWidth: '230px',\r\n ...shorthands.overflow('hidden'),\r\n textOverflow: 'ellipsis',\r\n wordBreak: 'break-all',\r\n whiteSpace: 'nowrap',\r\n },\r\n copyUrl: {\r\n backgroundColor: 'transparent',\r\n fontFamily: 'Segoe UI',\r\n fontWeight: '400',\r\n fontSize: '14px',\r\n lineHeight: '20px',\r\n color: '#106ebe',\r\n ...shorthands.border('none'),\r\n ...shorthands.textDecoration('underline'),\r\n },\r\n});\r\n\r\nexport const useItemInfoVideoQualityStyles = makeStyles({\r\n contentItem: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n fontFamily: 'Segoe UI',\r\n fontWeight: '400',\r\n fontSize: '14px',\r\n lineHeight: '19px',\r\n marginTop: '8px',\r\n },\r\n contentName: {\r\n marginRight: '8px',\r\n width: '97px',\r\n },\r\n contentValue: {\r\n maxWidth: '230px',\r\n ...shorthands.overflow('hidden'),\r\n textOverflow: 'ellipsis',\r\n wordBreak: 'break-all',\r\n whiteSpace: 'nowrap',\r\n },\r\n qualityBadge: {\r\n width: '50px',\r\n paddingBottom: '1px',\r\n },\r\n});\r\n\r\nexport const usePerformanceContentStyles = makeStyles({\r\n dropdown: {\r\n minWidth: '0px',\r\n width: '160px',\r\n ...shorthands.margin('12px', '0px', '8px'),\r\n },\r\n metricBox: {\r\n height: '290px',\r\n position: 'relative',\r\n },\r\n loading: {\r\n opacity: '0.2',\r\n },\r\n spinner: {\r\n position: 'absolute',\r\n top: '0px',\r\n },\r\n});\r\n\r\nexport const useExternalLinkStyles = makeStyles({\r\n externalButton: {\r\n marginTop: '24px',\r\n display: 'flex',\r\n ...shorthands.padding('6px', '12px'),\r\n ...shorthands.border('0px'),\r\n backgroundColor: 'transparent !important',\r\n },\r\n text: {\r\n marginLeft: '4px',\r\n fontFamily: 'Segoe UI',\r\n fontSize: '14px',\r\n fontWeight: '600',\r\n lineHeight: '32px',\r\n },\r\n});\r\n\r\n","import classnames from 'classnames';\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { useSequentialNavigatorStyles } from '../../styles';\r\n\r\nexport const SequentialNavigator = ({\r\n totalCount,\r\n currentIndex,\r\n onNext,\r\n onPrevious,\r\n i18n,\r\n}) => {\r\n const classes = useSequentialNavigatorStyles();\r\n\r\n const disableLeft = currentIndex === 0;\r\n const disableRight = currentIndex + 1 === totalCount;\r\n\r\n return (\r\n \r\n
\r\n }\r\n \r\n \r\n {\r\n currentView === ViewName.PlacementListView &&\r\n \r\n \r\n }\r\n
\r\n \r\n {\r\n totalCount > 1 &&\r\n
\r\n );\r\n};\r\n\r\nSequentialNavigator.propTypes = {\r\n totalCount: PropTypes.number.isRequired,\r\n currentIndex: PropTypes.number.isRequired,\r\n onNext: PropTypes.func.isRequired,\r\n onPrevious: PropTypes.func.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\nimport { usePreviewBaseStyles } from '../../styles';\r\nimport { SequentialNavigator } from './sequential-navigator';\r\n\r\nexport const AssetItemPreviewBase = ({\r\n itemData,\r\n totalCount,\r\n currentIndex,\r\n onNext,\r\n onPrevious,\r\n shouldHideContent,\r\n i18n,\r\n onRenderPreviewContent,\r\n}) => {\r\n const classes = usePreviewBaseStyles();\r\n\r\n return (\r\n {`${currentIndex + 1}/${totalCount}`}
\r\n {\r\n totalCount > 1 &&\r\n \r\n
\r\n );\r\n};\r\n\r\nAssetItemPreviewBase.propTypes = {\r\n itemData: PropTypes.shape({}),\r\n totalCount: PropTypes.number.isRequired,\r\n currentIndex: PropTypes.number.isRequired,\r\n onNext: PropTypes.func.isRequired,\r\n onPrevious: PropTypes.func.isRequired,\r\n shouldHideContent: PropTypes.bool,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n onRenderPreviewContent: PropTypes.func.isRequired,\r\n};\r\n\r\nAssetItemPreviewBase.defaultProps = {\r\n itemData: null,\r\n shouldHideContent: false,\r\n};\r\n","import React, { useCallback } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Image } from '@fluentui/react-components';\r\nimport { AssetItemPreviewBase } from './asset-preview-base/asset-item-preview-base';\r\n\r\nexport const ImagePreview = ({\r\n itemInfo,\r\n totalCount,\r\n currentIndex,\r\n onNext,\r\n onPrevious,\r\n shouldHideContent,\r\n i18n,\r\n}) => {\r\n const { url: imageSrc } = itemInfo || {};\r\n\r\n const onRenderPreviewContent = useCallback(() => (\r\n \r\n {onRenderPreviewContent({ itemData })}\r\n
\r\n \r\n \r\n
\r\n ),\r\n [classes.footer, classes.footerButton, dismiss, i18n, onFooterKeyDown]\r\n );\r\n\r\n return (\r\n \r\n \r\n \r\n {onRenderHeader}\r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nInfoPaneHeader.propTypes = {\r\n onDelete: PropTypes.func.isRequired,\r\n isReadonly: PropTypes.bool,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n title: PropTypes.string.isRequired,\r\n\r\n disableEdit: PropTypes.bool,\r\n onEdit: PropTypes.func,\r\n dismiss: PropTypes.func.isRequired,\r\n};\r\n\r\nInfoPaneHeader.defaultProps = {\r\n isReadonly: false,\r\n disableEdit: false,\r\n onEdit: _.noop,\r\n};\r\n","import React, { useState, useCallback } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { ConfirmDialog } from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\n\r\nexport const DeleteAssetDialog = ({\r\n i18n,\r\n isDisplayed,\r\n closeDialog,\r\n onDeleteAsync,\r\n onDeleteSuccess,\r\n confirmText,\r\n errorMessageForUsedAsset,\r\n warningMsg,\r\n genericErrorMessage,\r\n notificationApi,\r\n}) => {\r\n const [showUIBlocker, setShowUIBlocker] = useState(false);\r\n const [errorText, setErrorText] = useState('');\r\n\r\n /* istanbul ignore next */\r\n const handleDelete = useCallback(() => {\r\n setShowUIBlocker(true);\r\n onDeleteAsync().then(() => {\r\n closeDialog();\r\n onDeleteSuccess();\r\n notificationApi.showInfo(i18n.getString(_TL_('Your asset was successfully deleted.')));\r\n }).catch((response = {}) => {\r\n if (response.errors && response.errors[0] && response.errors[0].Code === 'AssetIsUsed') {\r\n setErrorText(errorMessageForUsedAsset);\r\n } else {\r\n notificationApi.showWarning(genericErrorMessage);\r\n closeDialog();\r\n }\r\n })\r\n .finally(() => {\r\n setShowUIBlocker(false);\r\n });\r\n }, [closeDialog, errorMessageForUsedAsset, genericErrorMessage, i18n, notificationApi, onDeleteAsync, onDeleteSuccess]);\r\n\r\n /* istanbul ignore next */\r\n const cancelDelete = useCallback(() => {\r\n closeDialog();\r\n setErrorText('');\r\n }, [closeDialog]);\r\n\r\n return (\r\n {title}
\r\n \r\n \r\n \r\n
\r\n {i18n.getString(_TL_('Delete'))}
\r\n \r\n\r\n { !disableEdit &&\r\n {i18n.getString(_TL_('Edit'))}
\r\n \r\n }\r\n \r\n
\r\n );\r\n};\r\n\r\nInfoPaneItemCopyUrl.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n url: PropTypes.string.isRequired,\r\n onCopy: PropTypes.func.isRequired,\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\nimport { useInfoItemDefaultStyles } from '../../styles';\r\n\r\nexport const InfoItemDefault = ({\r\n name,\r\n value,\r\n}) => {\r\n const classes = useInfoItemDefaultStyles();\r\n\r\n return (\r\n {i18n.getString(_TL_('URL:'))}
\r\n {url}
\r\n \r\n
\r\n );\r\n};\r\n\r\nInfoItemDefault.propTypes = {\r\n name: PropTypes.string.isRequired,\r\n value: PropTypes.string.isRequired,\r\n};\r\n","import React, { useState, useCallback, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\nimport { keyCode } from '@bingads-webui/keycode';\r\nimport { Input } from '@fluentui/react-components';\r\nimport { Edit16Regular, Dismiss16Regular, Checkmark16Regular } from '@fluentui/react-icons';\r\nimport { useInfoPaneItemRenameStyle } from '../../styles';\r\n\r\nconst spinnerStyle = ({\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n width: '100%',\r\n height: '100%',\r\n});\r\n\r\nexport const InfoItemRename = ({\r\n i18n,\r\n name,\r\n renameAsync,\r\n renderBlocker,\r\n inputPlaceholderText,\r\n renameTitleText,\r\n isReadonly,\r\n}) => {\r\n const classes = useInfoPaneItemRenameStyle();\r\n\r\n const [displayInputBox, setDisplayInputBox] = useState(false);\r\n const [inputName, setInputName] = useState('');\r\n const [showUiBlocker, setShowUiBlocker] = useState(false);\r\n\r\n useEffect(() => {\r\n setDisplayInputBox(false);\r\n setShowUiBlocker(false);\r\n setInputName(name);\r\n }, [name]);\r\n\r\n const handleRename = useCallback(() => {\r\n setShowUiBlocker(true);\r\n renameAsync(inputName).finally(() => {\r\n setShowUiBlocker(false);\r\n setDisplayInputBox(false);\r\n });\r\n }, [inputName, renameAsync]);\r\n\r\n const onEnterRename = useCallback((event) => {\r\n if (event && event.keyCode === keyCode.Enter) {\r\n handleRename();\r\n }\r\n }, [handleRename]);\r\n\r\n const handleDisplayInputBox = useCallback(() => {\r\n setInputName(name || '');\r\n setDisplayInputBox(true);\r\n }, [name]);\r\n\r\n const onEnterEditIcon = useCallback((event) => {\r\n if (event && event.keyCode === keyCode.Enter) {\r\n handleDisplayInputBox();\r\n }\r\n }, [handleDisplayInputBox]);\r\n\r\n const handleCancel = useCallback(() => {\r\n setInputName('');\r\n setDisplayInputBox(false);\r\n }, []);\r\n\r\n const onEnterCancel = useCallback((event) => {\r\n if (event && event.keyCode === keyCode.Enter) {\r\n handleCancel();\r\n }\r\n });\r\n\r\n const onEnterPress = useCallback((event) => {\r\n if (event && event.keyCode === keyCode.Enter && inputName !== name) {\r\n handleRename();\r\n }\r\n }, [handleRename, inputName, name]);\r\n\r\n const onInputChange = useCallback((ev, data) => {\r\n const { value } = data || {};\r\n setInputName(value);\r\n }, []);\r\n\r\n return (\r\n {name}
\r\n {value}
\r\n \r\n {\r\n displayInputBox ?\r\n
\r\n );\r\n};\r\n\r\nInfoItemRename.propTypes = {\r\n name: PropTypes.string.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n renameAsync: PropTypes.func.isRequired,\r\n renderBlocker: PropTypes.func.isRequired,\r\n inputPlaceholderText: PropTypes.string.isRequired,\r\n isReadonly: PropTypes.bool,\r\n};\r\n\r\nInfoItemRename.defaultProps = {\r\n isReadonly: false,\r\n};\r\n","import React, { useCallback } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Spinner } from '@fluentui/react-components';\r\nimport { InfoItemDefault } from './info-item-default';\r\nimport { InfoItemRename } from './info-item-rename';\r\nimport { useItemInfoContentStyles } from '../../styles';\r\n\r\nexport const ItemInfoContentBase = ({\r\n i18n,\r\n isReadonly,\r\n itemName,\r\n renameAsync,\r\n promptNameInputLabel,\r\n nameInputPlaceholderText,\r\n renameTitleText,\r\n itemInfos,\r\n}) => {\r\n const classes = useItemInfoContentStyles();\r\n const renderItem = useCallback(({\r\n name, value, CustomComponent, CustomComponentOptions = {},\r\n }) => {\r\n if (CustomComponent) {\r\n return \r\n
:\r\n \r\n
\r\n }\r\n {\r\n showUiBlocker && renderBlocker && renderBlocker({ spinnerStyle })\r\n }\r\n \r\n
\r\n {renameTitleText}
\r\n {!isReadonly && \r\n {name || '-'}\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nItemInfoContentBase.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n isReadonly: PropTypes.bool,\r\n itemName: PropTypes.string,\r\n renameAsync: PropTypes.func.isRequired,\r\n promptNameInputLabel: PropTypes.string,\r\n nameInputPlaceholderText: PropTypes.string,\r\n itemInfos: PropTypes.arrayOf(PropTypes.shape({\r\n name: PropTypes.string,\r\n value: PropTypes.string,\r\n url: PropTypes.string,\r\n copyUrl: PropTypes.func,\r\n })).isRequired,\r\n};\r\n\r\nItemInfoContentBase.defaultProps = {\r\n isReadonly: false,\r\n itemName: null,\r\n promptNameInputLabel: '',\r\n nameInputPlaceholderText: '',\r\n};\r\n","export const ImpressionsID = 5;\r\nexport const ClicksID = 1;\r\nexport const CTRID = 4;\r\nexport const OverallID = 0;\r\n\r\nexport const metricsMap = [\r\n {\r\n id: ClicksID,\r\n value: 'ColumnName_Clicks',\r\n name: 'Clicks',\r\n // formatter: this.formatToInteger,\r\n },\r\n {\r\n id: ImpressionsID,\r\n value: 'TrendAreaChart_AxisY',\r\n name: 'Impressions',\r\n // formatter: this.formatToInteger,\r\n },\r\n {\r\n id: CTRID,\r\n value: 'ColumnName_CTR',\r\n name: 'CTR',\r\n // formatter: this.formatTo2DigitsPercent,\r\n },\r\n];\r\n","import React from 'react';\r\nimport { Button, mergeClasses } from '@fluentui/react-components';\r\nimport { Open20Regular } from '@fluentui/react-icons';\r\nimport { useExternalLinkStyles } from '../../styles';\r\n\r\nexport const ItemExternalLink = (props) => {\r\n const { onClick, text } = props;\r\n const classes = useExternalLinkStyles();\r\n\r\n return (\r\n \r\n );\r\n};\r\n","import React, { useEffect, useCallback, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { Dropdown, Option } from '@fluentui/react-components';\r\nimport { InlineChart } from '@bingads-webui-campaign-react/ads-studio-shared-components';\r\nimport { AdsStudioSpinner } from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\nimport { ImpressionsID, CTRID, ClicksID, OverallID, metricsMap } from '../../constants';\r\nimport { usePerformanceContentStyles } from '../../styles';\r\nimport { ItemExternalLink } from './item-external-link';\r\n\r\nconst defaultMetricValue = OverallID;\r\nconst defaultMetricLabel = _TL_('Overall metrics');\r\n\r\nconst metricOptions = [\r\n {\r\n label: defaultMetricLabel,\r\n value: defaultMetricValue,\r\n },\r\n {\r\n label: _TL_('CTR'),\r\n value: CTRID,\r\n },\r\n {\r\n label: _TL_('Clicks'),\r\n value: ClicksID,\r\n },\r\n {\r\n label: _TL_('Impressions'),\r\n value: ImpressionsID,\r\n },\r\n];\r\n\r\nexport const PerformanceContent = (props) => {\r\n const {\r\n onGotoAds, i18n, loadPerfTimeSeriesData, imageId, folderAssetType, getGranularityEnum, perfMetricDateRange,\r\n } = props;\r\n const classes = usePerformanceContentStyles();\r\n const [isMetricLoading, setIsMetricLoading] = useState(false);\r\n const [metricData, setMetricData] = useState([]);\r\n const [granularity, setGranularity] = useState();\r\n\r\n const loadSeriesData = useCallback((selectedMetricValues) => {\r\n let metric;\r\n if (!granularity) {\r\n return;\r\n }\r\n if (selectedMetricValues === OverallID) {\r\n metric = metricsMap.map(({ name }) => name).join(',');\r\n } else {\r\n metric = metricsMap.find(({ id }) => id === selectedMetricValues).name;\r\n }\r\n const timeSeriesParams = {\r\n metric,\r\n granularity,\r\n isMovingAverageOn: false,\r\n };\r\n const filters = {\r\n searchText: imageId,\r\n hasPerfData: true,\r\n assetTypeFilter: folderAssetType,\r\n };\r\n setIsMetricLoading(true);\r\n loadPerfTimeSeriesData(timeSeriesParams, filters).then((result) => {\r\n setMetricData(result);\r\n }).finally(() => {\r\n setIsMetricLoading(false);\r\n });\r\n }, [folderAssetType, granularity, imageId, loadPerfTimeSeriesData]);\r\n\r\n const onOptionSelect = useCallback((ev, data) => {\r\n const { optionValue } = data || {};\r\n loadSeriesData(optionValue);\r\n }, [loadSeriesData]);\r\n\r\n useEffect(() => {\r\n loadSeriesData(defaultMetricValue);\r\n }, [loadSeriesData]);\r\n\r\n useEffect(() => {\r\n getGranularityEnum(perfMetricDateRange).then((granularityEnum) => {\r\n setGranularity(granularityEnum);\r\n });\r\n }, [getGranularityEnum, perfMetricDateRange]);\r\n\r\n return (\r\n \r\n {\r\n itemInfos.map(({\r\n key,\r\n name, value,\r\n CustomComponent, CustomComponentOptions = {},\r\n valid = true,\r\n }) => (\r\n valid &&\r\n \r\n { renderItem({\r\n name, value, CustomComponent, CustomComponentOptions,\r\n })\r\n }\r\n \r\n ))\r\n }\r\n
\r\n \r\n \r\n {metricOptions.map(option => (\r\n \r\n ))}\r\n \r\n
\r\n );\r\n};\r\n\r\nPerformanceContent.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n onGotoAds: PropTypes.func.isRequired,\r\n loadPerfTimeSeriesData: PropTypes.func.isRequired,\r\n imageId: PropTypes.string.isRequired,\r\n folderAssetType: PropTypes.string.isRequired,\r\n};\r\n","import React, { useState, useCallback, useEffect, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport { TabList, Tab } from '@fluentui/react-components';\r\nimport { ItemDetailsPanelBase } from './asset-panel-base/panel-base';\r\nimport { InfoPaneHeader } from './asset-panel-base/info-panel-header';\r\nimport { DeleteAssetDialog } from './asset-panel-base/delete-asset-dialog';\r\nimport { InfoPaneItemCopyUrl } from './basic-info/info-item-copy-url';\r\nimport { ItemInfoContentBase } from './basic-info/item-info-panel-content-base';\r\nimport { PerformanceContent } from './performance';\r\n\r\nexport const ImageDetailsPanel = ({\r\n isOpen,\r\n assetInfo,\r\n onDismiss,\r\n isReadonly,\r\n i18n,\r\n footerKeyDownHandler,\r\n getImageById,\r\n warningMsgProp, // for unit test\r\n logger,\r\n navigation,\r\n handleDeleteAsset,\r\n handleRenameAsset,\r\n gotoAdsPageWithAssetIdFilter,\r\n copyUrl,\r\n notificationApi,\r\n getGranularityEnum,\r\n loadPerfTimeSeriesData,\r\n perfMetricDateRange,\r\n}) => {\r\n const { id: assetId, folderAssetType } = assetInfo || {};\r\n const [selectedTab, setSelectedTab] = useState('details');\r\n const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);\r\n const [warningMsg, setWarningMsg] = useState(warningMsgProp || '');\r\n\r\n const onEditImage = useCallback(() => {\r\n logger.logTrace('Image Details: edit image', { assetId });\r\n onDismiss();\r\n navigation.gotoEditImagePage({ imageId: assetId });\r\n }, [assetId, logger, navigation, onDismiss]);\r\n\r\n const onDeleteImage = useCallback(() => {\r\n logger.logTrace('Image Details: delete image', { assetId });\r\n return handleDeleteAsset();\r\n }, [assetId, logger, handleDeleteAsset]);\r\n\r\n const onRenameImage = useCallback((newName) => {\r\n logger.logTrace('Image Details: rename image', { assetId });\r\n return handleRenameAsset(newName);\r\n }, [handleRenameAsset, assetId, logger]);\r\n\r\n const onCopyUrl = useCallback(() => {\r\n logger.logTrace('Image Details: url copied', { assetId });\r\n copyUrl(assetInfo.url);\r\n }, [logger, assetId, copyUrl, assetInfo.url]);\r\n\r\n const formatDate = useCallback(date => i18n.formatDate(date, { date: 'long' }), [i18n]);\r\n\r\n const imageInfoArr = useMemo(() => {\r\n const imageInfoList = [\r\n { name: i18n.getString(_TL_(('Image ID:'))), value: assetInfo.id },\r\n {\r\n name: i18n.getString(_TL_('Dimensions:')),\r\n value: i18n.getString(_TL_('{{width}} x {{height}}'), { width: assetInfo.width, height: assetInfo.height }),\r\n },\r\n { name: i18n.getString(_TL_('Created:')), value: formatDate(assetInfo.createdTime) },\r\n { name: i18n.getString(_TL_('Modified:')), value: formatDate(assetInfo.modifiedTime) },\r\n {\r\n CustomComponent: InfoPaneItemCopyUrl,\r\n CustomComponentOptions: {\r\n i18n,\r\n url: assetInfo.url,\r\n onCopy: onCopyUrl,\r\n },\r\n key: assetInfo.url,\r\n },\r\n ];\r\n\r\n return imageInfoList;\r\n }, [assetInfo.createdTime, assetInfo.height, assetInfo.id, assetInfo.modifiedTime, assetInfo.url, assetInfo.width, formatDate, i18n, onCopyUrl]);\r\n\r\n const onGotoAds = useCallback(() => {\r\n logger.logTrace('Image Details: go to Ads grid page', { assetId });\r\n return gotoAdsPageWithAssetIdFilter();\r\n }, [gotoAdsPageWithAssetIdFilter, assetId, logger]);\r\n\r\n useEffect(() => {\r\n if (getImageById && assetInfo && assetInfo.metadata) {\r\n const {\r\n id = '',\r\n } = assetInfo;\r\n getImageById({ imageId: id, useCache: false }).then((asset) => {\r\n if (asset && asset.isSceneKeyFrame) {\r\n setWarningMsg(i18n.getString(_TL_('Once deleted, the image will still serve in any video ads that currently use it and cannot be edited.')));\r\n } else {\r\n setWarningMsg('');\r\n }\r\n });\r\n } else if (warningMsg.length > 0) {\r\n setWarningMsg('');\r\n }\r\n }, [assetInfo, getImageById, i18n, setWarningMsg, warningMsg]);\r\n\r\n const dismiss = useCallback(() => {\r\n onDismiss();\r\n }, [onDismiss]);\r\n\r\n const onRenderHeader = useCallback(() => (\r\n \r\n
\r\n \r\n
\r\n {isMetricLoading && \r\n {qualityText} \r\n
\r\n );\r\n};\r\n\r\nVideoQualityBadge.propTypes = {\r\n quality: PropTypes.number,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n};\r\n\r\nVideoQualityBadge.defaultProps = {\r\n quality: null,\r\n};\r\n","import React, { useState, useCallback, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport { convertTimeDuration, getClosestAspectRatio, formatFileSize } from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\n\r\nimport { ItemDetailsPanelBase } from './asset-panel-base/panel-base';\r\nimport { InfoPaneHeader } from './asset-panel-base/info-panel-header';\r\nimport { DeleteAssetDialog } from './asset-panel-base/delete-asset-dialog';\r\nimport { InfoPaneItemCopyUrl } from './basic-info/info-item-copy-url';\r\nimport { ItemInfoContentBase } from './basic-info/item-info-panel-content-base';\r\nimport { VideoQualityBadge } from './basic-info/info-item-video-quality';\r\n\r\nexport const VideoDetailsPanel = ({\r\n isOpen,\r\n assetInfo,\r\n onDismiss,\r\n isReadonly,\r\n i18n,\r\n footerKeyDownHandler,\r\n logger,\r\n handleDeleteAsset,\r\n handleRenameAsset,\r\n copyUrl,\r\n notificationApi,\r\n permissions,\r\n navigation,\r\n}) => {\r\n const { id: videoId } = assetInfo || {};\r\n const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);\r\n\r\n const onDelete = useCallback(() => {\r\n logger.logTrace('Video Details: delete video', { videoId });\r\n return handleDeleteAsset();\r\n }, [logger, videoId, handleDeleteAsset]);\r\n\r\n const onRenameVideo = useCallback((newName) => {\r\n logger.logTrace('Video Details: rename video', { videoId });\r\n return handleRenameAsset(newName);\r\n }, [handleRenameAsset, logger, videoId]);\r\n\r\n const onEditVideo = useCallback(() => {\r\n if (logger && logger.logTrace) {\r\n logger.logTrace('Video Details: edit video', { assetId: assetInfo.id });\r\n }\r\n onDismiss();\r\n navigation.gotoEditVideoPage({ videoId: assetInfo.id });\r\n }, [onDismiss, navigation, logger]);\r\n\r\n const onCopyUrl = useCallback((url) => {\r\n logger.logTrace('Video Details: url copied', { videoId });\r\n copyUrl(url);\r\n }, [copyUrl, logger, videoId]);\r\n\r\n const formatDate = useCallback(date => i18n.formatDate(date, { date: 'long' }), [i18n]);\r\n\r\n const videoTemplateUIEnabled = permissions && permissions.dynamic && permissions.dynamic.VideoTemplateUI;\r\n const disableEdit = !(videoTemplateUIEnabled && assetInfo && assetInfo.id && assetInfo.metaData);\r\n\r\n const videoInfoArr = useMemo(() => {\r\n const videoInfoList = [\r\n { name: i18n.getString(_TL_(('Video ID:'))), value: assetInfo.id },\r\n {\r\n name: i18n.getString(_TL_('Dimensions:')),\r\n value: `${assetInfo.width} X ${assetInfo.height}`,\r\n valid: assetInfo.height && assetInfo.height > 0 && assetInfo.width && assetInfo.width > 0,\r\n },\r\n {\r\n name: i18n.getString(_TL_('Aspect ratio:')),\r\n value: getClosestAspectRatio(assetInfo.width, assetInfo.height),\r\n valid: assetInfo.height > 0 && assetInfo.width > 0,\r\n },\r\n {\r\n name: i18n.getString(_TL_('File size:')),\r\n value: `${formatFileSize(assetInfo.fileSize)} ${i18n.getString(_TL_('MB'))}`,\r\n valid: assetInfo.fileSize > 0,\r\n },\r\n {\r\n name: i18n.getString(_TL_('Duration:')),\r\n value: convertTimeDuration(assetInfo.durationInMS),\r\n valid: assetInfo.durationInMS > 0,\r\n },\r\n { name: i18n.getString(_TL_('Modified:')), value: formatDate(assetInfo.modifiedTime) },\r\n { name: i18n.getString(_TL_('Added:')), value: formatDate(assetInfo.createdTime) },\r\n {\r\n CustomComponent: VideoQualityBadge,\r\n CustomComponentOptions: {\r\n i18n,\r\n quality: assetInfo.quality,\r\n },\r\n key: assetInfo.quality,\r\n },\r\n {\r\n CustomComponent: InfoPaneItemCopyUrl,\r\n CustomComponentOptions: {\r\n i18n,\r\n url: assetInfo.url,\r\n onCopy: () => { onCopyUrl(assetInfo.url); },\r\n },\r\n key: assetInfo.url,\r\n },\r\n ];\r\n\r\n return videoInfoList;\r\n }, [assetInfo.createdTime, assetInfo.durationInMS, assetInfo.id, assetInfo.modifiedTime, assetInfo.url, formatDate, i18n, onCopyUrl]);\r\n\r\n const dismiss = useCallback(() => {\r\n onDismiss();\r\n }, [onDismiss]);\r\n\r\n const onRenderHeader = useCallback(() => (\r\n {i18n.getString(_TL_('Quality:'))}
\r\n \r\n {renderItemPreview({\r\n itemData: itemInfo,\r\n shouldHideContent: hideContent,\r\n currentIndex,\r\n gotoNext,\r\n gotoPrevious,\r\n })}\r\n
\r\n {renderItemDetails({\r\n itemData: itemInfo,\r\n dismiss,\r\n footerKeyDownHandler,\r\n })}\r\n \r\n ) : (\r\n \r\n
\r\n );\r\n};\r\n","import React, { useCallback, useRef, useState, useMemo } from 'react';\r\nimport { mergeI18n } from '@bingads-webui-campaign-react/i18n-merger';\r\nimport _ from 'underscore';\r\nimport classNames from 'classnames';\r\nimport {\r\n Dialog,\r\n DialogSurface,\r\n DialogTitle,\r\n DialogContent,\r\n DialogBody,\r\n DialogActions,\r\n Button,\r\n mergeClasses,\r\n} from '@fluentui/react-components';\r\nimport { MessageBar, MessageBarActions, MessageBarBody } from '@fluentui/react-message-bar';\r\nimport { DismissRegular } from '@fluentui/react-icons';\r\nimport { ChooseImageIcon, supportedImageExtensions, useUploadFiles, AdsStudioSpinner, isReachFileSizeLimit, getReachFileSizeLimitErrorMessage, } from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\nimport { parseFileName } from '@bingads-webui-campaign-react/upload-file-picker';\r\nimport { BackgroundRemovalLibraryGrid } from './library-grid';\r\nimport { ViewName } from '../edit-image-page-component/model/utils';\r\nimport { useBackgroundRemovalModalStyle } from './background-removal-modal-style';\r\n\r\nconst UploadArea = ({\r\n i18n, onFileRead, setErrors,\r\n}) => {\r\n const classes = useBackgroundRemovalModalStyle();\r\n const uploadInput = useRef();\r\n /* istanbul ignore next */\r\n const onClickUpload = useCallback(() => {\r\n uploadInput.current.click();\r\n }, []);\r\n\r\n const clearInputFile = useCallback((event) => {\r\n if (event) {\r\n // eslint-disable-next-line no-param-reassign\r\n event.target.value = '';\r\n }\r\n }, []);\r\n\r\n const readFile = useCallback((fileObjects, event) => {\r\n const selectedFiles = !_.isUndefined(fileObjects) && fileObjects.length > 0 && fileObjects;\r\n if (selectedFiles) {\r\n const selectedFilesCount = selectedFiles.length;\r\n let fileIndex;\r\n const errorArr = [];\r\n\r\n for (fileIndex = 0; fileIndex < selectedFilesCount; fileIndex += 1) {\r\n const fileObj = selectedFiles[fileIndex];\r\n const fileSizeMB = (fileObj.size / 1024 / 1024).toFixed(3);\r\n let reachLimit;\r\n\r\n if (isReachFileSizeLimit) {\r\n const { ext } = parseFileName(fileObj.name);\r\n reachLimit = isReachFileSizeLimit({ ext, fileSizeMB });\r\n }\r\n\r\n if (reachLimit) {\r\n errorArr.push(getReachFileSizeLimitErrorMessage({ i18n }));\r\n\r\n break;\r\n }\r\n }\r\n if (_.isEmpty(errorArr)) {\r\n return onFileRead(selectedFiles, () => clearInputFile(event));\r\n }\r\n clearInputFile(event);\r\n setErrors(errorArr);\r\n } // else no media picked, so do nothing\r\n\r\n return ''; // for testability\r\n }, [clearInputFile, i18n, onFileRead, setErrors]);\r\n\r\n const handleUploadFile = useCallback((event) => {\r\n const { files } = event.target;\r\n readFile(files, event);\r\n }, [readFile]);\r\n\r\n const handleDropFile = useCallback((event) => {\r\n event.preventDefault();\r\n const droppedFiles = event.dataTransfer.files;\r\n readFile(droppedFiles);\r\n }, [readFile]);\r\n\r\n const handleDropOver = useCallback((event) => {\r\n event.preventDefault();\r\n }, []);\r\n\r\n return (\r\n <>\r\n {i18n.getString(_TL_('Library'))}
\r\n \r\n \r\n
\r\n \r\n {i18n.getString(_TL_('Minimum image size: 703 x 368 pixels.'))}\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\n\r\nconst BackgroundRemovalModal = ({\r\n navigation, i18n, dataService, logger, notificationApi, aid, globalLegacyI18n, open, isUploadImageUpscaleEnabled,\r\n}) => {\r\n const [errors, setErrors] = useState([]);\r\n const [selectedImage, setSelectedImage] = useState();\r\n const globalI18n = useMemo(() => globalLegacyI18n.get('$/i18n!legacy/global'), [globalLegacyI18n]);\r\n const classes = useBackgroundRemovalModalStyle();\r\n\r\n const filePickerI18n = useMemo(() => mergeI18n(globalI18n, i18n), [globalI18n, i18n]);\r\n /* istanbul ignore next */\r\n const onFilesAddedCallback = useCallback(() => {\r\n setErrors([]);\r\n }, []);\r\n /* istanbul ignore next */\r\n const uploadCallback = useCallback((imageId) => {\r\n if (imageId) {\r\n navigation.goBack();\r\n setSelectedImage(null);\r\n if (logger && logger.logTrace) {\r\n logger.logTrace('Image Details: edit image', { assetId: imageId });\r\n }\r\n navigation.gotoEditImagePage({\r\n imageId, initialCurrentView: ViewName.BackgroundChangeView,\r\n });\r\n }\r\n }, [logger, navigation]);\r\n\r\n const onClickCancel = useCallback(() => {\r\n navigation.goBack();\r\n setSelectedImage(null);\r\n setErrors([]);\r\n }, [navigation]);\r\n\r\n const onSelectedImageChange = useCallback((newSelectedImage) => {\r\n setSelectedImage(newSelectedImage);\r\n }, []);\r\n\r\n const onClickContinue = useCallback(() => {\r\n navigation.goBack();\r\n setSelectedImage(null);\r\n if (logger && logger.logTrace) {\r\n logger.logTrace('Image Details: edit image', { assetId: selectedImage.id });\r\n }\r\n navigation.gotoEditImagePage({\r\n imageId: selectedImage.id, initialCurrentView: ViewName.BackgroundChangeView,\r\n });\r\n }, [logger, navigation, selectedImage]);\r\n\r\n const {\r\n previewArr, onFileRead,\r\n } = useUploadFiles({\r\n dataService, logger, notificationApi, i18n, aid, onFilesAddedCallback, setErrors, filePickerI18n, uploadCallback, isUploadImageUpscaleEnabled,\r\n });\r\n\r\n const isUploadingFile = useMemo(() => !!(previewArr && previewArr.length), [previewArr]);\r\n const dialogContentRef = useRef();\r\n const isContinueButtonDisabled = useMemo(() => !selectedImage || isUploadingFile, [isUploadingFile, selectedImage]);\r\n\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport const BackgroundRemovalModalComponent = BackgroundRemovalModal;\r\n","import {\r\n FolderRegular,\r\n ImageRegular,\r\n HomeRegular,\r\n DataTrendingRegular,\r\n StyleGuideRegular,\r\n VideoRegular,\r\n KeyboardLayoutOneHandedLeft20Regular,\r\n} from '@fluentui/react-icons';\r\nimport { getSearchQuery } from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\n\r\nconst isSubPageSelected = (pathname, subPage, rootRoute) => pathname.includes(`${rootRoute}/${subPage}`);\r\n\r\nconst isHomePageSelected = (pathname, rootRoute) => (pathname === rootRoute) || isSubPageSelected(pathname, 'home', rootRoute);\r\n\r\nconst gotoPage = (history, rootRoute, path, search) => {\r\n const currentSearch = getSearchQuery({ search });\r\n history.push(`${rootRoute}${path}${currentSearch}`);\r\n};\r\n\r\nexport const gotoLibraryPage = (history, rootRoute, search) => {\r\n const isLibraryPage = isSubPageSelected(history.location.pathname, 'library', rootRoute);\r\n if (!isLibraryPage) {\r\n gotoPage(history, rootRoute, '/library', search);\r\n }\r\n};\r\n\r\nexport const isLibraryPageSelected = (pathname, rootRoute) => isSubPageSelected(pathname, 'library', rootRoute);\r\n\r\nexport const getStaticItems = (history, rootRoute, navigateIntoFolderItem, brandKitEnabled) => {\r\n const { location } = history;\r\n const { search, pathname } = location;\r\n\r\n const isBrandKitEnabled = brandKitEnabled;\r\n\r\n return [\r\n {\r\n id: 'ad-studio-home-page',\r\n name: _TL_('Home'),\r\n route: 'adstudio/home',\r\n onClick: () => gotoPage(history, rootRoute, '/home', search),\r\n icon: HomeRegular,\r\n isSelected: isHomePageSelected(pathname, rootRoute),\r\n },\r\n {\r\n id: 'ad-studio-images-page',\r\n name: _TL_('Images'),\r\n route: 'adstudio/images',\r\n onClick: () => gotoPage(history, rootRoute, '/images', search),\r\n icon: ImageRegular,\r\n isSelected: isSubPageSelected(pathname, 'images', rootRoute),\r\n },\r\n ...isBrandKitEnabled ? [{\r\n id: 'ad-studio-display-templates-page',\r\n name: _TL_('Display templates'),\r\n route: 'adstudio/displaytemplates',\r\n onClick: () => gotoPage(history, rootRoute, '/displaytemplates', search),\r\n icon: KeyboardLayoutOneHandedLeft20Regular,\r\n isSelected: isSubPageSelected(pathname, 'displaytemplates', rootRoute),\r\n }] : [],\r\n {\r\n id: 'ad-studio-videos-page',\r\n name: _TL_('Videos'),\r\n route: 'adstudio/videos',\r\n onClick: () => gotoPage(history, rootRoute, '/videos', search),\r\n icon: VideoRegular,\r\n isSelected: isSubPageSelected(pathname, 'videos', rootRoute),\r\n },\r\n {\r\n id: 'ad-studio-performance-page',\r\n name: _TL_('Performance'),\r\n route: 'adstudio/performance',\r\n onClick: () => gotoPage(history, rootRoute, '/performance', search),\r\n icon: DataTrendingRegular,\r\n isSelected: isSubPageSelected(pathname, 'performance', rootRoute),\r\n },\r\n ...isBrandKitEnabled ? [{\r\n id: 'ad-studio-brand-kit-page',\r\n name: _TL_('Brand kit'),\r\n route: 'adstudio/brandkit',\r\n onClick: () => gotoPage(history, rootRoute, '/brandkit', search),\r\n icon: StyleGuideRegular,\r\n isSelected: isSubPageSelected(pathname, 'brandkit', rootRoute),\r\n }] : [],\r\n {\r\n id: 'ad-studio-library-page',\r\n name: _TL_('Library'),\r\n route: 'adstudio/library',\r\n onClick: () => {\r\n gotoPage(history, rootRoute, '/library', search);\r\n navigateIntoFolderItem({ folder: {} });\r\n },\r\n icon: FolderRegular,\r\n isSelected: isSubPageSelected(pathname, 'library', rootRoute),\r\n showDivider: true,\r\n },\r\n ];\r\n};\r\n\r\nexport const getGroupedItems = (history, rootRoute, navigateIntoFolderItem, brandKitEnabled) => {\r\n const { location } = history;\r\n const { search, pathname } = location;\r\n\r\n const isBrandKitEnabled = brandKitEnabled;\r\n\r\n return [\r\n [\r\n {\r\n id: 'ad-studio-home-page',\r\n name: _TL_('Home'),\r\n route: 'adstudio/home',\r\n onClick: () => gotoPage(history, rootRoute, '/home', search),\r\n icon: HomeRegular,\r\n isSelected: isHomePageSelected(pathname, rootRoute),\r\n },\r\n {\r\n id: 'ad-studio-images-page',\r\n name: _TL_('Images'),\r\n route: 'adstudio/images',\r\n onClick: () => gotoPage(history, rootRoute, '/images', search),\r\n icon: ImageRegular,\r\n isSelected: isSubPageSelected(pathname, 'images', rootRoute),\r\n },\r\n ...isBrandKitEnabled ? [{\r\n id: 'ad-studio-display-templates-page',\r\n name: _TL_('Display templates'),\r\n route: 'adstudio/displaytemplates',\r\n onClick: () => gotoPage(history, rootRoute, '/displaytemplates', search),\r\n icon: KeyboardLayoutOneHandedLeft20Regular,\r\n isSelected: isSubPageSelected(pathname, 'displaytemplates', rootRoute),\r\n }] : [],\r\n {\r\n id: 'ad-studio-videos-page',\r\n name: _TL_('Videos'),\r\n route: 'adstudio/videos',\r\n onClick: () => gotoPage(history, rootRoute, '/videos', search),\r\n icon: VideoRegular,\r\n isSelected: isSubPageSelected(pathname, 'videos', rootRoute),\r\n },\r\n {\r\n id: 'ad-studio-performance-page',\r\n name: _TL_('Performance'),\r\n route: 'adstudio/performance',\r\n onClick: () => gotoPage(history, rootRoute, '/performance', search),\r\n icon: DataTrendingRegular,\r\n isSelected: isSubPageSelected(pathname, 'performance', rootRoute),\r\n },\r\n ...isBrandKitEnabled ? [{\r\n id: 'ad-studio-brand-kit-page',\r\n name: _TL_('Brand kit'),\r\n route: 'adstudio/brandkit',\r\n onClick: () => gotoPage(history, rootRoute, '/brandkit', search),\r\n icon: StyleGuideRegular,\r\n isSelected: isSubPageSelected(pathname, 'brandkit', rootRoute),\r\n }] : [],\r\n ],\r\n [\r\n {\r\n id: 'ad-studio-library-page',\r\n name: _TL_('Library'),\r\n route: 'adstudio/library',\r\n onClick: () => {\r\n gotoPage(history, rootRoute, '/library', search);\r\n navigateIntoFolderItem({ folder: {} });\r\n },\r\n icon: FolderRegular,\r\n isSelected: isSubPageSelected(pathname, 'library', rootRoute),\r\n showDivider: true,\r\n },\r\n {\r\n id: 'folder-path-tree',\r\n },\r\n ],\r\n ];\r\n};\r\n\r\nexport const LOADING_CELL = {};\r\n\r\nexport const MaxFolderLevel = 6;\r\n","import { useCallback, useContext, useEffect, useMemo, useState } from 'react';\r\n\r\nimport { ROOT_FOLDER_ID, handleRealUsedFlag, RealUsedFlagSuffix } from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\nimport { isCopilotRegionRestricted } from '@bingads-webui-react/copilot-utils';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\n\r\nimport { getStaticItems, gotoLibraryPage, isLibraryPageSelected } from './utils';\r\n\r\nexport const useAdStudioNavigation = ({\r\n history,\r\n rootRoute,\r\n dataService,\r\n onDropToFolder: onDropToFolderProp,\r\n permissions,\r\n adsStudioAccountPreferences,\r\n}) => {\r\n const [selectedItemId, setSelectedItemId] = useState(null);\r\n const [selectedFolderId, setSelectedFolderId] = useState(null);\r\n const [isCopilotEnabled, setIsCopilotEnabled] = useState(false);\r\n const serverContext = useContext(ServerContext);\r\n\r\n const isBrandKitEnabled = permissions && permissions.dynamic && permissions.dynamic.BrandKitUI;\r\n\r\n const {\r\n folderPathTree,\r\n loadFolderPathTreeItem,\r\n loadMoreFolderPathTreeItem,\r\n initializeFolderPathTree,\r\n navigateIntoFolderItem,\r\n navigateIntoRootFolder,\r\n currentFolder,\r\n } = dataService;\r\n\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n const staticItems = useMemo(() => getStaticItems(history, rootRoute, navigateIntoFolderItem, isCopilotEnabled), [history.location.pathname, rootRoute, navigateIntoFolderItem, isCopilotEnabled]);\r\n\r\n const handleFolderItemClicked = useCallback((folder) => {\r\n handleRealUsedFlag(adsStudioAccountPreferences, RealUsedFlagSuffix.App);\r\n const { folderId } = folder;\r\n setSelectedItemId(folderId);\r\n setSelectedFolderId(folderId);\r\n gotoLibraryPage(history, rootRoute, history.location.search);\r\n navigateIntoFolderItem({ folder });\r\n }, [adsStudioAccountPreferences, history, navigateIntoFolderItem, rootRoute]);\r\n\r\n const onDropToFolder = useCallback((folder) => {\r\n onDropToFolderProp(folder);\r\n }, [onDropToFolderProp]);\r\n\r\n useEffect(() => {\r\n if (staticItems.length > 0) {\r\n const selectedItem = staticItems.find(item => item.isSelected);\r\n if (selectedItem) {\r\n if (selectedFolderId && isLibraryPageSelected(history.location.pathname, rootRoute)) {\r\n // if select folder, then the folder should have selected status instead of the library item\r\n setSelectedItemId(selectedFolderId);\r\n } else {\r\n setSelectedItemId(selectedItem.id);\r\n }\r\n }\r\n }\r\n }, [staticItems, history, selectedFolderId, rootRoute]);\r\n\r\n useEffect(() => {\r\n if (!selectedItemId) {\r\n initializeFolderPathTree();\r\n }\r\n }, [initializeFolderPathTree, selectedItemId]);\r\n\r\n useEffect(() => {\r\n if (currentFolder && currentFolder.folderId !== ROOT_FOLDER_ID && isLibraryPageSelected(history.location.pathname, rootRoute)) {\r\n setSelectedFolderId(currentFolder.folderId);\r\n setSelectedItemId(currentFolder.folderId);\r\n } else if (currentFolder && currentFolder.folderId === ROOT_FOLDER_ID) {\r\n setSelectedFolderId(null);\r\n const selectedItem = staticItems.find(item => item.isSelected);\r\n if (selectedItem) {\r\n setSelectedItemId(selectedItem.id);\r\n }\r\n }\r\n }, [currentFolder, history.location.pathname, rootRoute, staticItems]);\r\n\r\n useEffect(() => {\r\n if (isBrandKitEnabled) {\r\n isCopilotRegionRestricted({\r\n feature: 'Recommendations',\r\n permissions,\r\n serverContext,\r\n }).then(isRestricted => setIsCopilotEnabled(!isRestricted));\r\n } else {\r\n setIsCopilotEnabled(false);\r\n }\r\n }, [isBrandKitEnabled, permissions, serverContext]);\r\n\r\n return {\r\n staticItems,\r\n selectedItemId,\r\n setSelectedItemId,\r\n selectedFolderId,\r\n setSelectedFolderId,\r\n folderPathTree: folderPathTree[0],\r\n loadFolderPathTreeItem,\r\n loadMoreFolderPathTreeItem,\r\n handleFolderItemClicked,\r\n onDropToFolder,\r\n navigateIntoRootFolder,\r\n };\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Tab, mergeClasses } from '@fluentui/react-components';\r\n\r\nexport const CustomTab = ({\r\n value,\r\n classes,\r\n isSelected,\r\n children,\r\n}) => (\r\n \r\n \r\n {children}\r\n \r\n
\r\n);\r\n\r\nCustomTab.propTypes = {\r\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\r\n classes: PropTypes.shape({\r\n tabItemWrapper: PropTypes.string,\r\n selected: PropTypes.string,\r\n }).isRequired,\r\n isSelected: PropTypes.bool.isRequired,\r\n children: PropTypes.node.isRequired,\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Spinner } from '@fluentui/react-components';\r\nimport { TilesGridLoadingCell } from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\n\r\nexport const LoadingSpinner = ({\r\n onLoading,\r\n}) => (\r\n \r\n \r\n {staticItems.map(item => (\r\n \r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nAdStudioNavigationImp.propTypes = {\r\n history: PropTypes.shape({\r\n location: PropTypes.shape({\r\n pathname: PropTypes.string,\r\n }),\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n rootRoute: PropTypes.string.isRequired,\r\n dataService: PropTypes.shape({\r\n folderPathTree: PropTypes.arrayOf(PropTypes.shape({})),\r\n loadFolderPathTreeItem: PropTypes.func,\r\n loadMoreFolderPathTreeItem: PropTypes.func,\r\n }).isRequired,\r\n logger: PropTypes.shape({\r\n logTrace: PropTypes.func,\r\n }).isRequired,\r\n onDropToFolder: PropTypes.func.isRequired,\r\n};\r\n\r\nexport const AdStudioNavigation = AdStudioNavigationImp;\r\n","import { useCallback, useContext, useEffect, useMemo, useState } from 'react';\r\nimport _ from 'underscore';\r\nimport { ROOT_FOLDER_ID, handleRealUsedFlag, RealUsedFlagSuffix } from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\nimport { isCopilotRegionRestricted } from '@bingads-webui-react/copilot-utils';\r\nimport { ServerContext } from '@bingads-webui-campaign-react/server-context';\r\n\r\nimport { getGroupedItems, gotoLibraryPage, isLibraryPageSelected } from './utils';\r\n\r\nexport const useAdStudioSideNavigation = ({\r\n history,\r\n rootRoute,\r\n dataService,\r\n onDropToFolder: onDropToFolderProp,\r\n permissions,\r\n adsStudioAccountPreferences,\r\n}) => {\r\n const [selectedItemId, setSelectedItemId] = useState(null);\r\n const [selectedFolderId, setSelectedFolderId] = useState(null);\r\n const [isCopilotEnabled, setIsCopilotEnabled] = useState(false);\r\n const serverContext = useContext(ServerContext);\r\n\r\n const isBrandKitEnabled = permissions && permissions.dynamic && permissions.dynamic.BrandKitUI;\r\n\r\n const {\r\n folderPathTree,\r\n loadFolderPathTreeItem,\r\n loadMoreFolderPathTreeItem,\r\n initializeFolderPathTree,\r\n navigateIntoFolderItem,\r\n navigateIntoRootFolder,\r\n currentFolder,\r\n } = dataService;\r\n\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n const groupedItems = useMemo(() => getGroupedItems(history, rootRoute, navigateIntoFolderItem, isCopilotEnabled), [history.location.pathname, rootRoute, navigateIntoFolderItem, isCopilotEnabled]);\r\n\r\n const staticItems = useMemo(() => _.flatten(groupedItems), [groupedItems]);\r\n\r\n const handleFolderItemClicked = useCallback((folder) => {\r\n handleRealUsedFlag(adsStudioAccountPreferences, RealUsedFlagSuffix.App);\r\n const { folderId } = folder;\r\n setSelectedItemId(folderId);\r\n setSelectedFolderId(folderId);\r\n gotoLibraryPage(history, rootRoute, history.location.search);\r\n navigateIntoFolderItem({ folder });\r\n }, [adsStudioAccountPreferences, history, navigateIntoFolderItem, rootRoute]);\r\n\r\n const onDropToFolder = useCallback((folder) => {\r\n onDropToFolderProp(folder);\r\n }, [onDropToFolderProp]);\r\n\r\n useEffect(() => {\r\n if (staticItems.length > 0) {\r\n const selectedItem = staticItems.find(item => item.isSelected);\r\n if (selectedItem) {\r\n if (selectedFolderId && isLibraryPageSelected(history.location.pathname, rootRoute)) {\r\n // if select folder, then the folder should have selected status instead of the library item\r\n setSelectedItemId(selectedFolderId);\r\n } else {\r\n setSelectedItemId(selectedItem.id);\r\n }\r\n }\r\n }\r\n }, [staticItems, history, selectedFolderId, rootRoute]);\r\n\r\n useEffect(() => {\r\n if (!selectedItemId) {\r\n initializeFolderPathTree();\r\n }\r\n }, [initializeFolderPathTree, selectedItemId]);\r\n\r\n useEffect(() => {\r\n if (currentFolder && currentFolder.folderId !== ROOT_FOLDER_ID && isLibraryPageSelected(history.location.pathname, rootRoute)) {\r\n setSelectedFolderId(currentFolder.folderId);\r\n setSelectedItemId(currentFolder.folderId);\r\n } else if (currentFolder && currentFolder.folderId === ROOT_FOLDER_ID) {\r\n setSelectedFolderId(null);\r\n const selectedItem = staticItems.find(item => item.isSelected);\r\n if (selectedItem) {\r\n setSelectedItemId(selectedItem.id);\r\n }\r\n }\r\n }, [currentFolder, history.location.pathname, rootRoute, staticItems]);\r\n\r\n useEffect(() => {\r\n if (isBrandKitEnabled) {\r\n isCopilotRegionRestricted({\r\n feature: 'Recommendations',\r\n permissions,\r\n serverContext,\r\n }).then(isRestricted => setIsCopilotEnabled(!isRestricted));\r\n } else {\r\n setIsCopilotEnabled(false);\r\n }\r\n }, [isBrandKitEnabled, permissions, serverContext]);\r\n\r\n return {\r\n groupedItems,\r\n staticItems,\r\n selectedItemId,\r\n setSelectedItemId,\r\n selectedFolderId,\r\n setSelectedFolderId,\r\n folderPathTree: folderPathTree[0],\r\n loadFolderPathTreeItem,\r\n loadMoreFolderPathTreeItem,\r\n handleFolderItemClicked,\r\n onDropToFolder,\r\n navigateIntoRootFolder,\r\n };\r\n};\r\n","import React, { useCallback, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { mergeClasses } from '@fluentui/react-components';\r\nimport { SideNavigation } from '@bingads-webui-fluent-component/navigation';\r\nimport { handleRealUsedFlag, RealUsedFlagSuffix } from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\n\r\nimport { useAdStudioSideNavigation } from './use-ad-studio-side-navigation';\r\nimport { FolderPathTreeView } from './components/folders-tree-view';\r\nimport { useAdStudioNavigationStyle } from './style';\r\n\r\nconst MIN_VISIBLE_TAB_COUNT = 8;\r\n\r\nconst AdStudioNavigationImp = ({\r\n history,\r\n i18n,\r\n rootRoute,\r\n dataService,\r\n logger,\r\n permissions,\r\n onDropToFolder: onDropToFolderProp,\r\n adsStudioAccountPreferences,\r\n}) => {\r\n const {\r\n groupedItems,\r\n selectedItemId,\r\n setSelectedFolderId,\r\n folderPathTree,\r\n loadFolderPathTreeItem,\r\n loadMoreFolderPathTreeItem,\r\n handleFolderItemClicked,\r\n onDropToFolder,\r\n navigateIntoRootFolder,\r\n } = useAdStudioSideNavigation({\r\n history,\r\n rootRoute,\r\n dataService,\r\n onDropToFolder: onDropToFolderProp,\r\n permissions,\r\n adsStudioAccountPreferences,\r\n });\r\n\r\n const classes = useAdStudioNavigationStyle();\r\n const renderFolderPathTree = useCallback(() => (\r\n folderPathTree && folderPathTree.subFolders.length > 0 &&\r\n \r\n {\r\n item.showDivider &&\r\n {\r\n handleRealUsedFlag(adsStudioAccountPreferences, RealUsedFlagSuffix.App);\r\n setSelectedFolderId(null);\r\n navigateIntoRootFolder();\r\n item.onClick();\r\n logger.logTrace('AdStudioNavigation: static item clicked', { navigationItem: item.name });\r\n },\r\n }}\r\n selectedTabId={selectedItemId}\r\n config={{}}\r\n className={classes.customTabItem}\r\n />\r\n
\r\n ))}\r\n {\r\n folderPathTree && folderPathTree.subFolders.length > 0 &&\r\n \r\n \r\n
\r\n }\r\n \r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nAdStudioNavigationImp.propTypes = {\r\n history: PropTypes.shape({\r\n location: PropTypes.shape({\r\n pathname: PropTypes.string,\r\n }),\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n rootRoute: PropTypes.string.isRequired,\r\n dataService: PropTypes.shape({\r\n folderPathTree: PropTypes.arrayOf(PropTypes.shape({})),\r\n loadFolderPathTreeItem: PropTypes.func,\r\n loadMoreFolderPathTreeItem: PropTypes.func,\r\n }).isRequired,\r\n logger: PropTypes.shape({\r\n logTrace: PropTypes.func,\r\n }).isRequired,\r\n onDropToFolder: PropTypes.func.isRequired,\r\n};\r\n\r\nexport const AdStudioSideNavigation = AdStudioNavigationImp;\r\n","import React, { useCallback, useMemo, useState } from 'react';\r\nimport _ from 'underscore';\r\nimport hoistNonReactStatics from 'hoist-non-react-statics';\r\nimport { getDisplayName } from '@bingads-webui-react/hoc-utils';\r\nimport { makeStyles, mergeClasses } from '@fluentui/react-components';\r\nimport { useAdsStudioServices } from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\nimport { LayoutSizeScale, useLayoutResizeObserver } from '@bingads-webui-fluent-component/layout-size';\r\nimport { AdStudioNavigation } from './ad-studio-navigation';\r\nimport { AdStudioSideNavigation } from './ad-studio-side-navigation';\r\n\r\nconst isSubPageSelected = (pathname, subPage, rootRoute) => pathname.includes(`${rootRoute}/`) && pathname.match(subPage);\r\nconst subPagesWithoutNavigation = [\r\n /generateimage/,\r\n /images\\/\\d+\\/edit/,\r\n /displaytemplates\\/create/,\r\n /displaytemplates\\/\\d+\\/edit/,\r\n /videotemplates/,\r\n /video\\/create/,\r\n /video\\/\\d+\\/edit/,\r\n];\r\n\r\nconst useStyles = makeStyles({\r\n hideNavigation: {\r\n '& .ad-studio-navigation, .ad-studio-navigation-placeholder ': {\r\n display: 'none',\r\n },\r\n },\r\n height100: {\r\n height: '100%',\r\n },\r\n leftMargin: {\r\n marginLeft: '266px',\r\n },\r\n});\r\n\r\nconst getModeByLayoutSize = (layoutSize) => {\r\n const result = LayoutSizeScale[layoutSize] >= LayoutSizeScale.XL;\r\n\r\n return result;\r\n};\r\n\r\nexport const withAdStudioNavigation = (Component) => {\r\n const Wrapper = (props) => {\r\n const {\r\n history, i18n, ROOT_ROUTE, logger, permissions, adsStudioAccountPreferences,\r\n } = props;\r\n\r\n const [targetDropFolder, setTargetDropFolder] = useState(null);\r\n const [layoutSize, setLayoutSize] = React.useState('XL');\r\n\r\n const dataService = useAdsStudioServices();\r\n useLayoutResizeObserver(setLayoutSize);\r\n const largeSize = useMemo(() => getModeByLayoutSize(layoutSize), [layoutSize]);\r\n\r\n const shouldNotShowNavigation = () => {\r\n if (!largeSize) {\r\n return true;\r\n }\r\n const { location } = history;\r\n const { pathname } = location;\r\n return subPagesWithoutNavigation.some(subPage => isSubPageSelected(pathname, subPage, ROOT_ROUTE));\r\n };\r\n\r\n const onDropToFolder = useCallback((folder) => {\r\n setTargetDropFolder({\r\n newTargetFolder: {}, // force to update targetDropFolder\r\n folder,\r\n });\r\n }, []);\r\n\r\n const resetTargetDropFolder = useCallback(() => {\r\n setTargetDropFolder(null);\r\n }, []);\r\n\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n {_.get(permissions, ['dynamic', 'ASNavigationSwitch']) ? (\r\n
\r\n );\r\n };\r\n\r\n Wrapper.displayName = `withAdStudioNavigation(${getDisplayName(Component)})`;\r\n hoistNonReactStatics(Wrapper, Component);\r\n\r\n return Wrapper;\r\n};\r\n"],"names":["LayoutType","UnStyledDisclaimerEditor","_React$PureComponent","props","_this","_classCallCheck","_callSuper","onSubmit","setState","alwaysShowError","getFirstAlertElementAndFocus","state","isValid","disclaimer","DisclaimerLayout","Title","selected","value","dataToBeSaved","editData","Id","confirm","i18n","getString","repository","create","then","onClose","onDisclaimerAddOrUpdated","catch","errors","_","uniq","message","map","error","isHtmlMessage","DangerousHtmlMessage","finally","withUiBlock","$","usePanel","onValidate","result","preState","toString","data","onLayoutTypeChange","dropdownitems","onSelectedChange","alertNode","ref","current","querySelector","parentElement","firstChild","focus","renderlayoutOptions","item","_jsxs","React","children","concat","_jsx","Alert","level","dismissible","icon","className","renderSettingItem","_ref","settingName","labelText","_ref$helpId","helpId","HelpPopup","topic","hidePopupOption","permissions","isNativeAd","showOnlyPopupLayout","layoutTypeOptions","defaultData","Name","PopupText","LineText","FinalUrls","FinalMobileUrls","dropdownSeleted","cloneDeep","popupSchema","_objectSpread","schema","properties","required","lineSchema","_defineProperty","createRef","_inherits","_createClass","key","header","this","onClick","footer","customNameErrors","nameSetting","ValidatedInput","validationProps","field","errorProcessor","oldError","id","ariaLabel","layoutTypeSetting","role","classes","hideLayoutOption","ValidatedRadioGroup","items","renderItem","onChange","titleSetting","DropdownSelector","selectedItem","onSelect","totalCount","enableArrowKeysSupport","shouldFocusFirstFocusableItemOnMount","getTitlePopupHelpId","customDescriptionErrors","errorProcessorForDescription","popupSetting","getInformationPopupSetting","TextArea","RemainingCharsHint","str","lineSetting","customFinalUrlErrors","finalUrlSetting","ValidatedUrlEditor","mobileUrlSetting","ValidationGroup","length","ErrorMessages","messages","defaultProps","DisclaimerEditor","withDefaultStyles","paddingLeft","display","PopupDisclaimerFilter","DisclaimerSelector","onFetch","_ref$query","query","pageNumber","findAll","where","name","contains","skip","limit","_ref2","total","isMountedFlag","filteredItems","shouldFilterPopup","totalCountToInsert","fetchPopUpDisclaimerTotalCount","onEdit","extension","event","preventDefault","stopPropagation","dropdownSelectorRef","instanceRef","handleClickOutside","onRemove","destroy","getDropdownButtonA11yLabel","label","_ref3","_ref3$query","_ref4","title","href","renderSelectedItem","renderEmptyList","prevProps","toggleSinceUpdated","componentNode","val","selectedDisclaimer","onSelectDisclaimer","mode","pageSize","enableRandomPage","DisclaimerStringMap","DisclaimerLabelText","_TL_","Disclaimers_Campiagn_Description","Disclaimers_Native_Campaign_Description","Disclaimers_Campaign_Hint","Disclaimers_Campaign_Hint_New","Disclaimers_Add","Disclaimers_Create","Disclaimers_DisplayLayout_Label","Disclaimers_DisplayLayout_Popup","Disclaimers_DisplayLayout_AdditionalLine","Disclaimers_DisplayLayout_AdditionalLine_Hint","Disclaimers_Edit","Disclaimers_Name_Label","Disclaimers_Select","Disclaimers_Title_Label","Disclaimers_Title_Default","Disclaimers_Dropdown_Disclaimer","Disclaimers_Dropdown_Disclosure","Disclaimers_Dropdown_MoreDisclaimer","Disclaimers_Dropdown_Offer","Disclaimers_Dropdown_SafetyInfor","Disclaimers_Dropdown_SafetyInformation","Disclaimers_Information_Label","Disclaimers_Edit_Confirmation","Disclaimers_Remove_Confirmation","Disclaimers_Remove_Confirmation_body","Button_Close","Cancel","Save","Edit","Remove","LearnMoreLinkText","RemainingCharactersText_New","ExceededCharactersText_New","Ad_FinalUrl","MobileFinalUrl_Label","Loading","Search_No_Result","DisclaimerNameRequired","DisclaimerInformationRequired","FinalURLRequired","Validation_Base_Field_Not_Valid","Validation_NotEmpty_Required_Field","Validation_String_Max_Length","Validation_String_Invalid_Characters","Validation_Number_Require_Numeric","Validation_Number_Max_Length","Validation_Number_Range_Min","Validation_Number_Range_Max","Validation_Number_Range_Between","Validation_Array_Size_Max","Validation_Array_Size_Between","Validation_Array_Items_Invalid","Validation_Array_Items_Duplicate","Close","EntitySelector_Search_Placeholder","Disclaimers_Should_Check_With_Selected_Disclaimer","EntitySelector_Pagination_Page","EntitySelector_Pagination_TotalPageCountText","EntitySelector_Pagination_PreviousPageText","EntitySelector_Pagination_NextPageText","Modal","document","body","AdsCampaignDisclaimers","onCheckedChange","isTrusted","prev","newValue","enableDisclaimer","onDisclaimerCheckboxChange","errorMessage","isCheckboxFocusStyle","updatedExtension","arguments","undefined","onAddClick","e","isAddOpen","onEditUIClose","EditingDisclaimer","resetSelectedDisclaimer","getValues","campaignName","isForNew","validate","DisclaimerAdsEnabled","campaignInfo","campaignId","Campaign","CampaignName","AdExtensionAssociations","Type","Status","valid","validateAndWarn","selectedDisclaimerInfo","testRef","bind","prevState","errorMeassageClearIfNeeded","onDataChange","disclaimerEditor","addContent","Panel","isOpen","panelClassName","panelReadyAriaLabel","onRequestClose","shouldCloseOnOverlayClick","overlayClassName","selectorContent","errorsContent","disableTitle","AllowDisclaimerEnabled","Checkbox","checked","isDisclaimerCheckboxDisabled","viewModelToBulkModelForDisclaimerAssociation","campaignViewModel","association","useStyles","adsStudioColorPicker","width","height","borderBottom","tokens","strokeWidthThin","colorNeutralStroke2","margin","flex","justifyContent","alignItems","editBtn","borderRadius","borderRadiusCircular","backgroundColor","colorNeutralBackground1","backdropFilter","delBtn","border","fontSize","fontSizeBase300","color","colorNeutralForeground2","padding","spacingVerticalM","flexColumn","flexDirection","hr","position","left","right","colorNeutralStroke1","tooltip","maxWidth","adsStudioColorPalette","paletteAddColor","borderRadiusXLarge","paletteColor","paletteBox","strokeWidthThick","newColor","colorPickerStyles","panel","root","minWidth","flexPreviewBox","styles","flexContainer","flexSlider","spacingHorizontalSNudge","borderRadiusMedium","colorRectangle","minHeight","getSkeletonStyles","row","gap","flexWrap","colorNeutralStencil1","TooltipContent","colorData","onColorChange","onDelete","ColorPicker","HexCode","alphaType","showPreview","Button","isColorSelected","updateColor","onTooltipVisibilityChange","Tooltip","content","ev","colorObj","withArrow","relationship","positioning","visible","onVisibleChange","_ev","useHandleCloseColorPicker","isSelected","setIsSelected","popupRef","useCallback","target","includes","hex","useEffect","addEventListener","removeEventListener","useCheckDuplicateColor","allowDuplicates","paletteData","onUpdate","isDuplicate","setIsDuplicate","onUpdateColor","some","defaultState","BrandColors","showEditBtn","enableEditBtn","showTooltipOnSelect","defaultSelected","hideCaption","palletteBoxSize","paletteColorSize","setShowEditBtn","useState","setColorData","onMouseEnter","style","boxShadow","onMouseLeave","tabIndex","onKeyDown","size","visibility","Caption1Strong","ColorAddButton","totalColors","PaletteSkeleton","Skeleton","SkeletonItem","subTitle","text","isLoading","maxColors","helpTopic","helpLabel","renderHelpBubble","useMemo","HelpButton","FormCard","FormCardDefaultHeader","contentAfter","contentBefore","FormCardBody","Body1Strong","filtersReducer","action","actionType","actionData","_objectWithoutProperties","_excluded","type","humanizedValue","_toConsumableArray","newState","filter","initialState","newHumanizedValue","index","filterToUpdate","isFilterAlwaysVisible","splice","filterWithValues","useMenuStyle","makeStyles","menuButton","shorthands","marginLeft","paddingRight","fontWeight","NewFilterContextMenu","allSupportedFilters","filters","onAddNewFilter","isFocused","buttonRef","useRef","_useState","_useState2","_slicedToArray","checkedValues","setCheckedValues","values","f","FilterType","SearchText","isFilterAlreadySet","disabled","canCheck","checkedItems","newCheckedValues","forEach","Menu","MenuTrigger","MenuButton","mergeClasses","MenuPopover","MenuList","MenuItemRadio","FilterBarContainerImpl","addNewFilter","removeAllFilters","removeEmptyFilters","updateFilter","removeFilter","isEditingFilter","setIsEditingFilter","onFilterValueChange","ianaTimeZone","dateFormat","isAdsStudioAIGCMVPEnabled","focusedFilterRef","defaultOpenFilterRef","onClickAddFilterButton","onClickReadonlyFilter","onCloseEditingFilterBar","onResetClick","newFilter","TopRatedPerformance","initValue","topRated","initHumanizedValue","onRenderNewFilterContextMenu","onValueChange","curFilterState","onDropdownDismiss","onRenderReadonlyFilter","isLast","PerformanceSearchTextFilterComponent","FilterComponents","getPerformanceFilterComponents","onRenderEditingFilter","focused","isDefaultOpen","FilterComponent","defaultOpen","PerformanceEditingFilterBar","focusedFilter","onRenderFilter","onCloseClick","PerformanceReadonlyFilterBar","onClickFilter","FilterBarContainer","PERFORMANCE_PAGE_FILTER_BAR_INIT_STATE","AllSupportedFilters","useFilterBar","currentFolderId","_ref$initialState","_useAdStudioFiltersRe","supportedFilterTypes","_ref2$initialId","initialId","_useReducer","useReducer","_useReducer2","dispatch","idGeneratorRef","getNextId","Number","MAX_SAFE_INTEGER","overwriteFilters","filterTypeMeta","_ref5","useAdStudioFiltersReducer","isAnyFilterSet","searchText","dateAddedFilter","minImageHeight","minImageWidth","importSource","searchLocationFilter","topRatedFilterChecked","assetSources","CSMLTimeFrame","Anytime","selectedFilters","AssetType","VideoDuration","ImportSource","AssetSource","renderFilterBar","allFilters","isEditing","_useState3","_useState4","effectiveFilters","setEffectiveFilters","isDateChanged","filterValues","reduce","acc","DateAdded","dateAddedDateRange","dateAddedFilterCustomDateRange","Custom","dateAddedChoiceOptions","getDateAddedChoiceOptions","o","range","start","end","isGlobalSearch","ROOT_FOLDER_ID","v","assetTypeFilter","FolderAssetType","Image","hasPerfData","civilDateRangeEqual","filterStates","usePerformancePageStaticStyles","makeStaticStyles","outline","colorStrokeFocus2","usePerformancePageStyles","assetLibraryPerformancePageContainer","overflow","subMenu","flexGrow","inlineDownloadContainer","usePerfTableStyle","imagePreviewContainer","imagePreviewAndNameContainer","opacity","transition","top","useImagePreviewRawStyles","hostStyles","actionButtonStyles","COLUMN_KEYS","toolbarFilterContainer","paddingTop","alignSelf","columnKeyToSortBy","_columnKeyToSortBy","asc","CSMLSortBy","AssetIdAsc","desc","AssetIdDesc","ImageName","ImageNameDesc","LastCreatedAsc","LastCreated","MostRecentAsc","MostRecent","ClickAsc","ClickDesc","ClickPeriodAsc","ClickPeriodDesc","ClickChangeAsc","ClickChangeDesc","ClickChangePercentAsc","ClickChangePercentDesc","CTRAsc","CTRDesc","CTRPeriodAsc","CTRPeriodDesc","CTRChangeAsc","CTRChangeDesc","CTRChangePercentAsc","CTRChangePercentDesc","ImpressionAsc","ImpressionDesc","ImpressionPeriodAsc","ImpressionPeriodDesc","ImpressionChangeAsc","ImpressionChangeDesc","ImpressionChangePercentAsc","ImpressionChangePercentDesc","SpendAsc","SpendDesc","SpendPeriodAsc","SpendPeriodDesc","SpendChangeAsc","SpendChangeDesc","SpendChangePercentAsc","SpendChangePercentDesc","formatDate","date","ImagePreview","folderAssetType","url","thumbnailUrl","previewUrl","FluentImage","imageFit","ImageFit","cover","src","alt","maximizeFrame","calloutProps","gapSpace","ActionIconButton","iconName","iconProps","TooltipHost","IconButton","ImagePreviewAndName","highlightedText","onGotoDetailPage","onGotoEditPage","imageName","TextWithHighlight","enableTooltip","AssetColumn","renderHeaderWithPopup","isCollapsible","isResizable","sortable","onRenderHeader","sortIcon","onRender","odataColumnName","IdColumn","isRowHeader","CreatedColumn","createdTime","ModifiedColumn","modifiedTime","ClicksColumn","compareOn","currentPeriod","lastPeriod","fieldName","subColumns","CTRColumn","ImpressionsColumn","_ref6","SpendColumn","_ref7","UsageColumn","_ref8","OpenRegular","textWrap","textAlign","lineHeight","appearance","useInlineChartContainerStyle","inlineChartContainer","flexShrink","zIndex","paddingBottom","fallbacks","fontFamily","float","marginRight","backgroundRepeat","backgroundImage","CircleSolid","CircleDotted","DiamondSolid","DiamondDotted","maxHeight","whiteSpace","verticalAlign","cursor","fontStyle","textDecoration","speak","fontVariant","textTransform","WebkitFontSmoothing","MozOsxFontSmoothing","Waterdrop","backgroundPositionX","backgroundPositionY","borderLeft","borderRight","marginTop","backgroundSize","PerformancePageComponent","navigation","notificationApi","reload","renderToolbarContainer","renderDetailsList","renderInlineChart","dataService","getChartPreference","perfMetricDateRange","adsStudioUserPreferences","renderDatePicker","logger","useInlineDownload","createFolderFilterQuery","performancePagePerfMarker","pagePerfMarker","isAIGCRegionRestricted","setDataLoaded","chartClasses","isChartShown","setChartShown","isPageInited","setPageInited","_ref$assets","assets","_ref$totalAssetCount","totalAssetCount","loadDataInDateRange","loadDataArgs","perfTimeSeriesData","loadPerfTimeSeriesData","loadMoreDataInDateRange","dataOwnerPageName","renameAsset","onFailedToLoadData","showWarning","logTrace","_useFilterBar","_useInlineDownload","isDownloadShown","setDownloadShown","renderInlineDownload","_useLoadData","perfMarker","loadingData","setLoadingData","loadingMoreData","setLoadingMoreData","loadNextPage","count","err","loadDataAsync","sortBy","otherFilters","assetsToLoadForSubfolders","includeParentHierarchy","includeSubfolders","pageName","AdsStudioPageName","PerfPage","createChild","useLoadData","assetId","gotoAssetDetails","loadMoreData","gotoEditImagePage","imageId","_useTableColumns","_ref9","dateRange","isSorted","isSortedDescending","sortByColumn","setSortByColumn","expandedColumns","setExpandedColumns","onUsageClick","_ref10","gotoAdsPageWithAssetIdFilter","columns","compared","col","isExpanded","getInlineDownloadColumns","localizedHeaders","odataColumnNames","subCol","push","getHeaders","_ref11","sortByKey","_ref12","expandColumns","newColumns","cols","_ref13","prevCols","useTableColumns","_usePerformancePage","setPageNumber","DEFAULT_PAGE_SIZE","setPageSize","onPageChange","number","onPageSizeChange","setPerfTablePageSize","pager","pagedItems","slice","itm","usePerformancePage","hasNoData","shouldShowChart","isPageLoading","toolbar","filterBar","onSort","newSortByColumn","setPerfTableSortBy","getInlineDownloadFilter","serializedFilter","stringifySync","args","folderId","filterUrlParam","filterArgs","perfTablePageSize","perfTableSortBy","willFetchData","tap","ret","ImageAssetsCount","folder","itemCount","totalRowCount","tapCatch","willRender","usePageActiveTimeTracker","chartPreference","showChart","updateAssetDetailsParams","classnames","Overlay","AdsStudioSpinner","assetLibraryAccountPreferences","Promise","useHomePageStyle","homePage","topBanner","boxSizing","homepageBanner","texts","searchContainer","searchBoxWrapper","searchBox","borderBottomRightRadius","borderBottomLeftRadius","sendIcon","bottom","subHeading","paragraph","itemContainer","btnWrapper","leftWrapper","rightWrapper","leftBtn","rightBtn","overlay","leftOverlay","rightOverlay","slider","scrollBehavior","overflowX","pointerEvents","scrollbarWidth","cardContainer","footerContainer","marginBottom","imageRowContainer","imageWrapper","transform","image","objectFit","transitionProperty","transitionDuration","transitionTimingFunction","overlayText","overlayButton","outlineColor","TopHomePageBannerComponent","onSearch","_React$useState","_React$useState2","searchQuery","setSearchQuery","handleSearchChange","trim","getHomePageTopBannerContainerStyle","Textarea","placeholder","Send20Regular","serverContext","useImageCardStyles","imageCardListItem","imageCard","imageCardThumbnail","imageCardFooter","imageCardFooterContent","rowGap","imageIconAndName","textOverflow","imageCardCaption","ImageAssetCard","asset","ariaSetsize","ariaPosinset","onClickCard","assetName","imageTimeCaption","getTimeDescription","handleImageAssetClick","imageAsset","handleImageAssetKeyDown","ListItem","Card","CardPreview","originalUrl","CardFooter","Image20Regular","Body1","Caption1","useFolderCardStyles","folderCardListItem","card","cardPreview","footerContent","iconAndName","folderName","caption","imageGrid","justifyItems","colorNeutralBackground3","thumbnailImage","oneImage","twoImages","gridTemplateColumns","threeImages","gridTemplateRows","gridArea","fourImages","FolderAssetCard","navigateIntoFolderItem","assetsToPreview","filteredAssets","Video","status","VideoStatus","Active","Array","isArray","handleFolderAssetClick","folderAsset","gotoLibraryPage","handleFolderAssetKeyDown","getGridClass","modifiedTimeString","Folder20Regular","useVideoCardStyles","videoCardListItem","videoCard","videoCardThumbnail","videoCardPreviewPlaceholder","videoCardFooter","videoCardFooterContent","videoIconAndName","videoName","videoCardCaption","VideoAssetCard","currentActivedCardId","videoTimeCaption","videoCardPreview","defaultContent","Unverified","UnverifiedPlaceholderWithStyle","placeholderContent","Draft","EncodingPlaceholderWithStyle","Failed","FailedPlaceholderWithStyle","onCloseDetail","handleVideoAssetClick","videoAsset","handleVideoAssetKeyDown","Video20Regular","AssetCard","adsStudioAccountPreferences","handleRealUsedFlag","RealUsedFlagSuffix","App","Folder","getAssetListBarCarouselStyle","sliderRef","scrollPosition","setScrollPosition","showArrowLeft","setShowArrowLeft","_useState5","_useState6","showArrowRight","setShowArrowRight","computeMaxScrollWidth","scrollWidth","clientWidth","goLeft","newPosition","Math","max","goRight","maxScroll","min","isHideSection","_Fragment","ChevronLeft16Regular","List","navigationMode","ChevronRight16Regular","GenerateWithAIComponent","onGenerateImage","loadingStatus","getHomePageGenerateWithAIComponentStyle","wrapperRef","exampleList","setExampleList","onInputChange","handleSearch","wrapperWidth","offsetWidth","maxCount","floor","newList","AIPromptExamples","updateExampleList","debounce","entries","resizeObserver","window","ResizeObserver","observe","unobserve","Input","imageSrc","promptText","useActionAssetCardsStyle","ActionAssetCards","aid","cid","oDataConfig","openSystemUploadRef","isXandrIntEnabled","dynamic","XandrIntegrationEnabled","account","useJsData","jsData","Account","find","resolve","isXandrIntegrationEnabled","isValidXandrAccount","cardData","getHomePageCardData","onClickUpload","gotoUploadFilesPanelPage","openSystemUpload","onClickStock","gotoStockImagePanelPage","onClickInvest","gotoInvestImagePanelPage","onClickWebsite","gotoWebsiteImagePanelPage","AddAssetEntryCard","description","isFillWidth","useImageBackgroundSectionStyles","backgroundCardContainer","uploadCard","uploadIcon","uploadFrame","uploadCaption","uploadButton","staticBackgrounds","background1","background2","background3","background4","background5","background6","background7","background8","background9","background10","ImageBackgroundCards","handleImageUploadClick","gotoBackgroundRemovalModal","onExampleImageKeyDown","imageUploadIcon","background","HomePage","libraryDataService","homePagePerfMarker","loadData","_dataService$assets","setGenerateImageExample","useContext","GenerateImageContext","isAdsStudioBackgroundChangeEnabled","setClarityTag","LoadAdsStudioHomePage","isRecentSorting","addAdStudioSurveyTriggerFlag","AdStudioSurveyTriggerFlag","gotoSearchResultPage","AIGCHandler","prompt","imageUrl","gotoAIGenerationPanelPage","sortedAssets","reverse","useCustomSize","customStyle","HomePageTopBannerComponent","AssetListBarCarousel","HomePageGenerateWithAIComponent","HomePageComponent","useImagesPageStyle","imagePage","useImageBannerContainerStyle","descriptions","entryCard","useImageCardContainerStyle","useImageEmptyViewStyle","emptyView","emptyIcon","mainText","neutralForegroundRest","useVideoPageStyle","videoPage","useVideoPageTopBannerContainerStyle","videopageBanner","useVideoCardContainerStyle","useVideoEmptyViewStyle","useSearchResultViewStyle","searchResultView","breadcrumbButton","breadcrumbButtonCurrent","headerContainer","headerTitle","defaultSearchQuery","AssetsEntryCardContainer","getEntryCardData","isImagePage","onClickCreate","ImageGridView","isSearchResultPage","cropDataService","totalLibraryAssetCount","isLoadingMore","setIsLoadingMore","imageCroppingTasks","loadedAssetsList","updatedAssets","getUpdatedAssets","updates","imagesGridSection","sectionName","GridSectionName","Asset","sectionClassName","itemKey","totalItemCount","config","scrollContainer","minItemHeight","sectionGridData","hasLibraryAssets","manualAddedImageSourceType","ManualAddedImageSource","Library","libraryAssets","onRenderCell","_index","AdsStudioAssetGridCell","onDetailsClick","onEditClick","editImageUrl","ShutterStock","onRenderLoadingCell","TilesGridLoadingCell","onLoading","SectionTilesGrid","sectionData","ImagesTopBannerComponent","ImageEmptyView","isSearchResult","EmptyViewIcons","ImageEmptyViewSVG","ImagesPage","imagePagePerfMarker","useAdsStudioServices","FilterContext","_useMemo","getFilters","_useMemo$searchText","_useMemo$sortBy","isSemanticSearch","ImagesFilterBar","searchboxPlaceHolder","userPreference","ImagesPageComponent","actionTypes","reducer","payload","images","logos","colors","fonts","taglines","brandVoice","brandTones","container","WarningDialogueContent","EntryCardSVGIcons","WarningSVGIcon","Subtitle1","block","useCommonDialogueStyles","typographyStyles","body1","spacingVerticalL","spacingHorizontalXXL","columnGap","spacingHorizontalL","spacingHorizontalS","horizontalDivider","spacingVerticalS","spacingHorizontalNone","dialogueContentContainer","dismissIcon","loadingText","marginBlockEnd","marginBlockStart","spacingVerticalXXL","loadingContainer","warningFooter","gridColumnEnd","gridColumnStart","justifySelf","useCreateWithWebsiteDialogueStyles","domainInputWrapper","suggestionErrorInvalid","spacingVerticalXS","caption1","CreateWithWebsiteDialogueContent","isValidDomain","onChangeValidDomain","brandKitCreationPayload","isNewBrandCreateWarningEnabled","onChangeBrandKitCreationPayload","commonClasses","dialogueClasses","Field","weight","DomainInputView","isDomainInvalid","onDomainChange","domain","isValidUrl","domainInputWrapperClassName","errorMessageClassName","CreateWithWebsiteDialogue","onCreateBrandKit","disableNewBrandKitWarning","isBrandKitCreationInProgress","isDialogueOpen","setIsDialogueOpen","_React$useState3","_React$useState4","setNewBrandCreateWarningEnabled","_React$useState5","_React$useState6","setIsValidDomain","_React$useState7","_React$useState8","setBrandKitCreationPayload","Dialog","open","onOpenChange","_e","dialogueData","DialogTrigger","disableButtonEnhancement","cardClassName","WebsiteSVGIcon","DialogSurface","DialogBody","DialogTitle","StyleGuide24Regular","Subtitle2","Dismiss20Regular","Divider","DialogContent","Body2","ProgressBar","thickness","DialogActions","console","info","filesPerRowInPreviewGrid","getFileUploadContainerStyles","_ref$palette","palette","spacingVerticalNone","spacingHorizontalXXXL","extend","btnStyle","borderStyle","borderColor","getFileUploadButtonStyles","_ref2$palette","button","useFileUploadStyles","filesContainer","spacingHorizontalXL","fileContainer","shadow4","colorNeutralBackground2","filePreviewImageIcon","spacingHorizontalXS","filePreviewContent","uploadFilesButton","fileUploadError","colorPaletteRedBackground3","FILE_ERROR_TYPES","LegacyStringMap","FilePicker_ButtonText_ChooseFile","FilePicker_ButtonText_RemoveFile","FilePicker_FileExtensionInvalid","FilePicker_FileInvalid","validateFiles","files","_ref$minFileSize","minFileSize","_ref$allowedTypes","allowedTypes","_ref$maxFileSize","maxFileSize","validationResult","hasError","i","file","uniqueId","fileTypesToCheck","replace","toLowerCase","fileType","split","errorType","formatFileSize","bytes","decimals","dm","sizeUnitIndex","log","fileSize","getLocalizedFileSizeTextsBySize","formatDecimal","pow","maximumFractionDigits","minimumFractionDigits","uploadFiles","_x","_uploadFiles","apply","_asyncToGenerator","_regeneratorRuntime","mark","_callee2","filesToUpload","uploadFile","updatedFiles","wrap","_context2","next","_callee","_context","reject","shouldReject","random","setTimeout","Error","uploaded","t0","abrupt","stop","_x2","all","sent","FilePreview","progress","onDeleteFile","uploadTried","PdfSVGIcon","ErrorCircle20Regular","colorPaletteDarkOrangeBackground3","CheckmarkCircle20Regular","colorPaletteGreenBackground3","Text","truncate","Delete16Regular","FileUpload","dragOrDropTip","disableAddMore","dragOrDropLabel","onFilesUploaded","previewFilesPerRow","maxFilesCountAllowed","dragOrDropDescription","fileUploadContainerClasses","useDefaultStyles","fileUploadButtonClasses","setFiles","uploadError","setUploadError","legacyI18n","buildLegacyI18n","ValidationStringMap","handleDeleteFile","fileToDelete","prevFiles","handleFilesUpload","updatedFilesArray","updatedFile","fileIndex","findIndex","onFileRead","fileSources","filesToUploadCount","fileSourcesArray","from","onError","join","Stack","Item","grow","AddSquare24Regular","FilePicker","useButton","enableMultiple","hideDescription","enableDrag","showErrors","allowedFileExtensions","fileDraggerTip","fileDraggerLabel","fileDraggerDropDescription","variant","UploadBrandGuideDialogueContent","UploadBrandGuideDialogue","UploadSVGIcon","CreateManuallyAction","CreateManualBrandKitSVGIcon","getActionsCardsStyles","cards","BrandActionCards","setIsBrandKitCreationInProgress","handleBrandKitCreation","useBannerContainerStyles","bannerContainer","bannerBackground","heading","Banner","hideActionsMenu","Title2","useSuggestionsStyles","colorNeutralForeground1","panelBody","SuggestionLoadingSkeleton","animation","SuggestionPanel","loading","suggestions","Sparkle20Regular","TagGroup","suggestion","InteractionTag","InteractionTagPrimary","useTaglinesStyles","loadingItem","taglineItem","taglineItemInput","spacingVerticalXXS","colorNeutralForeground3","TaglinesLoadingSkeleton","shape","TaglineItem","tagline","isDeleteDisabled","maxAllowedCharacters","inputId","useId","autoFocus","align","a","Delete24Regular","Taglines","onChangeTaglines","maxAllowedTaglines","maxAllowedCharactersPerTagline","isAddTaglineButtonDisabled","newTaglines","handleDeleteTagline","substring","handleChangeTagline","Add20Regular","defaultFonts","Label","TextAssetType","Typeface","Weight","overrideFontWeights","useFontsSelectorStyles","sectionContainer","fontsContainer","fontSelectContainer","fontSelect","fontWeightSelect","fontSelectContainerHeader","defaultFont","fontFamilies","defaultFontWeight","FontSelector","font","onChangeFont","onChangeWeight","Body1Stronger","FontsFamilySelector","FontsWeightSelector","selectClassName","FontsSelector","onChangeFonts","fontsToRender","foundFont","handleChangeFont","selectedFont","updatedFonts","listPanel","borderRadiusLarge","subtitle2","addBtn","actionBtns","borderRadiusSmall","list","imageData","showActionBtn","setShowActionBtn","ThumbnailUrl","ListSkeleton","fill","ListPanel","headerProps","onAdd","displayedImages","idx","buttonWrapper","aspectRatio","imageEditorContainer","shadow2","spinner","LogoFormat","BrandKitLogoEditPanel","dismiss","format","minLogoSize","lightBackground","hasLandScapeLimit","hasSquareLimit","showBackgroundSettings","darkBackground","cropSettings","setAspectRatio","useInLightBackground","setUseInLightBackground","useInDarkBackground","setUseInDarkBackground","currentCropSettings","setCurrentCropSettings","MinLogoSize","maxCropHeight","Height","landscapeEnabled","Width","sqaureEnabled","updateAspectRation","SourceX","SourceWidth","SourceHeight","useClarityTags","ClarityTags","LaunchedAdsStudio","EditBrandKitLogo","onRenderFooterContent","AdsStudioPanelContainer","headerText","RadioGroup","Radio","ImageCropWithBoundingBox","baseImage","onCropSettingsChanged","minCropSize","Spinner","ImageListElement","maxLimit","maxSquareLogosLimit","maxLandscapeLogosLimit","elementType","preferenceService","panelTitle","panelSubtitle","updateOrCreateBrandKit","openLogoEditPanel","setOpenLogoEditPanel","selectedImageIdx","setSelectedImageIdx","setErrorMessage","_useImagePicker","useImagePicker","displayImagePicker","setDisplayImagePicker","selectedMediaPanelSource","setSelectedMediaPanelSource","clearErrorMessage","minSizeConfig","constants","brandkitMinSize","selectedImage","openImageEditPanel","onEditImage","currentTarget","dataset","fullUrl","Url","getImageDetailAsync","naturalWidth","naturalHeight","newData","onAddImage","closeLogoEditPanel","onSelectImages","squareLogoCount","logo","ImageType","squareSettings","getCenterCroppedSettings","SourceY","landScapeSettings","logoType","CropX","CropY","CropWidth","CropHeight","SubType","processImageAssetPayload","_imageMinSizeValidati","filterImagesAsset","imageMinSizeValidation","_duplicateImagesValid","hasDuplicateError","duplicateImagesValidation","onApplyEditLogo","UploadImage","isBrandKit","disabledAssetSources","CSMLAssetSource","Shutterstock","BrandKitContext","createContext","BrandKitProvider","_React$useReducer","_React$useReducer2","context","Provider","displayName","contentPanel","spacingVerticalMNudge","body1Strong","spacingVerticalXL","contentPanelTitle","contentPanelSubtitle","contentPanelHeader","lineHeightBase300","contentPanelSubheader","SegmentSkeleton","lineCount","ContentPanel","bodyContent","brandVoiceSegment","brandPersonalityTextarea","brandToneInput","brandToneCaption","brandPersonalityTagGroup","brandToneAccordion","BrandVoice","I18nContext","_useContext","setBrandVoice","selectedOptions","setSelectedOptions","inputValue","setInputValue","mockCopilotSuggestionIndexes","setMockCopilotSuggestionIndexes","handleUpdateTaglines","updatedTaglines","handleSetBrandVoice","handleAddSelectedOptions","options","Set","innerText","handleRemoveSelectedOption","tag","handleChange","handleKeyDown","mockCopilotToneSuggestions","refreshMockCopilotSuggestions","numbers","randomNumber","brandPersonalityPlaceholder","MicSparkleRegular","InfoRegular","as","onDismiss","option","Tag","TagPicker","onOptionSelect","TagPickerControl","expandIcon","AddSquareRegular","TagPickerInput","TagPickerList","TagPickerOption","Accordion","collapsible","AccordionItem","AccordionHeader","expandIconPosition","AccordionPanel","AddRegular","ArrowClockwiseRegular","TextFontRegular","useBrandKitPageStyle","brandKitPage","brandElements","BrandElements","fetchBrandKitData","brandKitDataService","brandkitName","_ref2$fonts","_ref2$images","_ref2$logos","_ref2$palettes","palettes","squareLogosCount","landscapeLogosCount","brandKit","_yield$brandKitDataSe","_yield$brandKitDataSe2","createBrandKits","updateBrandKit","colorId","updatePalette","onDeleteColor","colorid","onUpdateFonts","maxLogosLimit","MAX_LANDSCAPE_LOGOS","maxImagesLimit","classNames","BrandKitImageListElement","BrandKitLogoIconSVG","ImageRegular","BrandKitFontsSelector","TabValues","BrandKitPage","imageEditService","brandKitPagePerfMarker","rest","setLoading","selectedTab","setSelectedTab","onTabSelect","response","getBrandKits","isBrandKitUIPhase2Enabled","BrandKitUIPhase2","BrandKitPageBanner","TabList","selectedValue","Tab","Component","BrandKitPageComponent","useTemplateImageStyles","templateWithCaption","darkGrayText","grayText","useTemplateGridStyles","gridContainer","skeletonContainer","filtersRow","filterButton","TemplateImageCard","templateGroupId","templateAttributes","setClickedTemplate","onAction","templateGroupName","Caption2","_templateAttributes$a","assetCounts","logoCount","imageCount","textAreaCount","getAssetCountInfo","TemplateGrid","templates","templateTagOptions","templateAttributesMap","selectedFilter","setSelectedFilter","filterOptions","brandAwareness","performance","ToggleButton","template","preview","useTemplateCarouselStyles","carousel","carouselItemContainer","colorNeutralBackground6","carouselItem","CarouselItem","TemplateDetailsCarousel","previews","Carousel","groupSize","circular","CarouselViewport","CarouselSlider","CarouselCard","CarouselNavContainer","layout","CarouselNav","CarouselNavButton","useTemplateDetailsModalStyles","dialog","dialogContentContainer","detailsContainer","textGroup","errorMsg","colorStatusDangerForeground1","TemplateDetailsModal","fetchDisplayAdsTemplateGroupDetails","handleFailedToLoadData","show","onShowChange","onSelectTemplate","templateCount","setTemplateCount","templateImages","setTemplateImages","templateGroupDetails","setTemplateGroupDetails","_useState7","_useState8","setIsPageLoading","_useState9","_useState10","setUrl","_useState11","_useState12","urlError","setUrlError","details","detail","displayAdsTemplateDetails","displayAd","onGetStartedButton","DismissIcon","carouselContainer","UrlInputFluent","urlErrors","newUrl","textFieldAriaLabel","additionalProperties","useDisplayTemplatesPageStyles","displayTemplatePage","names","DisplayTemplatesPage","displayTemplatesDataService","displayTemplatePagePerfMarker","setTemplates","selectedTemplatePreview","setSelectedTemplatePreview","openModal","setOpenModal","activity","ActivityContext","setData","DataContext","fetchDisplayAdsTemplateGroups","displayAdsTemplateGroup","DisplayTemplateHomePage","onViewTemplateDetails","templateName","onChooseTemplate","signal","gotoDisplayTemplatesCreationPage","onCloseModal","TopBanner","DisplayTemplatesPageComponent","useCreateDisplayTemplatePageStyles","page","editorContainer","ToastComponent","dismissToast","toastId","Toast","ToastTitle","ToastTrigger","ToastBody","ToastFooter","Link","gotoCampaignUIPage","subpath","useNotify","dispatchToast","useToast","intent","timeout","politeness","CreateDisplayTemplatePage","brandkitApiState","instrumentation","search","displayTemplateCreatePagePerfMarker","templateDetails","detailsData","_ref2$templateGroupId","queryString","notify","gotoDisplayTemplatesPage","removeSearchQuery","AdditionalQueries","TemplateGroupId","CreateDisplayTemplate","DisplayAdsEditor","showSummaryBarControl","showRecommendationsBanner","hasFetchBrandKitData","hasUpdateBrandKitData","templateData","containerClassName","saveInNewFolder","onSaveSuccess","reloadFolderPathTreeItem","gotoImagesPage","scenarioName","activityName","CreateDisplayTemplatePageComponent","useEditDisplayTemplatePageStyles","EditDisplayTemplatePage","displayTemplateEditPagePerfMarker","_ref2$folderId","_ref2$templateId","templateId","setTemplateDetails","templateConfig","setTemplateConfig","setDisplayAd","sourceType","setSourceType","imageDetails","displayAdFromStorage","metadata","EditDisplayTemplateImage","getImageById","gotoHomePage","TemplateId","FolderId","fetchDisplayAdsTemplateDefinition","Data","latestTemplate","displayAdsTemplateDefinitions","templateDefinition","version","EditDisplayTemplatePageComponent","useFolderGridCellWithContextMenuStyle","folderCellContextMenuButton","FoldersGridCellWithContextMenu","isReadonly","onSelectMenuItemClick","onOpenMenuItemClick","onDeleteMenuItemClick","onRenameMenuItemClick","onViewPerformanceClick","menuItems","getMenuItems","renderAccessory","MoreVertical20Regular","menuItem","MenuItem","AdsStudioFoldersGridCell","AdsStudioFoldersGridCellWithContextMenu","useModalStyle","nameInput","EditFolderNameModalImp","onComplete","onCancel","errorText","setErrorText","initName","setName","onConfirm","handleCancel","isSaveButtonDisabled","defaultValue","EditFolderNameModal","CreateFolderModal","isDialogVisible","setDialogVisible","createFolderAsync","onSuccess","closeDialog","onCreateFolder","alODataErr","actionable","getUXMessage","localizedUXMessage","getFoldersLimitPerAccount","logError","DeleteConfirmDialog","showConfirmDialog","setShowConfirmDialog","deleteApiAsync","warningMsg","showUIBlocker","setShowUIBlocker","closeConfirmDialog","ConfirmDialog","isDisplayed","confirmString","cancelString","onClickConfirm","onClickCancel","isUiBlocked","overflowWrap","useDeleteConfirmDialog","deletedItems","render","onItemDeleted","uxMessage","RenameFolderModal","renameFolderAsync","onRenameFolder","newFolderName","useSummaryResultDialogStyles","summaryMessage","summaryListContainer","overflowY","borderTop","grid","gridCell","gridHeaderCell","useImagePreviewStyles","useValueWithTooltipViewStyles","overflowLeft","direction","customToolTip","toolTipContentHeader","toolTipContent","useAssociationsButtonStyles","associationsButton","ValueWithTooltip","valueDescription","ellipsisOnLeft","Associations","availableActions","gotoAds","onRenderPreview","fit","headerWithPopup","popupId","helpPopup","colPreview","columnId","compare","b","localeCompare","colId","colName","colPath","path","colType","colError","shortErrMsg","colDeletionError","colMoveError","colAssociations","columnSizingOptions","SummaryResultModal","summary","modalType","DataGrid","resizableColumns","DataGridHeader","DataGridRow","DataGridHeaderCell","DataGridBody","rowId","columnItem","DataGridCell","ASSET_TYPES","useToolbarStyles","colorBrandBackground","toolbarButton","LibraryPageToolbar","onMoveTo","onClear","selectedCount","Toolbar","ToolbarButton","DeleteRegular","ArrowStepOverRegular","DismissRegular","LibraryPageComponent","assetLibraryUserPreferences","libraryPagePerfMarker","allowedAssetType","useBatchMoveModalHook","renderHelpPopup","targetDropFolder","resetTargetDropFolder","reloadingFolders","setReloadingFolders","setSearchLocationFilter","selectedAssets","setSelectedAssets","selectedFolders","setSelectedFolders","batchDeleteWarningMsg","setBatchDeleteWarningMsg","singleImagePromises","selectedItemCount","createFolderModal","useCreateFolderModal","renameFolderModal","folderItemRef","useRenameFolderModal","confirmDeleteFolderDialog","_useDeleteConfirmDial","deleteFolderAsync","ignorable","useDeleteFolderConfirmDialog","confirmBatchDeleteDialog","_useDeleteConfirmDial2","batchDeleteAsync","folderCount","assetCount","useBatchDeleteConfirmDialog","confirmDragAndDropDialog","targetFolderItemRef","targetFolder","batchMoveApiAsync","destFolderId","useDragAndDropConfirmDialog","batchMoveModal","summaryResultModal","isModalVisible","setModalVisible","titleRef","summaryRef","columnsRef","itemsRef","openDeleteSummaryResultModal","assetType","shortMsg","FolderIcon","failedAssetCount","failedFolderCount","strIdx","closeModal","openFolderDeleteSummaryResultModal","openBatchDeleteSummaryResultModal","openBatchMoveSummaryResultModal","assetsSummary","foldersSummary","assetErrors","folderErrors","useSummaryResultModal","resetSelectionState","createFolder","reloadFolders","navigateIntoFolder","deleteFolder","renameFolder","batchDelete","batchMove","resetFolderData","folders","showNotificationError","msg","buttonLabel","onButtonClick","_ref2$autoClose","autoClose","nid","dangerouslySetInnerHTML","__html","newTargetFolder","onCreateFolderClick","renderTilesGridCell","selectItem","onSelectCell","onDrag","currentListItem","getElementById","onFolderClick","FoldersGridCell","selectable","renameItem","deleteItem","subFolder","gotoPerformancePage","draggable","droppable","onDrop","assetItem","metaData","gotoEditVideoPage","videoId","isMultiSelecting","renderToolbar","onSelectionChange","selectedItems","_item$id","useCache","checkSelectedAssetsPromise","_asset$id","assetsList","hasVideoImage","isSceneKeyFrame","sectionSelectedItems","callAsyncApi","asyncApi","_len","params","_key","reloadFolderPathTreeFolderIdArr","batchMoveAsync","onBatchMoveSuccess","_ref15","showInfo","AdsStudioLibraryPageContent","dropdownWidth","renderGridCell","dataLoaded","multiSelectionEnabled","searchLocationFilterState","setSearchLocationFilterState","displayFolderPath","HiddenDivForAnnounce","toAnnounce","_ref14","isAssetLibraryAIGCMVPEnabled","isVideoTemplateEnabled","VideoTemplateUI","cardKeys","isVideoPage","gotoVideoTemplatePage","gotoAddVideoPanelPage","gotoInvestVideoPanelPage","VideoEmptyView","isFilterResult","VideoEmptyViewSVG","VideoGridView","videosGridSection","VideosPageComponent","videoPagePerfMarker","minDurationFilter","maxDurationFilter","isVideoDurationBoundaryIncluded","minVideoDuration","maxVideoDuration","CSMLVideoDuration","unlimited","VideoPageTopBannerComponent","VideosFilterBar","defaultMinVideoDuration","defaultMaxVideoDuration","useTemplateVideoStyles","templateBody","VideoTemplateCard","TemplateThumbnailUrl","LocalizedTemplateName","TemplateName","templateTagsMapping","premiumStreaming","onlineVideo","getTitleMessage","tags","setCopilotFinalUrl","loadClipchampPlayer","finalUrlError","setFinalUrlError","ClipchampPlayer","videoUrl","TemplatePreviewUrl","poster","seconds","Duration","LocalizedTemplateDescription","TemplateDescription","useVideoTemplatesPageStyles","videoTemplatePage","VideoTemplatesPage","copilotFinalUrl","copilotDomainDataService","selectedTemplate","setSelectedTemplate","isLoadingBrandKit","setIsLoadingBrandkit","brandkit","setBrandKit","isBrandKitEmpty","setIsBrandKitEmpty","_useState13","_useState14","setDataPromise","fetchVideoAdsAssetRecommendations","useCopilotRepositoryContext","getBrandKitDataByAccId","useBrandKitDataService","fetchBrandKit","updatedResponse","accId","BrandKits","Fonts","Images","LandscapeLogos","Palettes","SquareLogos","formatBrandkitForAPI","onFetchVideoRecommendations","templateFilter","TemplateIds","fetchVideoTemplates","_yield$copilotDomainD","getVideoTemplates","Templates","modifiedDataPromise","finalUrl","gotoCreateVideoPage","templateItem","NumberOfLogos","NumberOfImages","NumberOfText","WrappedComponent","Object","assign","_objectDestructuringEmpty","ServerContext","useClipchamp","CopilotRepositoryProvider","locale","CurrentLocale","recommendationType","useEditVideoPageStyles","editVideoPage","editVideoContainer","spinnerContent","useVideoNotify","successTitle","successBody","errorTitle","errorBody","isSuccess","getTitle","getBody","EditVideoPage","isCTV","getVideo","dataPromise","videoMetadata","setVideoMetadata","setFinalUrl","setIsLoading","isSaving","setIsSaving","setError","videoRepository","createVideoRepository","folderRepository","createFolderRepository","imageRepository","createImageRepository","assetLibraryConfig","timeZone","preferencesService","activityLogger","logActivity","fetchDataAsync","video","videoData","videoRecommendation","_templateId","fetchMetadata","Metadata","JSON","parse","ads","onSaveVideo","newMetadata","uploadResult","uploadVideoMetadata","newVideoFromMTObject","recommendationFormat","gotoVideosPage","onApply","VideoTemplateEditorContextWrapper","videoMetaData","setIsOpen","isAADUser","IsAADUser","isDialog","showVideoTemplateSummaryBarControl","MessageBar","messageBarType","MessageBarType","withI18nConsumer","statuses","actions","useGenerateImagePageState","eventHandler","generateImageExample","clearExample","initialPrompt","setPrompt","promptChanged","setPromptChanged","setImages","serverError","setServerError","detectedBrandName","setDetectedBrandName","onSelectImage","newImages","onStartOver","selectedImages","x","generateImagesPromise","getGenerateImagesByAIPromise","skipBrandDetection","cancelled","statusPoller","aiGCImagePerfMarker","willInit","aigcCallStart","Date","now","generateImagesByAI","onStartPolling","poller","brandNameDetected","brandNames","aigcCallDuration","hasRecraftImage","modelSource","AIModelSource","Recraft","imageUrls","logForExpand","modelSources","duration","onReturnImages","imageIds","thumbnailSrc","done","cancel","getImages","onGenerateImages","containsBrand","s","RegExp","test","detectBrandName","trimmedPrompt","promptError","savedAIGCImages","setSavedAIGCImages","savedAIGCImagesRef","_useState15","_useState16","savingAIGCImages","setSavingAIGCImages","_useState17","_useState18","savedStockImages","setSavedStockImages","savedStockImagesRef","_useState19","_useState20","savingStockImages","setSavingStockImages","addAIGCImage","addStockImage","loadStockImages","loadMoreStockImages","handleError","assetLimit","getImageAssetLimitPerAccount","learnMoreText","learnMoreLink","genericError","folderIdNumber","wrappedAddAIGCImage","res","Dalle","wrappedAddStockImage","stockImageId","wrappedSetPrompt","newPrompt","aigcImages","stockImages","totalStockImagesCount","useBrandDetectionConfirmationStyle","makeResetStyles","AIWarningIcon","BrandDetectionConfirmation","brandName","renderHelpButton","isChecked","setIsChecked","evt","usePromptEditorStyles","selectedButton","toggleButton","textareaPlaceHolder","textarea","autoCompleteTextarea","usePromptEditorBaseStyles","clipPath","borderBottomStyle","borderTopStyle","fontWeightRegular","colorNeutralBackground1Hover","borderWidth","PromptEditor","textArea","textAreaRef","usedOptions","setUsedOptions","PuzzlePiece20Regular","words","word","usedOption","Emoji20Regular","Color20Regular","ShapeSubtract20Regular","Lightbulb20Regular","getOptions","promptEditorBaseStyles","promptEditorStyles","optionsState","setOptionsState","selectedOption","textToComplete","setTextToComplete","optionsIndex","setOptionsIndex","slicedOptions","filteredOptions","roundedIndex","sliceOptions","shadowTextArea","wordsRef","scrollHeight","clientHeight","scrollTop","onMouseOver","onMouseOut","ArrowClockwise16Regular","ToggleButtons","toggleSelectedOption","suggestedWords","querySelectorAll","useGeneratedImagesStyles","animationDuration","animationIterationCount","animationTimingFunction","animationName","to","useLoadingViewStyles","backgroundPosition","forcedColorAdjust","LoadingCell","GeneratedImages","stopGeneratingBtnRef","generatedImagesStyle","onRenderImageSpinner","Icon","isSaved","CheckmarkRegular","SpinnerIosRegular","AddButton","addImage","tooltipContent","onRenderAIGCCell","srcURL","URL","host","origin","pathname","URLSearchParams","searchParams","addSearchParams","w","h","TilesGridCellImage","showSpinner","onCustomizedSpinner","InfoSparkleSVGIcon","onRenderStockCell","Preview","aigcImagesWithAction","stockImagesWithAction","aigcImagesGridSection","k","gridMode","maxColumns","columnPadding","rowPadding","stockImagesGridSection","BlackSparkleSVGIcon","LoadingIndicator","SquareDismissIcon","ImageSearchRegular","useExampleImageStyles","ExampleImage","baseClasses","useExplorePromptsStyles","letterSpacing","ExplorePrompts","memo","MultiLineEllipsisText","explorePromptsStyles","promptsWithAction","prompts","promptsGridSection","localizedPromptText","useAIGCDisclaimerStyles","marginLeft4","useAIGCDisclaimerDefaultStyles","AIGCDisclaimer","defaultClasses","MessageBarBody","RemainingText","remainingText","ErrorMessage","useGenerateImagePageStyles","ActionBar","startOver","generateImage","ArrowReset24Regular","code","HollowSparkleSVGIcon","PromptPanel","topDiv","setTopDiv","_useTopDivMetaData","offset","setOffset","useLayoutEffect","newOffset","offsetTop","offsetParent","useTopDivMetaData","hidden","ImagePanel","hasAIGCImages","hasAIGCImageExample","GenerateImagePageComponent","generateImagePerfMarker","changeLayout","announcedText","setAnnouncedText","_useGenerateImagePage","LoadAdsStudioImageGenerationPage","nav","Mode","Hidden","useButtonStyles","bottonWrapper","helpLink","AdsStudioAddAssetPanel","selectedAsset","onClickSelect","showBlocker","isMultiSelection","buttonClasses","panelRef","LaunchedAddImageAssetsFromAdsStudio","handleJobErrors","jobErrors","get","onSelectAddImages","firstNode","lastNode","handleTabKey","shiftKey","handleShiftTabKey","handleESCKey","isDarkThemed","useSourceImages","setSelectedImages","setShowBlocker","validImages","selectedImageUrls","onStockClickSelect","stockImagePerfMarker","saveOperations","each","uploadStockImage","runJobsInParallelWithRateLimit","jobsToRateLimit","maxJobsInParallel","MaxAddAssetJobInParell","handleJobError","goBack","onInvestClickSelect","investImagePerfMarker","uploadInvestImage","investImageId","onWebsiteClickSelect","websiteImagePerfMarker","uploadOperations","uploadImageByUrl","Website","WebsiteImagePanel","_useSourceImages","WebsiteImagePanelContent","StockImagePanel","StockImagePanelContent","getAddVideoError","processVideoSizeLimitError","errorList","AddVideoPanel","selectedVideos","setSelectedVideos","uploadVideoByUrl","videos","AddVideoPanelContent","usePanelStyles","messageBar","usePreviewStyles","imageItemBox","UploadFilesPanel","globalLegacyI18n","isUploadImageUpscaleEnabled","previewClasses","setErrors","uploadInput","globalI18n","filePickerI18n","mergeI18n","onFilesAddedCallback","_useUploadFiles","useUploadFiles","previewArr","supportedFileExtensions","supportedImageExtensions","supportedVideoExtensions","clearInputFile","readFile","fileObjects","selectedFiles","selectedFilesCount","errorArr","fileObj","fileSizeMB","toFixed","reachLimit","isReachFileSizeLimit","ext","parseFileName","getReachFileSizeLimitErrorMessage","click","UploadPreviewWithCustomPreview","assetList","PreviewComponent","FileUploadingPreview","customClasses","errMsg","MessageBarActions","containerAction","multiple","accept","NO_VALID_FILES_ERROR","ASSET_LIMIT_EXCEEDED_ERROR","usePreviewStyle","linkButton","UploadFolderPanel","uploadFolderInfo","setUploadFolderInfo","showUploadPreview","setShowUploadPreview","completedAssetCount","isUploadRunning","fileAdditionalInfoArrRef","uploadFileAsync","useUploadAsset","getCustomizedHandlerOptions","useCustomizedHandlerOptions","createFolderBulk","cancelPendingVideoUpload","dismissAndRefreshLibrary","onUploadError","uploadAsset","dataURL","fileObject","nameWithoutExt","isVideo","isImageUpscaled","rootFolder","updatedProgress","onUploadStart","totalSize","rootFolderName","acceptedAssets","previewImage","readFileAsDataURLAsync","numberOfAssets","getErrorInfo","folderCreationErrors","assetUploadErrors","getFolderUploadError","onUploadPartialComplete","warnMessage","onUploadComplete","upscaledImagesArrCount","fileCount","FolderPreviewComponent","createFolderPreviewComponent","Boolean","_useUploadFolder","_ref$assetUploadLimit","assetUploadLimit","uploadAssetAsync","supportedExtensions","readFileAsync","useReadAsset","validateFileAsync","useValidateAsset","validateAssetAsync","obj","onFolderRead","acceptedFiles","filterFilesByExtensions","customizedFilesOptions","_parseFileName","foldersToCreate","createFolderHierarchyMap","assetsSkippedCreationDueToFolderError","createFoldersByHierarchy","folderMap","creationPromises","createRateLimitedAssetUploadPromises","folderIdPromises","assetsSkippedUpload","readAssetAsync","useUploadFolder","isRootFolderId","maxUploadNum","showTitle","directory","webkitdirectory","MixedImagePanel","InvestImagePanelContent","useSourceVideos","validInvestVideos","validUrlVideos","investVideoPerfMarker","uploadInvestVideo","investVideoId","videoSrc","videoIds","onUrlClickSelect","addVideoUrlPerfMarker","MixedVideoPanel","_useSourceVideos","InvestVideoPanelContent","InvestImagePanel","InvestVideoPanel","ROOT_KEY","SearchResultView","searchPagePerfMarker","_ref2$query","cachedSearchText","setCachedSearchText","breadcrumbItems","onBreadcrumbItemClick","newAssets","LoadAdsStudioSearchResultPage","Count","AdsStudioBreadcrumb","onItemClick","maxLengthOfItem","customItemStyle","headerDescriptions","SearchResultFilterBar","defaultSearchText","getPlacementSetConfig","getSmartCroppings","isAudienceAdSmartCropEnabled","isMMAV2Enabled","isPMaxAspectRatiosV2Enabled","isAdPreviewRefreshEnabled","getExpandedCroppingsFunc","placementSets","placementSetName","CSMLAdType","PMax","placementTypes","UAPPlacementTypeAlias","PMaxV2","AllV2","All","getDefaultPlacementsCropping","MMA","Audience","MSANV2","MSAN","ImageExtension","ImageExt","GenericImage","BingDesktopMultiImage","BingMobileMultiImage","useBackgroundChange","fetchSegmentationError","setFetchSegmentationError","isFetchingSegmentations","setIsFetchingSegmentations","getImageSegmentations","generateImageBackground","_useMaskedImage","imageUrlWithoutBackground","setImageUrlWithoutBackground","imageUrlWithGeneratedBackground","setImageUrlWithGeneratedBackground","imageUrlWithColoredBackground","setImageUrlWithColoredBackground","segmentationMasks","setSegmentationMaskInternal","selectedMasks","setSelectedMasks","selectedImageSrc","setSelectedImageSrc","maskSetsBase64","setMaskSetsBase64","alphaArray","setAlphaArray","setSegmentationMasks","maskSetsArray","selectedMasksArray","newAlphaArray","resetStates","maskValues","getMaskValueAtPoint","y","originalImageWidth","getMaskValueAtPointFunc","useMaskedImage","drawColorBackground","imageWidth","imageHeight","fetchImgPromise","coloredBackground","createColorBackground","getSegmentations","imageSegmentationPerfMarker","parseMaskResultPromise","parsedResult","rawMaskSetsBase64","rawMaskSetsBase64String","selfDrawnImageUrl","generateBackground","backgroundGenerationPerfMarker","outputImageWidth","outputImageHeight","newImageUrl","generatedUrl","resultImage","ViewName","revertMetaData","_revertMetaDataInner","combinedEffectArray","combinedEffect","filterEffect","effect","blurEffect","extractInfoForDeserialization","blur","revertMetaDataInner","effectSettings","effectOptions","designerEffect","backgroundBlur","useEditImageState","initialCurrentView","getAssetEnhancementSettings","currentView","setCurrentView","originalImage","setOriginalImage","setLoadingStatus","initialAssetLoading","setInitialAssetLoading","backgroundChangedResult","setBackgroundChangedResult","savedBackgroundColorChangedImage","setSavedBackgroundColorChangedImage","filterBlurBaseImage","setFilterBlurBaseImage","isConfirmDialogOpen","setIsConfirmDialogOpen","assetsAIEnhancementEnabled","setAssetsAIEnhancementEnabled","cropImage","isImageFittingEnabled","isBrandKitEnabled","finalImageFittingEnabled","originalWidth","originalHeight","settings","assetsAIEnhancementEnabledInner","AssetAIEnhancementOptout","promises","isCopilotRegionRestricted","feature","isRestricted","baseId","gotoEditDisplayImagePage","_useFilterAndBlur","initialFilter","initialBlur","isActive","imagesWithFilter","imagesWithFilterAndBlur","getImagesWithFilter","getImagesWithFilterAndBlur","filterIndex","setFilterIndex","backgroundBlurEnabled","setBackgroundBlurEnabled","imagesWithFilterAndBlurCached","setImagesWithFilterAndBlurCached","backgroundBlurLevel","setBackgroundBlurLevel","currentImage","setCurrentImage","initialStateApplied","setInitialStateApplied","initialStatusWhenActive","updateImage","newImage","getImagesWithFilterImp","toggleBackgroundBlur","enableBackgroundBlur","changeBackgroundBlurLevel","blurLevel","isImageUpdated","isImageChangedWhenActive","useFilterAndBlur","resultFilterAndBlurImage","isFilterAndBlurImageUpdated","isFilterAndBlurImageChangedWhenActive","_useBackgroundChange","adPlacementResult","AudienceAdSmartCrop","adType","setAdType","errorTip","setErrorTip","showRequiredOnly","setShowRequiredOnly","editingPlacementInfo","setEditingPlacementInfo","onEditPlacement","placementInfo","onAdPreviewError","stringify","_useAdPreviewModel","useAdPreviewModel","firstImage","setPlacementConfig","multiImagePlacementSets","updatePlacementCropping","updatePlacementCroppingByImageType","hasCropSettingsChanged","hasDataChanged","changedCropSettings","imageInfo","imageMeta","imageCropping","placementList","previewTexts","getPreviewText","IsMMAV2Enabled","IsAmplifyEnabled","DisplayPlusAmplify","PMaxNewAspectRatios","PMaxExcludeNewAspectRatios","getExpandedCroppingsInner","adTypeInner","argObj","placementsToExpand","getPlacementsToExpand","placements","skipOutpainting","getCropSettingsFromRoi","expandedMeta","roiInfo","placementSetConfig","clonedImage","maxCropBox","handleInvalidCropSetting","invalidRatioList","errorInfo","ratio","aspectRatioAsRatio","placement","previewTypeString","ratio1","ratio2","placement1","placement2","getSizeErrorRatioList","saveCropPlacement","newCropping","placementMeta","placementType","imageType","newPlacementCropping","cancelCropPlacement","switchAdType","switchShowRequiredOnly","ImageExperienceImage","hasCroppingTask","cropSettingsToUpdate","allSizeInvalidRatioList","getAllSizeErrorRatioList","requiredSizeInvalidRatioList","allViewErrorTip","previewName1","previewName2","currentViewErrorTip","useAdPlacement","updateAdPlacementImageInner","saveImageCopy","uploadImageToFolder","saveImageWithBaseId","saveImage","moveImageToFolder","addImageWithBaseIdToFolder","replaceBackground","backgroundChangedImage","needToSave","isUnsavedStockImage","isSavedStockImage","isStockImage","cropImageAndGoBack","backToLibraryPage","placementSettings","onConfirmDialogSave","saveImageDirectly","updateAdPlacementImage","onload","saveBackgroundChangedResult","moveImageToFolderInner","saveAsCopy","buildImageAssetMetadataToSave","effectKey","convertMetaData","resInner","inner","disableSave","saveButtonTooltip","haveCroppingTasks","imagePreviewView","borderTopLeftRadius","borderTopRightRadius","ImagePreviewView","imageView","buttonsConfig","buttonsRef","notificationConfig","buttonNum","buttonItem","isFirstButton","isLastButton","notificationContent","dismissAriaLabel","outlineOffset","ImageAdjustView","goToBackgroundChangeView","imageAdjustViewStyles","VideoBackgroundEffect20Regular","timerRef","handleChangeBlur","clearTimeout","CardHeader","Switch","Slider","usePlacementListStyles","placementListView","showRequiredOnlyCheckbox","errorIcon","adPreviewGridLayoutContainer","usePlacementContaierStyles","placementContainer","white","containerHeader","containerTitle","previewWrapper","colorNeutralBackground5","previewType","placementBox","requireBox","cropButton","minSize","adPreviewComponentContainer","tooltipProps","PlacementContainer","aspectRatioUIString","isRequired","onCrop","AdPreviewPlacementContainerBase","Image16Regular","errRequireBox","ErrorCircleFilled","Crop20Regular","onRenderFooter","previewContainerClassName","adTypeList","adTypeStrings","AdTypeControl","AdPlacementListView","onRenderPlacement","AdPlacementComponent","placementConfig","getPlacementConfig","sizeValidForRatio","_createElement","isEnabled","placementData","placementListWrapper","AdPreviewGridLayout","onRenderEmptyView","gridLayoutContainerClassName","PlacementEditView","onSave","goToPlacementListView","placementCropping","curPlacementCropping","setCurPlacementCropping","handleCropSettingsChanged","handleSave","p","newPlacement","expandedPlacementCropping","effectiveImageUrl","effectiveImageWidth","effectiveImageHeight","newFirstImg","imageCropView","Checkmark20Regular","placementEditView","ArrowLeft16Regular","AdPreviewSinglePlacementLayout","baseSaveButton","SaveButtonInSummaryBar","onSaveDirectly","onSaveAsCopy","isSaveAsCopyDisabled","isSaveDisabled","isBaseButton","baseButtonText","onBaseButtonClick","summaryBar","setSummaryBar","setOpen","renderBaseSaveButton","baseSaveButtonWithTooltip","saveAsCopyMenuItem","splitSaveButton","triggerProps","SplitButton","primaryActionButton","customizedContent","timer","setInterval","summaryBarCustomizeEle","clearInterval","createPortal","UnselectedAdPlacementSVGIcon","viewBox","xmlns","d","fillOpacity","SelectedAdPlacementSVGIcon","editPageNavigation","tabList","tabItemWrapper","tabItem","wordBreak","AdPlacementId","AdjustId","NavigationView","isAdjustButtonDisabled","adjustButtonTooltip","isAdPlacementSelected","isAdjustSelected","selectedItemId","handleAdPlacementClick","handleAdjustClick","selectedIcon","WandFilled","vertical","useBackgroundChangeStyles","colorNeutralForeground3Hover","useObjectSelectionStyles","DialogForObjectSelection","updateSubject","objectSelectionError","ObjectSelectionView","originalImageUrl","originalImageHeight","updateHighlightedImage","toggleSelectedMask","borderImageSrc","workingSelectedImageSrc","highlightedImageSrc","imageContainer","openEscape","setOpenEscape","mouseOutsideHandler","ObjectSelectionImageView","useExampleImageListStyles","exampleImageList","useExampleImageCellStyles","exampleImageCell","ExampleImageList","withOverridableStyles","ExampleImageListWithoutStyle","ExampleImageCell","ExampleImageCellWithoutStyle","getGenerationHistoryListStyles","paddleBtn","colorNeutralForeground2BrandHover","paddleBtnRight","historyListRoot","colorBrandForeground1","HistoryListImpl","selectedIndex","historyList","onSelectHistory","keyCode","History20Regular","HistoryListImages","GenerationHistoryList","PromptControl","generate","isGenerating","onSelectExampleImage","selectedHistoryIndex","exampleImageId","disabledText","onClickGenerateButton","disabledButton","MAX_PROMPT_LENGTH","labelId","getImageShimmerStyles","imageShimmerRoot","animationDirection","ImageShimmerImpl","ImageShimmer","mask","ImageWithShimmer","targetImage","showShimmer","ImageToUpdate","usePromptControlViewFactoryWithState","setNotificationConfig","isRemovingBackground","goToImageAdjustView","applyImage","showLearnMore","setShowLearnMore","setIsGenerating","_useObjectSelection","workingMasks","setWorkingMasks","setWorkingSelectedImageSrc","originalImagePixels","setOriginalImagePixels","initialSelectedImageSrc","setInitialSelectedImageSrc","setBorderImageSrc","initialBorderImageSrc","setInitialBorderImageSrc","setHighlightedImageSrc","setObjectSelectionError","pixels","getImagePixels","createSelectedImage","selectedImageSrcProp","masks","isAdd","createSelectedImageSrc","newBorderImageSrc","newImageSrc","maskValue","highlightedImage","createHighlightedImage","maskId","newMasks","useObjectSelection","activeState","setActiveState","showRemoved","setShowRemoved","dismissNotification","goToStaticImage","goToObjectSelection","wrappedUpdateSubject","setHistoryList","historyData","pv","promptValue","addNewHistory","pPromptValue","generatedImageUrl","newHistoryList","unshift","imgUrl","gotoDisallowedContent","curGeneratedImageUrl","DisallowedContent","renderErrorNotificationConfig","others","DismissCircle16Filled","cancelUpdateSubject","cancelBackgroundChange","buttonSettingConfig","ImageEdit20Regular","imageSetting","promptControlView","useColorButtonStyles","ColorButton","draw","colorButtonStyles","hexColor","canvas","createElement","ctx","getContext","fillStyle","fillRect","toDataURL","hexToBase64Color","useColorControlStyles","fontWeightSemibold","colorNeutralBackground1Selected","ColorControl","lastColor","colorControlStyles","colorPicker","addColorButton","showColorPicker","setShowColorPicker","wrappedDraw","colorValue","toggleColorPicker","logSetColorHelper","sampleColor","ed","EyeDropper","sRGBHex","onEyeDropperKeyDown","debouncedDraw","selectedColorId","suggestedColorId","Eyedropper20Regular","getColorFromString","colorObject","strings","hueAriaLabel","alphaLabel","greenLabel","blueLabel","redLabel","isDrawing","tabs","useControlViewFactoryWithState","isCallRemovingBackground","setIsCallRemovingBackground","tab","removingBackgroundNotificationConfig","SpinnerIcon","backgroundRemovedNotificationConfig","CheckmarkCircle16Filled","_usePromptControlView","promptButtonsConfig","promptImageView","_useColorControlViewF","setColor","setLastColor","setIsDrawing","colorControlView","targetColor","useColorControlViewFactoryWithState","colorButtonsConfig","colorImageView","useBackgroundChangeDisclaimerStyles","BackgroundChangeDisclaimer","BackgroundChangeView","onApplyImage","_useControlViewFactor","LoadAdsStudioBackgroundRemovalPage","ArrowLeftFilled","ColorBackground20Regular","backgroundImg","UpdateConfirmDialog","previewName","DismissCircle20Regular","editImagePage","navigationView","navigationPlaceholder","contentWrapper","EditImagePageComponent","editPagePerfMarker","_ref2$editImageUrl","_ref2$initialCurrentV","_useEditImageState","gotoPlacementEditView","LoadAdsStudioImageEditingPage","useLayoutStyles","layer","previewContainer","usePreviewBaseStyles","fadeOut","useSequentialNavigatorStyles","sequentialNavigatorContainer","navigatorStatusContainer","iconButton","chevronLeft","chevronRight","disabledIcon","useNonActiveVideoPreviewStyle","failedIconContainer","usePanelStyle","detailPanel","footerButton","useInfoPaneHeaderStyle","imageUsage","detailHeader","buttonBox","editBox","deleteBox","closeButton","useInfoItemDefaultStyles","contentItem","contentName","contentValue","useItemInfoContentStyles","contentBox","detailContentWrapper","linkContainer","useInfoPaneItemRenameStyle","nameContentBox","addNameBox","addNameTitle","addNameIcon","nameBox","editNameBox","textField","completeIcon","useItemInfoCopyUrlStyles","copyUrl","useItemInfoVideoQualityStyles","qualityBadge","usePerformanceContentStyles","dropdown","metricBox","useExternalLinkStyles","externalButton","SequentialNavigator","currentIndex","onNext","onPrevious","disableLeft","disableRight","AssetItemPreviewBase","itemData","shouldHideContent","onRenderPreviewContent","itemInfo","shouldFadeIn","VideoStatusPreviewConfig","tip","Transcoding","ItemPlaceholderBoxViewFooterType","warning","fabricIconName","fabricIconDynamicClassName","learnMoreLinkText","learnMoreLinkTopic","NonActiveVideoPreview","footerProps","mappedConfig","localizedTextFields","fabricIconClassName","ItemPlaceholderBoxView","mainViewIcon","videoIcon","mainViewIconLabel","VideoPreview","VideoPlaybackView","videoInfo","ItemDetailsPanelBase","footerKeyDownHandler","onFooterKeyDown","DrawerOverlay","DrawerHeader","DrawerHeaderTitle","DrawerBody","DrawerFooter","InfoPaneHeader","disableEdit","iconBox","EditRegular","Dismiss24Regular","DeleteAssetDialog","onDeleteAsync","onDeleteSuccess","confirmText","errorMessageForUsedAsset","genericErrorMessage","handleDelete","Code","cancelDelete","tooltipCalloutProps","isBeakVisible","CopyUrlButton","isURLCopied","setIsURLCopied","onCopyUrlClick","onTooltipToggle","isVisible","directionalHint","DirectionalHint","bottomRightEdge","delay","closeDelay","InfoPaneItemCopyUrl","onCopy","InfoItemDefault","spinnerStyle","InfoItemRename","renameAsync","renderBlocker","inputPlaceholderText","renameTitleText","displayInputBox","setDisplayInputBox","inputName","setInputName","showUiBlocker","setShowUiBlocker","handleRename","onEnterRename","Enter","handleDisplayInputBox","onEnterEditIcon","onEnterCancel","onEnterPress","maxLength","Checkmark16Regular","Dismiss16Regular","cancelIcon","Edit16Regular","ItemInfoContentBase","itemName","promptNameInputLabel","nameInputPlaceholderText","itemInfos","CustomComponent","_ref2$CustomComponent","CustomComponentOptions","promptInputLabel","_ref4$CustomComponent","_ref4$valid","metricsMap","ItemExternalLink","Open20Regular","defaultMetricLabel","metricOptions","PerformanceContent","onGotoAds","getGranularityEnum","isMetricLoading","setIsMetricLoading","metricData","setMetricData","granularity","setGranularity","loadSeriesData","selectedMetricValues","timeSeriesParams","metric","isMovingAverageOn","optionValue","granularityEnum","Dropdown","defaultSelectedOptions","Option","InlineChart","ImageDetailsPanel","assetInfo","warningMsgProp","handleDeleteAsset","handleRenameAsset","showDeleteConfirm","setShowDeleteConfirm","setWarningMsg","onDeleteImage","onRenameImage","newName","onCopyUrl","imageInfoArr","_assetInfo$id","VideoQualityBadge","quality","qualityText","PlacementQualityToText","Badge","VideoDetailsPanel","onRenameVideo","onEditVideo","videoInfoArr","getClosestAspectRatio","convertTimeDuration","durationInMS","previewCompMap","panelCompMap","AssetDetailsPageLayout","navigateToOtherItem","itemId","loadedItems","loadMoreItemsAsync","renderItemPreview","renderItemDetails","reloadLandingPageRef","hideContent","loadMoreFlag","setLoadMoreFlag","redirectToOtherItem","_loadedItems$index","gotoNext","nextIndex","gotoPrevious","itemPreviewRef","Layer","AssetDetailsPage","LaunchedAssetLibrary","LaunchedImageDetails","_usePreviewAndPanel","AssetPreview","AssetDetailsPanel","usePreviewAndPanel","_useDetailsPageSetup","currentItemId","navigateToFallbackPage","gotoLandingPage","redirect","otherItemId","otherItemFolderAssetType","onDismissed","useDetailsPageSetup","_useAssetDetailsPageA","deleteAsset","navigator","clipboard","writeText","useAssetDetailsPageActions","renderAssetPreview","renderAssetDetailsView","useBackgroundRemovalModalStyle","uploadContainer","contentArea","chooseImageContainer","uploadTitle","browse","uploadSubtext","gridTitle","loadingMask","alertError","BackgroundRemovalLibraryGrid","onSelectedImageChange","contentRef","selectedImageIdRef","validAssets","selectedImageitem","loadMoreDataWithLoading","PanelImageGrid","isHideDescription","isMultiple","overlayBodyRef","UploadArea","handleUploadFile","handleDropFile","droppedFiles","dataTransfer","handleDropOver","onDragOver","ChooseImageIcon","LoadingComp","BackgroundRemovalModalComponent","setSelectedImage","uploadCallback","newSelectedImage","onClickContinue","isUploadingFile","dialogContentRef","isContinueButtonDisabled","isSubPageSelected","subPage","rootRoute","isHomePageSelected","gotoPage","history","currentSearch","getSearchQuery","location","isLibraryPageSelected","LOADING_CELL","useAdStudioNavigation","onDropToFolderProp","onDropToFolder","setSelectedItemId","selectedFolderId","setSelectedFolderId","isCopilotEnabled","setIsCopilotEnabled","BrandKitUI","folderPathTree","loadFolderPathTreeItem","loadMoreFolderPathTreeItem","initializeFolderPathTree","navigateIntoRootFolder","currentFolder","staticItems","brandKitEnabled","route","HomeRegular","KeyboardLayoutOneHandedLeft20Regular","VideoRegular","DataTrendingRegular","StyleGuideRegular","FolderRegular","showDivider","getStaticItems","handleFolderItemClicked","CustomTab","LoadingSpinner","containerClass","LeafTreeItem","setSize","posinset","parentValue","TreeItem","itemType","TilesGridCellDropDecorator","customClassName","customDropDecorator","TreeItemLayout","treeItemLayout","treeSelected","overflowMode","TooltipOverflowMode","Self","hostClassName","tooltipHost","SubTreeItem","folderItem","onRenderSubTree","onLeafTreeItemClicked","parentFolder","loadMore","subFolders","subFoldersCount","SubTree","parentFolderId","onItemSelected","handleOpenChange","openInner","prevLoadingStatus","navigationItem","prevOpenStatus","handleTreeItemClicked","ChevronDown","ChevronDownFilled","ChevronDownRegular","ChevronRight","ChevronRightFilled","ChevronRightRegular","checkFolderSelected","subFloders","selectedId","subFolderSelected","isCurrentFolderSelected","treeItems","_SubTree","useAdStudioNavigationStyle","customTabItem","adStudioNavigation","divider","dividerContent","useFoldersTreeViewStyle","flatTree","outlineStyle","outlineWidth","FolderPathTreeView","FlatTree","AdStudioNavigation","_useAdStudioNavigatio","SideNavigationItem","groupId","selectedTabId","useAdStudioSideNavigation","groupedItems","getGroupedItems","AdStudioSideNavigation","_useAdStudioSideNavig","renderFolderPathTree","groupedStaticItems","renderCustomizedItem","getSelectedNavigationItemId","SideNavigation","selectionMode","minimumVisibleCount","subPagesWithoutNavigation","hideNavigation","height100","leftMargin","withAdStudioNavigation","Wrapper","ROOT_ROUTE","setTargetDropFolder","layoutSize","setLayoutSize","useLayoutResizeObserver","largeSize","LayoutSizeScale","XL","getModeByLayoutSize","shouldNotShowNavigation","match","getDisplayName","hoistNonReactStatics"],"sourceRoot":""}\r\n
\r\n