\r\n {i18n.getString(noImageTips)}\r\n
\r\n }\r\n \r\n {\r\n showPagination && viewItems.length > 0 ?\r\n \r\n setPageIndex(pageIndex + 1)}\r\n onPreviousPageClick={() => setPageIndex(pageIndex - 1)}\r\n onRandomPageSelect={index => setPageIndex(index)}\r\n classes={classes}\r\n i18n={i18n}\r\n />\r\n
\r\n : null\r\n }\r\n \r\n );\r\n};\r\n\r\nUnStyledSelectImagesListView.propTypes = {\r\n classes: PropTypes.shape({}).isRequired,\r\n items: PropTypes.arrayOf(PropTypes.any),\r\n imageWidth: PropTypes.number.isRequired,\r\n imageHeight: PropTypes.number.isRequired,\r\n pageHeight: PropTypes.number.isRequired,\r\n onRenderImageItem: PropTypes.func.isRequired,\r\n onItemSelectionChanged: PropTypes.func,\r\n onSelectionChanged: PropTypes.func,\r\n selectable: PropTypes.bool,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n isMultiple: PropTypes.bool,\r\n noImageTips: PropTypes.string,\r\n showPagination: PropTypes.bool,\r\n itemsPerPage: PropTypes.number,\r\n horizontal: PropTypes.bool,\r\n itemToUnselect: PropTypes.shape({}),\r\n resetItemToUnselect: PropTypes.func,\r\n};\r\n\r\nUnStyledSelectImagesListView.defaultProps = {\r\n items: [],\r\n selectable: false,\r\n onItemSelectionChanged: noop,\r\n onSelectionChanged: noop,\r\n isMultiple: false,\r\n noImageTips: _TL_('This is where your images will appear.'),\r\n showPagination: false,\r\n itemsPerPage: 6,\r\n horizontal: false,\r\n itemToUnselect: null,\r\n resetItemToUnselect: noop,\r\n};\r\n\r\nexport const SelectImagesListView = withDefaultStyles(\r\n UnStyledSelectImagesListView,\r\n getStyles\r\n);\r\n","import React from 'react';\r\n\r\nimport { ImageFit } from '@fluentui/react/lib/Image';\r\n\r\nimport { SmartImageConnector as SmartImage } from '../../src/smart-image-connector';\r\n\r\nexport const ImageItemView = props => (\r\n \r\n \r\n \r\n {\r\n isLoading ? \r\n \r\n
\r\n \r\n {searchResultMessage}\r\n
\r\n \r\n {\r\n noData ?\r\n (\r\n
\r\n );\r\n};\r\n\r\nUnStyledFacebookPhotosListView.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n items: PropTypes.arrayOf(PropTypes.shape({\r\n imageId: PropTypes.string,\r\n })),\r\n onItemSelectionChanged: PropTypes.func,\r\n isFbSupported: PropTypes.bool.isRequired,\r\n classes: PropTypes.shape({\r\n placeholderMsg: PropTypes.string.isRequired,\r\n }).isRequired,\r\n gotoSettings: PropTypes.func.isRequired,\r\n imageWidth: PropTypes.number.isRequired,\r\n pageHeight: PropTypes.number.isRequired,\r\n imageHeight: PropTypes.number.isRequired,\r\n className: PropTypes.string,\r\n itemsPerPage: PropTypes.number,\r\n isMultiple: PropTypes.bool,\r\n shouldResetSelection: PropTypes.bool,\r\n itemToUnselect: PropTypes.shape({}),\r\n resetItemToUnselect: PropTypes.func,\r\n};\r\n\r\nUnStyledFacebookPhotosListView.defaultProps = {\r\n items: [],\r\n className: null,\r\n itemsPerPage: 6,\r\n onItemSelectionChanged: noop,\r\n isMultiple: true,\r\n shouldResetSelection: false,\r\n itemToUnselect: null,\r\n resetItemToUnselect: noop,\r\n};\r\n\r\nexport const FacebookPhotosListView = withDefaultStyles(\r\n UnStyledFacebookPhotosListView,\r\n getStyles\r\n);\r\n","import React from 'react';\r\nimport { map, compact } from 'underscore';\r\nimport classnames from 'classnames';\r\n\r\nimport { MessageBar } from '@fluentui/react/lib/MessageBar';\r\nimport { Loading } from '@bingads-webui-campaign-react/smart-component-primitive';\r\n\r\nimport { ImageUploadLocal } from './image-upload-local';\r\nimport { SelectImagesListViewWithSearch } from './select-images-list-view-with-search';\r\nimport { FacebookPhotosListView } from './facebook-photos-list-view';\r\nimport { ImageOptionsKey } from './consts';\r\n\r\nconst getPivotItemOptions = options =>\r\n map(options, ({\r\n key,\r\n text,\r\n onRenderItemLink = () => null,\r\n }) => ({\r\n key,\r\n text,\r\n onRenderItemLink: args => (\r\n \r\n {isFbSupported ?\r\n \r\n {i18n.getString(_TL_('There are no Facebook images to import.'))}\r\n :\r\n
\r\n )\r\n :\r\n (\r\n \r\n {onRenderItemLink(args)}\r\n
\r\n ),\r\n }));\r\n\r\nconst IMAGE_WIDTH = 200;\r\nconst IMAGE_HEIGHT = 160;\r\nconst PAGE_HEIGHT = 432;\r\n\r\nconst imageProps = {\r\n imageWidth: IMAGE_WIDTH,\r\n imageHeight: IMAGE_HEIGHT,\r\n pageHeight: PAGE_HEIGHT,\r\n};\r\n\r\nconst getDefaultPivotItemRenderForStockImage = ({\r\n i18n,\r\n classes,\r\n onStockImageItemSelectionChanged,\r\n defaultKeywords,\r\n itemsPerPage = 8,\r\n isMultiple = true,\r\n existingImages,\r\n itemToUnselect,\r\n resetItemToUnselect,\r\n}) => props => (\r\n \r\n
\r\n);\r\n\r\nconst getDefaultPivotItemRenderForFacebook = ({\r\n i18n,\r\n classes,\r\n isFbSupported,\r\n itemsPerPage,\r\n gotoSettings,\r\n onFacebookItemSelectionChanged,\r\n fbPhotos,\r\n isMultiple = true,\r\n isLoadingFbPhotos,\r\n itemToUnselect,\r\n resetItemToUnselect,\r\n}) => props => (\r\n \r\n {\r\n !isFbSupported &&\r\n \r\n {i18n.getString(_TL_('Connect your Facebook page to add images.'))}\r\n \r\n }\r\n
\r\n {\r\n isLoadingFbPhotos\r\n ?
\r\n);\r\n\r\nexport const getImageOptionsForPivot = ({\r\n imageOptionsConfig,\r\n i18n,\r\n onFileSelected,\r\n uploadedFileInfo,\r\n itemsPerPage,\r\n onStockImageItemSelectionChanged,\r\n isMultiple,\r\n classes,\r\n isFbSupported,\r\n gotoSettings,\r\n onFacebookItemSelectionChanged,\r\n fbPhotos,\r\n isLoadingFbPhotos,\r\n defaultKeywords,\r\n existingImages,\r\n itemToUnselect,\r\n resetItemToUnselect,\r\n isMobile,\r\n}) => {\r\n const options = compact([\r\n {\r\n key: ImageOptionsKey.DEFAULT,\r\n text: imageOptionsConfig[ImageOptionsKey.DEFAULT].text || _TL_('Stock image'),\r\n onRenderItemLink: imageOptionsConfig[ImageOptionsKey.DEFAULT].onRenderItemLink\r\n || getDefaultPivotItemRenderForStockImage({\r\n i18n,\r\n classes,\r\n onStockImageItemSelectionChanged,\r\n defaultKeywords,\r\n itemsPerPage,\r\n isMultiple,\r\n existingImages,\r\n itemToUnselect,\r\n resetItemToUnselect,\r\n }),\r\n },\r\n isMobile ? null : {\r\n key: ImageOptionsKey.FACEBOOKIMPORT,\r\n text: imageOptionsConfig[ImageOptionsKey.FACEBOOKIMPORT].text || _TL_('From Facebook'),\r\n onRenderItemLink: imageOptionsConfig[ImageOptionsKey.FACEBOOKIMPORT].onRenderItemLink\r\n || getDefaultPivotItemRenderForFacebook({\r\n i18n,\r\n classes,\r\n isFbSupported,\r\n itemsPerPage,\r\n gotoSettings,\r\n onFacebookItemSelectionChanged,\r\n fbPhotos,\r\n isMultiple,\r\n isLoadingFbPhotos,\r\n itemToUnselect,\r\n resetItemToUnselect,\r\n }),\r\n },\r\n {\r\n key: ImageOptionsKey.UPLOAD,\r\n text: _TL_('Upload your own'),\r\n onRenderItemLink: props => (\r\n \r\n {\r\n isLoadingFbPhotos\r\n ?
\r\n
\r\n ),\r\n },\r\n ]);\r\n\r\n return getPivotItemOptions(options);\r\n};\r\n","import React, { useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { isEmpty, noop } from 'underscore';\r\n\r\nimport {\r\n useDefaultEditorStyle,\r\n useFloatingBannerMessage,\r\n} from '@bingads-webui-campaign-react/smart-component-util';\r\nimport { ChoiceGroup } from '@fluentui/react/lib/ChoiceGroup';\r\nimport { Label } from '@fluentui/react/lib/Label';\r\nimport {\r\n useSiteConfig,\r\n DataServiceContext,\r\n useInstrumentationServiceContext,\r\n useEditorStatusContext,\r\n editorStatusLoadingWrapperForPromise,\r\n useMobileSupportEnabled,\r\n} from '@bingads-webui-campaign-react/smart-page-context';\r\nimport {\r\n facebookPageInfoFilter,\r\n batchTransformImagesInComponent,\r\n importFromFacebook,\r\n hasFBOAuthError,\r\n} from '@bingads-webui-campaign-react/smart-page-facebook-import-dialog';\r\nimport { createErrorMessage } from '@bingads-webui-campaign/error-utilities';\r\nimport { Pivot, PivotItem } from '@fluentui/react/lib/Pivot';\r\n\r\nimport { useUploadService } from './components/use-upload-service';\r\nimport { getImageOptions } from './components/common-image-options';\r\nimport { getImageOptionsForPivot } from './components/common-image-options-for-pivot';\r\nimport { ImageOptionsKey } from './components/consts';\r\n\r\nexport const SmartImageEditor = ({\r\n label,\r\n className,\r\n getImageFromFacebookInfo,\r\n imageOptionsConfig,\r\n i18n,\r\n onNewImageUploaded,\r\n selectedKey,\r\n uploadedFileInfo,\r\n facebookImageInfo,\r\n onChoiceChange,\r\n enableFacebookImport,\r\n displayAsPivot,\r\n stockImageInfo,\r\n onUseStockImageOption,\r\n}) => {\r\n const {\r\n sectionTitleClassName,\r\n choiceGroupClassName,\r\n editorPivotStyleContentClassName,\r\n uploadButtonClassName,\r\n } = useDefaultEditorStyle();\r\n const { siteConfig } = useSiteConfig();\r\n const { smartPageService, hostSystemScenario } = useContext(DataServiceContext);\r\n const [, dispatchEditorStatus] = useEditorStatusContext();\r\n const { imageService } = useContext(DataServiceContext);\r\n const { uploadImageAsync } = useUploadService();\r\n const { showWarning } = useFloatingBannerMessage(dispatchEditorStatus);\r\n const logger = useInstrumentationServiceContext();\r\n const isMobile = useMobileSupportEnabled();\r\n\r\n const onFileSelected = (selectedFileInfo) => {\r\n const { imageData, file } = selectedFileInfo || {};\r\n if (imageData) {\r\n uploadImageAsync(imageData)\r\n .then((imageMetaData) => {\r\n onNewImageUploaded(imageMetaData, file);\r\n })\r\n .catch(() => {\r\n showWarning(i18n.getString(_TL_('The image failed to upload. Please try again')));\r\n });\r\n }\r\n };\r\n\r\n const onOptionChangeInternal = (...args) => {\r\n let option;\r\n\r\n if (displayAsPivot) {\r\n const [item] = args;\r\n option = { key: item.props.itemKey };\r\n } else {\r\n [, option] = args;\r\n }\r\n\r\n const selectedOption = option.key;\r\n\r\n if (selectedOption === ImageOptionsKey.FACEBOOKIMPORT && enableFacebookImport) {\r\n if (facebookImageInfo) {\r\n onNewImageUploaded(facebookImageInfo);\r\n } else {\r\n importFromFacebook(\r\n siteConfig,\r\n smartPageService,\r\n facebookPageInfoFilter.basic,\r\n hostSystemScenario\r\n )\r\n .finally(editorStatusLoadingWrapperForPromise(dispatchEditorStatus))\r\n .then((fbSite) => {\r\n const image = getImageFromFacebookInfo(fbSite);\r\n\r\n return image ? batchTransformImagesInComponent(imageService, [image]) : null;\r\n })\r\n .then((imageInfos) => {\r\n if (imageInfos === null) {\r\n showWarning(i18n.getString(_TL_('We were unable to find your Facebook page cover photo. Please select a stock image above or upload your own instead.')));\r\n } else if (!isEmpty(imageInfos)) {\r\n onNewImageUploaded(imageInfos[0]);\r\n } else {\r\n showWarning(i18n.getString(_TL_('The image failed to upload. Please try again')));\r\n }\r\n })\r\n .catch((error) => {\r\n if (hasFBOAuthError(error)) {\r\n logger.logTrace('Encounter Facebook OAuth error while importing FB posts');\r\n showWarning(i18n.getString(_TL_('We could not access your Facebook profile, please reconnect it in Settings.')));\r\n } else {\r\n const err = createErrorMessage(error);\r\n logger.logError(`Import logo image from facebook failed. ${err}`);\r\n showWarning(i18n.getString(_TL_('We were not able to find images from this Facebook page. Please try again or reimport your Facebook Page.')));\r\n }\r\n });\r\n }\r\n } else if (selectedOption === ImageOptionsKey.UPLOAD) {\r\n if (uploadedFileInfo && uploadedFileInfo.image && uploadedFileInfo.file) {\r\n onNewImageUploaded(uploadedFileInfo.image, uploadedFileInfo.file);\r\n }\r\n } else if (selectedOption === ImageOptionsKey.DEFAULT && displayAsPivot) {\r\n if (stockImageInfo) {\r\n onUseStockImageOption(stockImageInfo);\r\n }\r\n }\r\n\r\n onChoiceChange(selectedOption);\r\n logger.logTrace(`SmartImageEditor|OptionChanged|${selectedOption}`);\r\n };\r\n\r\n const finalImageOptions = displayAsPivot ?\r\n getImageOptionsForPivot({\r\n imageOptionsConfig,\r\n i18n,\r\n onFileSelected,\r\n uploadedFileInfo,\r\n classes: {\r\n editorPivotStyleContentClassName,\r\n uploadButtonClassName,\r\n },\r\n isMobile,\r\n })\r\n : getImageOptions({\r\n i18n,\r\n imageOptionsConfig,\r\n enableFacebookImport,\r\n onFileSelected,\r\n uploadedFileInfo,\r\n isMobile,\r\n });\r\n\r\n const sectionTitleLabelId = 'image-options-label';\r\n\r\n return (\r\n \r\n {\r\n !displayAsPivot &&\r\n \r\n }\r\n {\r\n displayAsPivot ?\r\n \r\n {\r\n finalImageOptions.map(option => (\r\n \r\n {option.onRenderItemLink()}\r\n \r\n ))\r\n }\r\n \r\n :
\r\n );\r\n};\r\n\r\nSmartImageEditor.propTypes = {\r\n className: PropTypes.string,\r\n label: PropTypes.string.isRequired,\r\n getImageFromFacebookInfo: PropTypes.func.isRequired,\r\n imageOptionsConfig: PropTypes.shape({\r\n [ImageOptionsKey.DEFAULT]: PropTypes.shape({\r\n text: PropTypes.string.isRequired,\r\n }).isRequired,\r\n [ImageOptionsKey.FACEBOOKIMPORT]: PropTypes.shape({\r\n text: PropTypes.string.isRequired,\r\n }).isRequired,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n onNewImageUploaded: PropTypes.func.isRequired,\r\n selectedKey: PropTypes.string.isRequired,\r\n uploadedFileInfo: PropTypes.shape({\r\n file: PropTypes.shape({\r\n name: PropTypes.string,\r\n }),\r\n image: PropTypes.shape({\r\n IdString: PropTypes.string,\r\n }),\r\n }),\r\n facebookImageInfo: PropTypes.shape({\r\n imageId: PropTypes.string,\r\n }),\r\n stockImageInfo: PropTypes.shape({\r\n externalSrc: PropTypes.string,\r\n image: PropTypes.shape({\r\n IdString: PropTypes.string,\r\n }),\r\n }),\r\n onUseStockImageOption: PropTypes.func,\r\n onChoiceChange: PropTypes.func.isRequired,\r\n enableFacebookImport: PropTypes.bool.isRequired,\r\n displayAsPivot: PropTypes.bool,\r\n};\r\n\r\nSmartImageEditor.defaultProps = {\r\n className: null,\r\n facebookImageInfo: null,\r\n uploadedFileInfo: null,\r\n displayAsPivot: false,\r\n stockImageInfo: null,\r\n onUseStockImageOption: noop,\r\n};\r\n","import React, { useState, useCallback, useEffect, useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { noop, isEqual, omit } from 'underscore';\r\n\r\nimport {\r\n useDefaultEditorStyle,\r\n getUrlFromStockImage,\r\n getThumbnailUrlForFacebookPhoto,\r\n} from '@bingads-webui-campaign-react/smart-component-util';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { Pivot, PivotItem } from '@fluentui/react/lib/Pivot';\r\nimport { InstrumentationServiceContext } from '@bingads-webui-campaign-react/smart-page-context';\r\n\r\nimport { getImageOptionsForPivot } from './components/common-image-options-for-pivot';\r\nimport { ImageOptionsKey } from './components/consts';\r\nimport { PivotImageEditorContextProvider } from './smart-pivot-image-editor-context';\r\n\r\nconst getStyles = () => ({\r\n connectFacebookMsg: {\r\n marginTop: 8,\r\n },\r\n loading: {\r\n height: '445px',\r\n },\r\n});\r\n\r\nexport const SmartPivotImageEditor = ({\r\n className,\r\n imageOptionsConfig,\r\n i18n,\r\n onLocalFileSelected,\r\n onFacebookItemSelectionChanged,\r\n onStockImageItemSelectionChanged,\r\n onSelectionChanged,\r\n gotoSettings,\r\n onPivotLinkClicked,\r\n onFinalSelectedPivotChanged,\r\n itemsPerPage,\r\n isMultiple,\r\n isFbSupported,\r\n fbPhotos,\r\n isLoadingFbPhotos,\r\n defaultKeywords,\r\n existingImages,\r\n itemToUnselect,\r\n setItemToUnselect,\r\n}) => {\r\n // State to store all selection with order from each pivot child\r\n const [allSelection, setAllSelection] = useState([]);\r\n // State to manage itemToUnselect internally\r\n const [itemToUnselectInternal, setItemToUnselectInternal] = useState(null);\r\n // Will change when once click on pivot, diff from finalSelectedPivot\r\n const [selectedPivot, setSelectedPivot] = useState(null);\r\n // Final selected pivot only get changed when item in that pivot is selected\r\n const [finalSelectedPivot, setFinalSelectedPivot] = useState(null);\r\n\r\n const logger = useContext(InstrumentationServiceContext);\r\n const classes = useDefaultStyles(getStyles);\r\n\r\n const handleOnPivotClicked = useCallback((item) => {\r\n const { props: { itemKey } } = item;\r\n onPivotLinkClicked(itemKey);\r\n setSelectedPivot(itemKey);\r\n logger.logTrace(`SmartPivotImageEditor|PivotItemClicked|${itemKey}`);\r\n }, [onPivotLinkClicked, logger]);\r\n\r\n const {\r\n editorPivotStyleContentClassName,\r\n uploadButtonClassName,\r\n infoMessageBarClassName,\r\n } = useDefaultEditorStyle();\r\n\r\n const handleOnSelectionChanged = useCallback((newSelection) => {\r\n onSelectionChanged(newSelection);\r\n setAllSelection(newSelection);\r\n }, [onSelectionChanged]);\r\n\r\n const handleOnFinalSelectedPivotChanged = useCallback((key) => {\r\n onFinalSelectedPivotChanged(key);\r\n setFinalSelectedPivot(key);\r\n }, [onFinalSelectedPivotChanged]);\r\n\r\n const handleResetItemToUnselect = useCallback(() => {\r\n setItemToUnselect(null);\r\n setItemToUnselectInternal(null);\r\n }, [setItemToUnselect]);\r\n\r\n /**\r\n * item => the new changed item\r\n * changeSource => what kind of update it is\r\n * isLocalFile\r\n */\r\n const updateSelection = useCallback((item, changeSource, isLocalFile = false) => {\r\n const previousFinalSelectedPivot = finalSelectedPivot;\r\n handleOnFinalSelectedPivotChanged(changeSource);\r\n\r\n if (!isMultiple) {\r\n // TODO make upload local support keep the error image, but return error mark\r\n // Currently when we upload a image from local which contains error, item will be null\r\n if (!item) {\r\n return;\r\n }\r\n // In single selection, allSelection should contains only one item\r\n const [prevItem] = allSelection;\r\n handleOnSelectionChanged([item]);\r\n\r\n // Only unselect prev item when it was another tab\r\n if (prevItem && (selectedPivot !== previousFinalSelectedPivot)) {\r\n // Since this is an internal change, no need to notify parent\r\n setItemToUnselectInternal(prevItem);\r\n }\r\n return;\r\n }\r\n\r\n let predicate = selection => selection.file;\r\n if (changeSource === ImageOptionsKey.DEFAULT) {\r\n predicate = selection => getUrlFromStockImage(selection) === getUrlFromStockImage(item);\r\n } else if (changeSource === ImageOptionsKey.FACEBOOKIMPORT) {\r\n predicate = selection =>\r\n getThumbnailUrlForFacebookPhoto(selection) === getThumbnailUrlForFacebookPhoto(item);\r\n }\r\n\r\n const index = allSelection.findIndex(predicate);\r\n const newSelection = [...allSelection];\r\n\r\n if (isLocalFile) {\r\n // Remove the previously added local image, currently support upload one image from local\r\n\r\n if (index > -1 && item) {\r\n newSelection.splice(index, 1);\r\n }\r\n if (item) {\r\n newSelection.push(item);\r\n }\r\n } else if (item.selected && index === -1) {\r\n // Add to selection if not added yet\r\n newSelection.push(item);\r\n } else if (!item.selected && index > -1) {\r\n // Remove from selection if already added and currently not selected\r\n newSelection.splice(index, 1);\r\n }\r\n\r\n handleOnSelectionChanged(newSelection);\r\n }, [\r\n finalSelectedPivot,\r\n handleOnFinalSelectedPivotChanged,\r\n isMultiple,\r\n allSelection,\r\n handleOnSelectionChanged,\r\n selectedPivot,\r\n ]);\r\n\r\n const onHandleStockImageItemSelectionChanged = useCallback((item) => {\r\n updateSelection(item, ImageOptionsKey.DEFAULT);\r\n onStockImageItemSelectionChanged(item);\r\n }, [updateSelection, onStockImageItemSelectionChanged]);\r\n\r\n const onHandleFacebookItemSelectionChanged = useCallback((item) => {\r\n updateSelection(item, ImageOptionsKey.FACEBOOKIMPORT);\r\n onFacebookItemSelectionChanged(item);\r\n }, [updateSelection, onFacebookItemSelectionChanged]);\r\n\r\n const onHandleLocalFileSelected = useCallback((localImage) => {\r\n updateSelection(localImage, ImageOptionsKey.UPLOAD, true /* IsLocalFile */);\r\n onLocalFileSelected(localImage);\r\n }, [updateSelection, onLocalFileSelected]);\r\n\r\n const finalImageOptions = getImageOptionsForPivot({\r\n i18n,\r\n classes: {\r\n editorPivotStyleContentClassName,\r\n uploadButtonClassName,\r\n infoMessageBarClassName,\r\n connectFacebookMsg: classes.connectFacebookMsg,\r\n loading: classes.loading,\r\n },\r\n imageOptionsConfig,\r\n onFileSelected: onHandleLocalFileSelected,\r\n onStockImageItemSelectionChanged: onHandleStockImageItemSelectionChanged,\r\n onFacebookItemSelectionChanged: onHandleFacebookItemSelectionChanged,\r\n gotoSettings,\r\n fbPhotos,\r\n itemsPerPage,\r\n isMultiple,\r\n isFbSupported,\r\n isLoadingFbPhotos,\r\n defaultKeywords,\r\n existingImages,\r\n itemToUnselect: itemToUnselectInternal,\r\n resetItemToUnselect: handleResetItemToUnselect,\r\n });\r\n\r\n useEffect(() => {\r\n if (itemToUnselect) {\r\n // Every time itemToUnselect get changed by parent, we store it in internal and pass down\r\n setItemToUnselectInternal(itemToUnselect);\r\n }\r\n }, [itemToUnselect]);\r\n\r\n useEffect(() => {\r\n if (itemToUnselect) {\r\n const newSelection = allSelection.filter(selection => !isEqual(omit(itemToUnselect, 'selected'), omit(selection, 'selected')));\r\n handleOnSelectionChanged(newSelection);\r\n setItemToUnselect(null);\r\n }\r\n }, [allSelection, handleOnSelectionChanged, itemToUnselect, setItemToUnselect]);\r\n\r\n return (\r\n \r\n \r\n {\r\n finalImageOptions.map(option => (\r\n \r\n {option.onRenderItemLink()}\r\n \r\n ))\r\n }\r\n \r\n
\r\n \r\n {nameInCircle}\r\n
);\r\n};\r\n\r\nUnStyledCircleLogo.propTypes = {\r\n classes: PropTypes.shape({\r\n container: PropTypes.string.isRequired,\r\n }).isRequired,\r\n name: PropTypes.string.isRequired,\r\n className: PropTypes.string.isRequired,\r\n};\r\n\r\nexport const CircleLogo = withDefaultStyles(\r\n UnStyledCircleLogo,\r\n getStyles\r\n);\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { ImageFit } from '@fluentui/react/lib/Image';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nimport { CircleLogo } from './circle-logo';\r\nimport { SmartImageConnector as SmartImage } from '../smart-image-connector';\r\n\r\n// square image\r\nconst DefaultImageWidth = 48;\r\nconst SmallerImageWidth = 40;\r\n\r\nconst getStyles = (_, { palette = {} }) => ({\r\n container: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n width: '100%',\r\n },\r\n defaultImageContainer: {\r\n marginRight: 12,\r\n\r\n '& $imageComponentRoot': {\r\n width: DefaultImageWidth,\r\n height: DefaultImageWidth,\r\n },\r\n },\r\n smallerImageContainer: {\r\n marginRight: 12,\r\n\r\n '& $imageComponentRoot': {\r\n width: SmallerImageWidth,\r\n height: SmallerImageWidth,\r\n },\r\n },\r\n imageComponentRoot: {\r\n borderRadius: '50%',\r\n MozBorderRadius: '50%',\r\n WebkitBorderRadius: '50%',\r\n },\r\n infoContainer: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n overflow: 'hidden',\r\n },\r\n label: {\r\n fontSize: 24,\r\n fontWeight: 'bold',\r\n lineHeight: '32px',\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n display: '-webkit-box',\r\n WebkitBoxOrient: 'vertical',\r\n WebkitLineClamp: 3,\r\n overflowWrap: 'break-word',\r\n color: palette.primaryText,\r\n },\r\n labelWithTimestamp: {\r\n fontSize: 14,\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n },\r\n timestamp: {\r\n fontSize: 12,\r\n color: '#605e5c',\r\n },\r\n});\r\n\r\nconst UnStyledLogoImage = ({\r\n imageId,\r\n label,\r\n timestamp,\r\n classes,\r\n logoDataProperty,\r\n businessNameDataProperty,\r\n}) => {\r\n let imageWidth = DefaultImageWidth;\r\n\r\n let imageContainerClassName = classes.defaultImageContainer;\r\n let labelClassName = classes.label;\r\n\r\n if (timestamp) {\r\n imageWidth = SmallerImageWidth;\r\n\r\n imageContainerClassName = classes.smallerImageContainer;\r\n labelClassName = classes.labelWithTimestamp;\r\n }\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nUnStyledLogoImage.propTypes = {\r\n imageId: PropTypes.string,\r\n label: PropTypes.string.isRequired,\r\n timestamp: PropTypes.string,\r\n logoDataProperty: PropTypes.string,\r\n businessNameDataProperty: PropTypes.string,\r\n classes: PropTypes.shape({\r\n container: PropTypes.string.isRequired,\r\n }).isRequired,\r\n};\r\n\r\nUnStyledLogoImage.defaultProps = {\r\n imageId: null,\r\n timestamp: null,\r\n logoDataProperty: null,\r\n businessNameDataProperty: null,\r\n};\r\n\r\nUnStyledLogoImage.displayName = 'LogoImage';\r\n\r\nexport const LogoImage = withDefaultStyles(UnStyledLogoImage, getStyles);\r\n","import {\r\n getDataSourceByKeys,\r\n DATA_SOURCE_KEY_MAPPING,\r\n SMART_PAGE_DEFAULT_VALUES,\r\n} from '@bingads-webui-campaign-react/smart-component-util';\r\n\r\nexport const proxyReadLogoConfig = ({ i18n, siteConfig }) => {\r\n const [\r\n businessName,\r\n logoImageId,\r\n ] = getDataSourceByKeys(siteConfig, [\r\n DATA_SOURCE_KEY_MAPPING.BusinessName,\r\n DATA_SOURCE_KEY_MAPPING.LogoImageId,\r\n ]);\r\n\r\n return {\r\n label: businessName || i18n.getString(SMART_PAGE_DEFAULT_VALUES.BUSINESS_NAME),\r\n imageId: logoImageId,\r\n };\r\n};\r\n","import { useContext, useEffect, useState } from 'react';\r\n\r\nimport {\r\n DataServiceContext,\r\n useEditorStatusContext,\r\n useInstrumentationServiceContext,\r\n SiteConfigContext,\r\n} from '@bingads-webui-campaign-react/smart-page-context';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport {\r\n useFloatingBannerMessage,\r\n filterImportedImages,\r\n disableImportedImages,\r\n ImageSource,\r\n getUniqueFacebookPhotos,\r\n} from '@bingads-webui-campaign-react/smart-component-util';\r\nimport {\r\n facebookPageInfoFilter,\r\n importFromFacebook,\r\n hasFBOAuthError,\r\n} from '@bingads-webui-campaign-react/smart-page-facebook-import-dialog';\r\n\r\nexport const useFacebookPhotos = (\r\n imagesToFilter = [],\r\n shouldStart = true,\r\n // If this is set to true, photo won't be filtered out from list, but give them a tag\r\n disableFilteredItem = false\r\n) => {\r\n const [isFbSupported, setIsFbSupported] = useState(true);\r\n const [fbPhotos, setFbPhotos] = useState([]);\r\n const [filteredFbPhotos, setFilteredFbPhotos] = useState([]);\r\n const [isInitializing, setIsInitializing] = useState(true);\r\n\r\n const i18n = useContext(I18nContext);\r\n const { smartPageService, hostSystemScenario } = useContext(DataServiceContext);\r\n const { siteConfig } = useContext(SiteConfigContext);\r\n\r\n const [, dispatchEditorStatus] = useEditorStatusContext();\r\n const { showWarning } = useFloatingBannerMessage(dispatchEditorStatus);\r\n const logger = useInstrumentationServiceContext();\r\n\r\n useEffect(() => {\r\n if (shouldStart) {\r\n importFromFacebook(\r\n siteConfig,\r\n smartPageService,\r\n facebookPageInfoFilter.photos,\r\n hostSystemScenario\r\n )\r\n .then(({ photos }) => {\r\n const uniquePhotos = getUniqueFacebookPhotos(photos);\r\n setFbPhotos(uniquePhotos);\r\n setIsFbSupported(true);\r\n })\r\n .catch((err) => {\r\n if (err && (err.message === 'NO_FB_AUTH' || hasFBOAuthError(err))) {\r\n if (hasFBOAuthError(err)) {\r\n logger.logTrace('Encounter Facebook OAuth error while importing FB photos');\r\n }\r\n setIsFbSupported(false);\r\n } else {\r\n setIsFbSupported(true);\r\n logger.logError(`Import photos from facebook failed. ${err}, error string: ${JSON.stringify(err)}`);\r\n showWarning(i18n.getString(_TL_('We were not able to find photos from this Facebook page. Please try again or reimport your Facebook Page.')));\r\n }\r\n })\r\n .finally(() => setIsInitializing(false));\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [shouldStart]);\r\n\r\n useEffect(() => {\r\n if (disableFilteredItem) {\r\n setFilteredFbPhotos(disableImportedImages(fbPhotos, imagesToFilter, ImageSource.Facebook));\r\n } else {\r\n setFilteredFbPhotos(filterImportedImages(fbPhotos, imagesToFilter, ImageSource.Facebook));\r\n }\r\n }, [fbPhotos, imagesToFilter, disableFilteredItem]);\r\n\r\n return {\r\n isFbSupported,\r\n fbPhotos: filteredFbPhotos,\r\n isInitializing,\r\n };\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\n\r\nimport { FontIcon } from '@fluentui/react/lib/Icon';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nconst getStyles = (_, { palette = {} }) => ({\r\n container: {\r\n width: 205,\r\n height: 160,\r\n position: 'relative',\r\n border: `1px dashed ${palette.themePrimary}`,\r\n borderRadius: '4px',\r\n color: palette.themePrimary,\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n background: palette.white,\r\n '&:hover': {\r\n border: `1px solid ${palette.themePrimary}`,\r\n outline: `1px solid ${palette.themePrimary}`,\r\n },\r\n },\r\n icon: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n fontSize: 18,\r\n fontWeight: 'bold',\r\n borderRadius: '99px',\r\n width: 44,\r\n height: 44,\r\n background: 'white',\r\n marginBottom: '5px',\r\n },\r\n});\r\n\r\nconst UnStyledAddImagesPlaceholder = ({\r\n i18n,\r\n onClick,\r\n classes,\r\n className,\r\n text,\r\n}) => (\r\n \r\n {imageId && (\r\n
\r\n \r\n \r\n {label}\r\n \r\n {timestamp &&\r\n {timestamp}\r\n }\r\n
\r\n \r\n
\r\n );\r\n }\r\n\r\n return (\r\n \r\n onDelete(item, index)}\r\n iconProps={{ iconName: 'Cancel' }}\r\n className={classnames(classes.iconButton, 'smart-page-gallery-delete-button')}\r\n ariaLabel={i18n.getString(_TL_('Remove image {{number}}'), { number: index + 1 })}\r\n />\r\n
\r\n );\r\n }, [classes, i18n, onDelete, deleteOnly, onReplace]);\r\n\r\n const onRenderImageItem = useCallback((item, index) => (\r\n \r\n
\r\n ), [classes, renderIconContainer, imageWidth, displayOnly, imageRetryLimit]);\r\n\r\n return (\r\n SAMPLE PRIVACY STATEMENT
The purpose of a privacy statement is to provide information regarding the personal data you collect or process, how you collect or process it, and for what purposes. This template is for reference purposes only, and you must customize it for your business, as privacy laws vary by location and industry.
You may have obligations to provide specific disclosures under law, you may have specific obligations to your services providers, and you may need specific user consents and/or to allow users to opt-out of the collection or sharing of their personal data. This template should not be used outside the United States.
This template is not legal advice nor a substitute for a privacy assessment, security review, legal review, or robust privacy program management.
ANY USE OF THE TEMPLATE IS AT YOUR OWN RISK AND IT IS RECOMMENDED THAT YOU REVIEW THIS TEMPLATE WITH YOUR LEGAL COUNSEL PRIOR TO USE.
---------------------------------------------------------------------------------------------------------------------
[Please customize this sample Privacy Statement]
[Company Name] is committed to protecting the privacy and security of your information in accordance with this Privacy Statement and applicable law.
Information collected:
[If you collect data using a customer action button like “Get Quote” or “Book Appointment”]
Webforms:
[Your website name] uses webforms forms on this site. These forms require users to give contact information [list information collected]. Contact information from the registration form is used to send material relating to the [event/course/purpose] for which it was collected and may be shared with our advertising partners or other third parities for advertising purposes.
If you complete an intake form, we collect the following personal information:
- First and last name
- email address
- phone number
[If your site uses analytics, customize the following to clearly state what data is collected.]
Analytics:
[Website name] servers collect the following analytics:
- Anonymized conversion data through customer action button
Other Information we Collect:
Microsoft Smart Pages does not collect any other information, so you can delete this section if not applicable.
- [Other forms of data collection: Customize to accurately reflect other ways data is collected on your website such as via webforms, cookies, surveys, or registration forms.]
Third Party Data Collection:
In addition, our website utilizes Microsoft Advertising, and we created our website using Smart Pages. Microsoft will collect and share the following information with [Company Name] in accordance with their Privacy Statement at Microsoft Privacy Statement – Microsoft privacy.
- conversion data if you click a customer action button from an ad
- personal data associated with the action button, including:
- first and last name
- email address
- phone number
Microsoft will use the above information in accordance with their Privacy Statement at Microsoft Privacy Statement – Microsoft privacy for the following purposes:
- to show you ads that are more personalized
- to improve their advertising products and services
- Smart Page website optimization and troubleshooting
Microsoft account users can manage their ad settings and opt-out of personalized advertising at: Microsoft account | Privacy
Cookies:
[Your website name] site may use \"cookies\" in order to deliver web content specific to individual users' interests or to keep track of online purchasing transactions. Microsoft Smart Pages does not collect any other information, so you can delete this section if not applicable.
Use of collected information:
[Customize the following to reflect the data collection and use]
[Your website name] will use personal information collected from this site for the purpose of communication back to individuals who contact us via the site and for the following:
- to respond to requests for quotes or proposals
- to provide our products/services
- to provide customer service
- to improve our products and services
- to update, secure and troubleshoot our website
- to personalize our products and make recommendations
- to advertise and market to you, including sending promotional communications, targeted advertising, and to present you with relevant offers
Distribution of collected information:
[Customize the following to confirm accuracy]
- [Your website name] will not disclose, without your consent, personal information collected about you, except for as outlined in this Privacy Statement or where required by law.
- [Your website name] will not sell personal information to third-party organizations.
Privacy Statement Revisions:
This Privacy Statement was last revised on [Date of last revision]. We may change this Privacy Statement at any time and for any reason. We encourage you to review this Privacy Statement each time you visit the web site.
Responsibility for External Sites:
This website may contain links to other web sites. Some of those web sites may be operated by third parties. We provide the links for your convenience, but we do not review, control, or monitor the privacy practices of web sites operated by others. We are not responsible for the performance of web sites operated by third parties or for your business dealings with them. Therefore, whenever you leave this web site we recommend that you review each web site's privacy practices and make your own conclusions regarding the adequacy of these practices.
Cross-Border Data Transfer:
Microsoft adheres to the principles of the EU-U.S. and Swiss-U.S. Privacy Shield frameworks, although Microsoft does not rely on the EU-U.S. Privacy Shield Framework as a legal basis for transfers of personal data in light of the judgment of the Court of Justice of the EU in Case C-311/18. To learn more, visit the U.S. Department of Commerce’s Privacy Shield website.
[Your website name] is located in [insert location] and to the extent that [Your website name] collects, processes, or stores personal data outside the European Union, we comply with applicable data transfer laws.
We created our website using Microsoft Smart Pages. Microsoft stores website information on behalf of [Your website name]in accordance with their Privacy Statement at Microsoft Privacy Statement – Microsoft privacy.
How to contact us
You may contact us at:
[insert contact information]
EJEMPLO DE DECLARACIÓN DE PRIVACIDAD
El propósito de una declaración de privacidad es proporcionar información sobre los datos personales que recopila o trata, cómo los recopila o trata y con qué fines. Esta plantilla es solo para fines de referencia y debe personalizarla para su empresa, ya que las leyes de privacidad varían según la ubicación y el sector.
Es posible que tenga la obligación de proporcionar información específica en virtud de la ley, que tenga obligaciones específicas con respecto a sus proveedores de servicios y que necesite consentimientos específicos del usuario o permitir que los usuarios rechacen la recopilación o la cesión de sus datos personales. Esta plantilla no debe utilizarse fuera de los Estados Unidos.
Esta plantilla no constituye asesoramiento legal ni sustituye a una evaluación de privacidad, revisión de seguridad, revisión legal o gestión integral del programa de privacidad.
CUALQUIER USO DE LA PLANTILLA CORRE POR SU CUENTA Y RIESGO Y SE RECOMIENDA QUE REVISE ESTA PLANTILLA CON SU ASESOR LEGAL ANTES DE USARLA.
------------------------------------------------------------------------------------------------------------------------------
[Personalice este ejemplo de Declaración de privacidad]
[Nombre de la empresa] se compromete a proteger la privacidad y seguridad de sus datos de acuerdo con esta Declaración de privacidad y la legislación aplicable.
Datos recopilados:
[Si recopila datos utilizando un botón de acción del cliente como “Obtener presupuesto” o “Reservar cita”]
Formularios web:
[Nombre de su sitio web] utiliza formularios web en este sitio. Estos formularios requieren que los usuarios proporcionen información de contacto [enumerar los datos recopilados]. La información de contacto del formulario de registro se utiliza para enviar material relacionado con el [evento/curso/propósito] para el que se recopiló y puede cederse a nuestros socios publicitarios u otros terceros con fines publicitarios.
Si cumplimenta un formulario de admisión, recopilamos los siguientes datos personales:
- Nombre y apellidos
- Dirección de correo electrónico
- Número de teléfono
[Si su sitio utiliza análisis, personalice lo siguiente para indicar claramente qué datos se recopilan.]
Análisis:
Los servidores de [Nombre del sitio web] recopilan los siguientes análisis:
- Datos de conversión anonimizados a través del botón de acción del cliente
Otra información que recopilamos:
Microsoft Smart Pages no recopila ninguna otra información, por lo que puede eliminar esta sección si no procede.
- [Otras formas de recopilación de datos: Personalizar para reflejar con precisión otras formas en que se recopilan datos en su sitio web, como a través de formularios web, cookies, encuestas o formularios de registro.]
Recopilación de datos de terceros:
Además, nuestro sitio web utiliza Microsoft Advertising y creamos nuestro sitio web utilizando Smart Pages. Microsoft recopilará y cederá la siguiente información con [Nombre de la empresa] de acuerdo con su Declaración de privacidad en Declaración de privacidad de Microsoft – Privacidad de Microsoft.
- datos de conversión si hace clic en el botón de acción de un cliente desde un anuncio
- datos personales asociados con el botón de acción, incluidos:
- nombre y apellidos
- dirección de correo electrónico
- número de teléfono
Microsoft utilizará la información anterior de acuerdo con su Declaración de privacidad en la Declaración de privacidad de Microsoft – Privacidad de Microsoft para los siguientes fines:
- para mostrarle anuncios más personalizados
- para mejorar sus productos y servicios publicitarios
- Optimización y solución de problemas del sitio web de Smart Page
Los usuarios de cuentas de Microsoft pueden gestionar su configuración de anuncios y darse de baja de la publicidad personalizada en: Cuenta de Microsoft | Privacidad
Cookies:
[Nombre de su sitio web ] puede utilizar “cookies” para ofrecer contenido web específico para los intereses individuales de los usuarios opara realizar un seguimiento de las transacciones de compra en línea. Microsoft Smart Pages no recopila ninguna otra información, por lo que puede eliminar esta sección si no procede.
Uso de la información recopilada:
[Personalice lo siguiente para reflejar la recopilación y el uso de datos]
[Nombre de su sitio web] utilizará la información personal recopilada de este sitio con el fin de comunicarse con las personas que se pongan en contacto con nosotros a través del sitio y para lo siguiente:
- para responder a solicitudes de presupuestos o propuestas
- para proporcionar nuestros productos/servicios
- para proporcionar servicio al cliente
- para mejorar nuestros productos y servicios
- para actualizar, proteger y solucionar problemas en nuestro sitio web
- para personalizar nuestros productos y hacer recomendaciones
- para anunciarle y comercializar, incluido el envío de comunicaciones promocionales, publicidad dirigida y para presentarle ofertas relevantes
Distribución de la información recopilada:
[Personalice lo siguiente para confirmar la exactitud]
- [Nombre de su sitio web] no cederá, sin su consentimiento, la información personal recopilada sobre usted, excepto según se describe en esta Declaración de privacidad o cuando lo exija la ley.
- [Nombre de su sitio web ] no venderá información personal a organizaciones externas.
Revisiones de la declaración de privacidad:
Esta Declaración de privacidad se revisó por última vez el [Fecha de la última revisión]. Podemos cambiar esta Declaración de privacidad en cualquier momento y por cualquier motivo. Le recomendamos que revise esta Declaración de privacidad cada vez que visite el sitio web.
Responsabilidad de los sitios externos:
Este sitio web puede contener enlaces a otros sitios web. Algunos de esos sitios web pueden ser gestionados por terceros. Proporcionamos los enlaces para su comodidad, pero no revisamos, controlamos ni supervisamos las prácticas de privacidad de los sitios web gestionados por terceros. No somos responsables del rendimiento de los sitios web gestionados por terceros ni de sus relaciones comerciales con ellos. Por lo tanto, siempre que salga de este sitio web, le recomendamos que revise las prácticas de privacidad de cada sitio web y que saque sus propias conclusiones sobre la idoneidad de estas prácticas.
Transferencia de datos transfronteriza:
[Nombre de su sitio web ] se encuentra en [insertar ubicación] y, en la medida en que [Nombre de su sitio web] recopile, trate o almacene datos personales fuera de la Unión Europea, cumplimos con las leyes de transferencia de datos aplicables.
Creamos nuestro sitio web con Microsoft Smart Pages. Microsoft almacena información del sitio web en nombre de [Nombre de sitio web]de acuerdo con su Declaración de privacidad en la Declaración de privacidad de Microsoft – Privacidad de Microsoft.
Microsoft se adhiere a los principios de los marcos de los Escudos de Privacidad UE-EE. UU. y Suiza-EE. UU., aunque Microsoft no se basa en el Escudo de Privacidad UE-EE. UU. como base jurídica para las transferencias de datos personales a la luz de la sentencia del Tribunal de Justicia de la UE en el Asunto C-311/18. Para obtener más información, visite el sitio web del Escudo de Privacidad del Departamento de Comercio de EE. UU.
Cómo ponerse en contacto con nosotros:
Puede ponerse en contacto con nosotros en:
[insertar información de contacto]
プライバシー ステートメントのサンプル
プライバシー ステートメントの目的は、収集または処理される個人データ、その収集または処理方法、およびその目的に関する情報を提供することです。本テンプレートはあくまでも参考として使用してください。プライバシー法は場所や業界によって異なるため、ビジネスに合わせてカスタマイズする必要があります。
プライバシー ステートメントは、法律に基づき特定の開示義務を負う場合、サービス プロバイダーに対して特定の義務を負う場合、特定のユーザーの同意を必要とする場合、および/またはユーザーが自分の個人データの収集または共有をオプトアウトできるようにする場合などで使用されます。本テンプレートは米国外では使用しないでください。
本テンプレートは、法的助言ではなく、また、プライバシー評価、セキュリティ レビュー、法的レビュー、または堅牢なプライバシー プログラム管理に代わるものではありません。
テンプレートの使用については自己責任で行うものとし、使用前に本テンプレートの内容を法律顧問と共に確認することをお勧めします。
---------------------------------------------------------------------------------------------------------------------
[本プライバシー ステートメントのサンプルをカスタマイズしてください]
[会社名] は、本プライバシー ステートメントおよび適用法に従って、お客様の情報のプライバシーおよびセキュリティを保護することに尽力します。
収集される情報
[「見積もりを取る」または「予約を入れる」などのお客様の動作設定ボタンを使用してデータを収集する場合]
Web フォーム
[貴社の Web サイト名] は、当サイトの Web フォームを使用します。これらのフォームでは、ユーザーは連絡先情報 [収集される情報のリスト] を提供する必要があります。登録フォームの連絡先情報は、情報収集の目的に合致した [イベント / コース / 目的] に関連する資料を送付するために使用されます。また、広告目的で当社の広告パートナーまたはその他第三者と共有される場合があります。
受付フォームに記入した場合、以下の個人情報が収集されます。
- 氏名
- 電子メール アドレス
- 電話番号
[サイトが Analytics を使用している場合、収集されるデータを明確にするために以下をカスタマイズしてください。]
Analytics
[Web サイト名] サーバーは、以下の Analytics を収集します。
- お客様の動作設定ボタンにより匿名化された変換データ
当社が収集するその他の情報
Microsoft Smart Pages ではその他の情報は収集されません。そのため、該当しない場合はこのセクションを削除できます。
- [その他のデータ収集形式: Web フォーム、Cookie、アンケート、登録フォームなど、Web サイトでのその他のデータ収集方法に正確に合わせて、カスタマイズしてください。]
第三者によるデータ収集
当 Web サイトは Microsoft Advertising を利用し、また、Smart Pages を使用して作成されました。Microsoft は、Microsoft プライバシー ステートメント - Microsoft プライバシーのプライバシー ステートメントに従って、以下の情報を収集し、[会社名] と共有します。
- 変換データ (広告からお客様の動作設定ボタンがクリックされた場合)
- かかる動作設定ボタンに関連付けられた以下の個人データ
- 氏名
- 電子メール アドレス
- 電話番号
Microsoft は、Microsoft プライバシー ステートメント - Microsoft プライバシーのプライバシー ステートメントに従って、上記の情報を以下の目的で使用します。
- よりパーソナライズされた広告の表示
- 広告製品およびサービスの改善
- Smart Page Web サイトの最適化およびトラブルシューティング
Microsoft アカウント ユーザーは、Microsoft アカウント | プライバシーから広告設定の管理およびパーソナライズド広告をオプトアウトすることができます。
Cookie
[貴社の Web サイト名] サイトは、個々のユーザーの関心に特化した Web コンテンツを配信するため、またはオンライン購入取引を追跡するために、「Cookie」を使用する場合があります。Microsoft Smart Pages ではその他の情報は収集されません。そのため、該当しない場合はこのセクションを削除できます。
収集された情報の使用
[データの収集および使用に合わせて以下をカスタマイズしてください]
[貴社の Web サイト名] は、当サイトからご連絡いただいたお客様に返信するために、および以下の目的で、このサイトから収集した個人情報を使用します。
- 見積もりや提案のご依頼への対応
- 当社の製品 / サービスの提供
- カスタマーサービスの提供
- 当社の製品およびサービスの改善向上
- 当 Web サイトの更新、保護、トラブルシューティング
- 当社製品のパーソナライズ、および提案
- プロモーション、ターゲット広告の配信、関連オファーの提示など、お客様を対象にした広告およびマーケティング
収集された情報の配布
[正確性を確認するために以下をカスタマイズしてください]
- [貴社の Web サイト名] は、本プライバシー ステートメントに概説されている、または法律で義務付けられている場合を除き、お客様の同意なしに、お客様について収集された個人情報を開示しません。
- [貴社の Web サイト名] は、個人情報を第三者組織に販売することはありません。
プライバシー ステートメントの改訂
本プライバシー ステートメントの最終改訂日は [最終改訂日] です。当社は、理由の如何を問わず、いつでも本プライバシー ステートメントを変更することができます。当 Web サイトの訪問の際には常に本プライバシー ステートメントを確認することをお勧めします。
外部サイトに対する責任
当 Web サイトには、他の Web サイトへのリンクが含まれている場合があります。これらの Web サイトの一部は、第三者によって運営されている場合があります。当社は、お客様の便宜のためにリンクを提供していますが、他者が運営する Web サイトのプライバシー慣行を確認、管理、監視することはありません。当社は、第三者が運営する Web サイトのパフォーマンス、またはお客様による第三者とのビジネス取引について責任を負いません。したがって、当 Web サイトを離れるときは必ず各 Web サイトのプライバシー慣行を確認し、これらの慣行の妥当性についてご自身で判断することをお勧めします。
国境を越えたデータ転送
[貴社の Web サイト名] は [場所を挿入] にあり、[貴社の Web サイト名] が欧州連合外で個人データを収集、処理、または保存する範囲で、当社は適用されるデータ転送法を遵守します。
当 Web サイトは Microsoft Smart Pages を使用して作成されました。Microsoft は、[貴社の Web サイト名] に代わり、Microsoft プライバシー ステートメント – Microsoft プライバシーのプライバシー ステートメントに従って、Web サイト情報を保存します。
Microsoft は、EU - 米国間およびスイス - 米国間のプライバシー シールド フレームワークの原則を遵守していますが、Microsoft は、ケース C - 311 / 18 の EU 司法裁判所の判断に照らし、個人データの移転の法的根拠として EU - 米国間のプライバシー シールド フレームワークに依拠していません。詳細については、米国商務省のプライバシー シールド Web サイトをご覧ください。
お問い合わせ
お問い合わせ先:
[連絡先情報を挿入]
\r\n \r\n
\r\n ),\r\n },\r\n {\r\n name: 'ms-policy',\r\n isToggleHidden: true,\r\n isExpanded: true,\r\n title: i18n.getString(_TL_('Microsoft privacy policy ')),\r\n summary: \r\n \r\n (\r\n \r\n {text}\r\n \r\n ),\r\n }}\r\n template={i18n.getString(_TL_('Smart Pages is built by Microsoft. Microsoft helps process any information you input. {{link}}Microsoft Privacy & Cookies{{/link}}'))}\r\n />\r\n \r\n
\r\n ),\r\n },\r\n ]), [i18n, policyHtmlContent, businessName, locale]);\r\n\r\n const accordionItems = useMemo(() => (\r\n privacyItemConfigs.map((config, index) => {\r\n const isExpanded = expandedIndex === index || config.isExpanded;\r\n const onToggle = isExpanded ? collapse : () => expand(index);\r\n\r\n return (\r\n \r\n {accordionItems}\r\n
\r\n );\r\n};\r\n\r\nUnstyledPrivacyContent.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n classes: PropTypes.shape({}).isRequired,\r\n businessName: PropTypes.string.isRequired,\r\n value: PropTypes.string.isRequired,\r\n};\r\n\r\nexport const PrivacyContent = withDefaultStyles(UnstyledPrivacyContent, () => ({\r\n root: {\r\n '& .ba-accordion-details': {\r\n minHeight: 20,\r\n },\r\n marginBottom: 30,\r\n overflowWrap: 'anywhere',\r\n },\r\n}));\r\n","import React, { useState, useCallback, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\n\r\nimport {\r\n Dialog, DialogType, Checkbox, ActionButton,\r\n PrimaryButton, DefaultButton, Label,\r\n getTheme, AnimationClassNames,\r\n} from '@fluentui/react';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { SmartRichTextEditor } from '@bingads-webui-campaign-react/smart-component-text';\r\nimport { ReactTemplate } from '@bingads-webui-react/react-template';\r\nimport { mobileDevice } from '@bingads-webui-campaign-react/mca-core';\r\nimport { useMobileSupportEnabled, useInstrumentationServiceContext } from '@bingads-webui-campaign-react/smart-page-context';\r\nimport { useContextLocale } from '@bingads-webui-campaign-react/smart-page-data-service';\r\nimport { useElementViewed } from '@bingads-webui-campaign-react/smart-component-util';\r\n\r\nimport { PrivacyContent } from './privacy-content';\r\nimport { privacyContentMaxLength } from '../data-config';\r\nimport { getPrivacyBoilerplate } from './privacy-content-configs';\r\n\r\nconst { semanticColors, fonts } = getTheme();\r\n\r\nconst getStyles = (_, { palette = {} }) => ({\r\n actionGroup: {\r\n textAlign: 'right',\r\n margin: '30px 0 5px',\r\n\r\n '& > button:not(:last-child)': {\r\n marginRight: '10px',\r\n },\r\n },\r\n rte: {\r\n '& .smart-rich-text-editor-label': {\r\n fontWeight: 400,\r\n lineHeight: '20px',\r\n marginBottom: 20,\r\n },\r\n '& .rich-text-editor-wrapper': {\r\n overflow: 'auto',\r\n minHeight: 300,\r\n maxHeight: 400,\r\n },\r\n },\r\n previewButton: {\r\n color: palette.themePrimary || '#0078d4',\r\n fontWeight: 600,\r\n textDecoration: 'underline',\r\n paddingLeft: 0,\r\n marginBottom: 5,\r\n\r\n '& .ms-Button-label': {\r\n margin: 0,\r\n },\r\n },\r\n reviewCheckboxContainer: {\r\n marginBottom: 25,\r\n },\r\n topBackButton: {\r\n position: 'absolute',\r\n left: 63,\r\n [mobileDevice]: {\r\n left: 10,\r\n top: 10,\r\n },\r\n },\r\n previewTitle: {\r\n [mobileDevice]: {\r\n paddingLeft: 40,\r\n },\r\n },\r\n dialogTitle: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n },\r\n});\r\n\r\nexport const labelErrorStyle = {\r\n root: [\r\n fonts.small,\r\n AnimationClassNames.slideDownIn20,\r\n {\r\n color: semanticColors.errorText,\r\n margin: 0,\r\n paddingTop: 5,\r\n display: 'flex',\r\n alignItems: 'center',\r\n },\r\n ],\r\n};\r\n\r\nconst dialogContentStyle = {\r\n title: {\r\n fontSize: 24,\r\n padding: 20,\r\n lineHeight: '28px',\r\n textAlign: 'center',\r\n [mobileDevice]: {\r\n fontSize: 20,\r\n },\r\n },\r\n inner: {\r\n margin: '5px 50px 15px',\r\n [mobileDevice]: {\r\n margin: 0,\r\n },\r\n },\r\n};\r\n\r\nconst elementScope = 'EditPrivacyDialog';\r\n\r\nexport const UnstyledEditPrivacyDialog = ({\r\n defaultValue,\r\n onSave,\r\n onClose,\r\n i18n,\r\n classes,\r\n // Mainly use to disable the check box\r\n isPrivacyStatementReviewed,\r\n businessName,\r\n}) => {\r\n const locale = useContextLocale();\r\n const [value, setValue] = useState(defaultValue || getPrivacyBoilerplate(i18n, locale));\r\n // Internal state for check box\r\n const [isReviewedInternal, setIsReviewedInternal] = useState(isPrivacyStatementReviewed);\r\n const [isPreview, setIsPreview] = useState(false);\r\n const [validationError, setValidationError] = useState(null);\r\n const [showReviewError, setShowReviewError] = useState(null);\r\n\r\n const logger = useInstrumentationServiceContext();\r\n const isMobile = useMobileSupportEnabled();\r\n useElementViewed(logger, elementScope);\r\n\r\n const onChange = useCallback(({ value: newValue }) => {\r\n setValue(newValue);\r\n }, []);\r\n\r\n const onHandleSave = useCallback(() => {\r\n logger.logTrace(`${elementScope}|SaveButton|Clicked`);\r\n\r\n if (isReviewedInternal && !validationError) {\r\n onSave(value);\r\n onClose();\r\n } else {\r\n setShowReviewError(true);\r\n }\r\n }, [isReviewedInternal, onClose, onSave, validationError, value, logger]);\r\n\r\n const onHandleCancel = useCallback(() => {\r\n logger.logTrace(`${elementScope}|CancelButton|Clicked`);\r\n onClose();\r\n }, [logger, onClose]);\r\n\r\n const onToggleReview = useCallback((_, checked) => {\r\n setIsReviewedInternal(checked);\r\n logger.logTrace(`${elementScope}|ReviewToggle|Changed|${checked}`);\r\n }, [logger]);\r\n\r\n const onClickBack = useCallback(() => {\r\n setIsPreview(false);\r\n logger.logTrace(`${elementScope}|BackButton|Clicked`);\r\n }, [logger]);\r\n\r\n const onClickPreview = useCallback(() => {\r\n setIsPreview(true);\r\n logger.logTrace(`${elementScope}|PreviewButton|Clicked`);\r\n }, [logger]);\r\n\r\n const dialogTitle = useMemo(() => {\r\n if (isPreview) {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n\r\n return i18n.getString(_TL_('Edit your privacy policy'));\r\n }, [classes, i18n, isPreview, isMobile, onClickBack]);\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\nUnstyledEditPrivacyDialog.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n defaultValue: PropTypes.string.isRequired,\r\n businessName: PropTypes.string.isRequired,\r\n onSave: PropTypes.func.isRequired,\r\n onClose: PropTypes.func.isRequired,\r\n classes: PropTypes.shape({}).isRequired,\r\n isPrivacyStatementReviewed: PropTypes.bool,\r\n};\r\n\r\nUnstyledEditPrivacyDialog.defaultProps = {\r\n isPrivacyStatementReviewed: false,\r\n};\r\n\r\nexport const EditPrivacyDialog = withDefaultStyles(\r\n UnstyledEditPrivacyDialog,\r\n getStyles\r\n);\r\n\r\n","export const getTranslatedTemplate = (i18n, locale) => `\r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n`;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { Dialog, DialogType } from '@fluentui/react/lib/Dialog';\r\nimport { useElementViewed } from '@bingads-webui-campaign-react/smart-component-util';\r\nimport { useInstrumentationServiceContext } from '@bingads-webui-campaign-react/smart-page-context';\r\n\r\nimport { PrivacyContent } from './privacy-content';\r\n\r\nconst getDialogContentStyle = isMobile => ({\r\n title: {\r\n fontSize: 24,\r\n padding: 20,\r\n lineHeight: '28px',\r\n textAlign: 'center',\r\n },\r\n inner: {\r\n margin: isMobile ? 0 : '20px 50px 40px',\r\n },\r\n});\r\n\r\nexport const PrivacyContentDialog = ({\r\n value,\r\n businessName,\r\n onClose,\r\n i18n,\r\n isMobile,\r\n}) => {\r\n const logger = useInstrumentationServiceContext();\r\n useElementViewed(logger, 'RuntimePrivacyDialog');\r\n\r\n return (\r\n ${i18n.getString(_TL_('SAMPLE PRIVACY STATEMENT'))}
\r\n ${i18n.getString(_TL_('The purpose of a privacy statement is to provide information regarding the personal data you collect or process, how you collect or process it, and for what purposes. This template is for reference purposes only, and you '))}${i18n.getString(_TL_('must customize it for your business'))}${i18n.getString(_TL_(', as privacy laws vary by location and industry. '))}
\r\n ${i18n.getString(_TL_('You may have obligations to provide specific disclosures under law, you may have specific obligations to your services providers, and you may need specific user consents and/or to allow users to opt-out of the collection or sharing of their personal data. This template '))}${i18n.getString(_TL_('should not be used outside the United States.'))}
\r\n ${i18n.getString(_TL_('This template is not legal advice nor a substitute for a privacy assessment, security review, legal review, or robust privacy program management. '))}
\r\n ${i18n.getString(_TL_('ANY USE OF THE TEMPLATE IS AT YOUR OWN RISK AND IT IS RECOMMENDED THAT YOU REVIEW THIS TEMPLATE WITH YOUR LEGAL COUNSEL PRIOR TO USE. '))}
\r\n ---------------------------------------------------------------------------------------------------------------------
\r\n ${i18n.getString(_TL_('[Please customize this sample Privacy Statement]'))}
\r\n ${i18n.getString(_TL_('[Company Name] is committed to protecting the privacy and security of your information in accordance with this Privacy Statement and applicable law. '))}
\r\n ${i18n.getString(_TL_('Information collected: '))}
\r\n ${i18n.getString(_TL_('[If you collect data using a customer action button like “Get Quote” or “Book Appointment”] '))}
\r\n ${i18n.getString(_TL_('Webforms: '))}
\r\n ${i18n.getString(_TL_('[Your website name] uses webforms forms on this site. These forms require users to give contact information [list information collected]. Contact information from the registration form is used to send material relating to the [event/course/purpose] for which it was collected and may be shared with our advertising partners or other third parities for advertising purposes. '))}
\r\n ${i18n.getString(_TL_('If you complete an intake form, we collect the following personal information: '))}
\r\n \r\n
\r\n - \r\n
- ${i18n.getString(_TL_('First and last name'))} \r\n
- ${i18n.getString(_TL_('email address'))}
- ${i18n.getString(_TL_('phone number'))}
${i18n.getString(_TL_('[If your site uses analytics, customize the following to clearly state what data is collected.] '))}
\r\n ${i18n.getString(_TL_('Analytics: '))}
\r\n ${i18n.getString(_TL_('[Website name] servers collect the following analytics: '))}
\r\n \r\n
\r\n - \r\n
- ${i18n.getString(_TL_('Anonymized conversion data through customer action button '))} \r\n
${i18n.getString(_TL_('Other Information we Collect:'))}
\r\n ${i18n.getString(_TL_('Microsoft Smart Pages does not collect any other information, so you can delete this section if not applicable.'))}
\r\n \r\n
\r\n - \r\n
- ${i18n.getString(_TL_('[Other forms of data collection: Customize to accurately reflect other ways data is collected on your website such as via webforms, cookies, surveys, or registration forms.] '))} \r\n
${i18n.getString(_TL_('Third Party Data Collection: '))}
\r\n ${i18n.getString(_TL_('In addition, our website utilizes Microsoft Advertising, and we created our website using Smart Pages. Microsoft will collect and share the following information with [Company Name] in accordance with their Privacy Statement at '))}${i18n.getString(_TL_('Microsoft Privacy Statement - Microsoft privacy'))}.
\r\n \r\n
\r\n - \r\n
- ${i18n.getString(_TL_('conversion data if you click a customer action button from an ad '))} \r\n
- ${i18n.getString(_TL_('personal data associated with the action button, including:'))}
- ${i18n.getString(_TL_('first and last name'))}
- ${i18n.getString(_TL_('email address'))}
- ${i18n.getString(_TL_('phone number'))}
- \r\n
${i18n.getString(_TL_('Microsoft will use the above information in accordance with their Privacy Statement at '))}${i18n.getString(_TL_('Microsoft Privacy Statement - Microsoft privacy'))}${i18n.getString(_TL_(' for the following purposes: '))}
\r\n \r\n
\r\n - \r\n
- ${i18n.getString(_TL_('to show you ads that are more personalized'))}
- ${i18n.getString(_TL_('to improve their advertising products and services'))}
- ${i18n.getString(_TL_('Smart Page website optimization and troubleshooting'))} \r\n
${i18n.getString(_TL_('Microsoft account users can manage their ad settings and opt-out of personalized advertising at: '))}${i18n.getString(_TL_('Microsoft account | Privacy'))}
\r\n ${i18n.getString(_TL_('Cookies: '))}
\r\n ${i18n.getString(_TL_('[Your website name] site may use \"cookies\" in order to deliver web content specific to individual users\\' interests or to keep track of online purchasing transactions. '))}${i18n.getString(_TL_('Microsoft Smart Pages does not collect any other information, so you can delete this section if not applicable. '))}
\r\n ${i18n.getString(_TL_('Use of collected information:'))}
\r\n ${i18n.getString(_TL_('[Customize the following to reflect the data collection and use] '))}
\r\n ${i18n.getString(_TL_('[Your website name] will use personal information collected from this site for the purpose of communication back to individuals who contact us via the site and for the following: '))}
\r\n \r\n
\r\n - \r\n
- ${i18n.getString(_TL_('to respond to requests for quotes or proposals'))}
- ${i18n.getString(_TL_('to provide our products/services'))}
- ${i18n.getString(_TL_('to provide customer service'))}
- ${i18n.getString(_TL_('to improve our products and services'))}
- ${i18n.getString(_TL_('to update, secure and troubleshoot our website'))}
- ${i18n.getString(_TL_('to personalize our products and make recommendations'))}
- ${i18n.getString(_TL_('to advertise and market to you, including sending promotional communications, targeted advertising, and to present you with relevant offers'))}
${i18n.getString(_TL_('Distribution of collected information:'))}
\r\n ${i18n.getString(_TL_('[Customize the following to confirm accuracy]'))}
\r\n \r\n
\r\n - \r\n
- ${i18n.getString(_TL_('[Your website name] will not disclose, without your consent, personal information collected about you, except for as outlined in this Privacy Statement or where required by law.'))}
- ${i18n.getString(_TL_('[Your website name] will not sell personal information to third-party organizations.'))}
${i18n.getString(_TL_('Privacy Statement Revisions: '))}
\r\n ${i18n.getString(_TL_('This Privacy Statement was last revised on [Date of last revision]. We may change this Privacy Statement at any time and for any reason. We encourage you to review this Privacy Statement each time you visit the web site. '))}
\r\n ${i18n.getString(_TL_('Responsibility for External Sites: '))}
\r\n ${i18n.getString(_TL_('This website may contain links to other web sites. Some of those web sites may be operated by third parties. We provide the links for your convenience, but we do not review, control, or monitor the privacy practices of web sites operated by others. We are not responsible for the performance of web sites operated by third parties or for your business dealings with them. Therefore, whenever you leave this web site we recommend that you review each web site\\'s privacy practices and make your own conclusions regarding the adequacy of these practices. '))}
\r\n \r\n ${i18n.getString(_TL_('Cross-Border Data Transfer:'))}\r\n
\r\n
\r\n
${i18n.getString(_TL_('Microsoft adheres to the principles of the EU-U.S. and Swiss-U.S. Privacy Shield frameworks, although Microsoft does not rely on the EU-U.S. Privacy Shield Framework as a legal basis for transfers of personal data in light of the judgment of the Court of Justice of the EU in Case C-311/18. To learn more, visit the '))}${i18n.getString(_TL_('U.S. Department of Commerce\\'s Privacy Shield website.'))}
\r\n
\r\n ${i18n.getString(_TL_('[Your website name] is located in [insert location] and to the extent that [Your website name] collects, processes, or stores personal data outside the European Union, we comply with applicable data transfer laws. '))}
\r\n ${i18n.getString(_TL_('We created our website using Microsoft Smart Pages. Microsoft stores website information on behalf of [Your website name]in accordance with their Privacy Statement at Microsoft Privacy Statement - Microsoft privacy. '))}
\r\n \r\n
${i18n.getString(_TL_('How to contact us'))}
\r\n ${i18n.getString(_TL_('You may contact us at: '))}
\r\n ${i18n.getString(_TL_('[insert contact information]'))}
\r\n\r\n setShowEditDialog(false)}\r\n defaultValue={policyContent}\r\n isPrivacyStatementReviewed={isPrivacyStatementReviewed}\r\n businessName={businessName || defaultBusinessName}\r\n />\r\n }\r\n
\r\n );\r\n};\r\n\r\nUnstyledSmartPrivacyPolicyEditor.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n classes: PropTypes.shape({}).isRequired,\r\n};\r\n\r\nexport const SmartPrivacyPolicyEditor = withDefaultStyles(\r\n UnstyledSmartPrivacyPolicyEditor,\r\n getStyles\r\n);\r\n","import React, { useState, useMemo } from 'react';\r\nimport { uniqueId, isEmpty } from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\n\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { withErrorView } from '@bingads-webui-campaign-react/smart-page-error-boundary';\r\nimport { SmartHeader, useActionButtons } from '@bingads-webui-campaign-react/smart-component-header';\r\nimport { PrivacyContentDialog } from '@bingads-webui-campaign-react/smart-component-privacy-policy';\r\n\r\nconst commonFooterMobileContainerStyle = {\r\n marginLeft: 11,\r\n marginRight: 11,\r\n justifyContent: 'space-around',\r\n flexFlow: 'wrap',\r\n};\r\n\r\nconst getStyles = (components = {}, { palette = {} }) => ({\r\n footerContainer: {\r\n minHeight: 82,\r\n lineHeight: '50px',\r\n borderTop: '1px solid #C4C4C4',\r\n marginLeft: 33,\r\n marginRight: 33,\r\n display: 'flex',\r\n fontSize: 16,\r\n color: palette.footer,\r\n justifyContent: 'space-between',\r\n },\r\n footerContainerMobile: {\r\n ...commonFooterMobileContainerStyle,\r\n marginBottom: components.fixedMobileFooter.height,\r\n },\r\n footerContainerMobileForBlankBanner: {\r\n ...commonFooterMobileContainerStyle,\r\n },\r\n footerContainerMobileForHiddenButton: {\r\n ...commonFooterMobileContainerStyle,\r\n },\r\n link: {\r\n background: 'none',\r\n border: 'none',\r\n textDecoration: 'underline',\r\n height: 'fit-content',\r\n fontWeight: '600',\r\n },\r\n});\r\n\r\nexport const UnStyledSmartFooterView = ({\r\n classes,\r\n i18n,\r\n id,\r\n rootId,\r\n disabled,\r\n hideFooterButton,\r\n showPrivacyPolicy,\r\n isEditMode,\r\n businessName,\r\n policyContent,\r\n isMobile,\r\n}) => {\r\n const actionButtons = useActionButtons();\r\n const [showPrivacyPolicyDialog, setShowPrivacyPolicyDialog] = useState(false);\r\n\r\n let footerContainerMobileClass = null;\r\n if (isMobile) {\r\n if (hideFooterButton) {\r\n footerContainerMobileClass = classes.footerContainerMobileForHiddenButton;\r\n } else if (isEmpty(actionButtons)) {\r\n footerContainerMobileClass = classes.footerContainerMobileForBlankBanner;\r\n } else {\r\n footerContainerMobileClass = classes.footerContainerMobile;\r\n }\r\n }\r\n\r\n const privacyLinkConfig = useMemo(() => {\r\n if (disabled || isEditMode) {\r\n return { tag: 'span' };\r\n }\r\n\r\n return { tag: 'button', onClick: () => setShowPrivacyPolicyDialog(true) };\r\n }, [isEditMode, disabled]);\r\n\r\n return (\r\n \r\n );\r\n};\r\n\r\nUnStyledSmartFooterView.propTypes = {\r\n classes: PropTypes.shape({\r\n footerContainer: PropTypes.string.isRequired,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n id: PropTypes.string.isRequired,\r\n rootId: PropTypes.string.isRequired,\r\n disabled: PropTypes.bool.isRequired,\r\n hideFooterButton: PropTypes.bool,\r\n showPrivacyPolicy: PropTypes.bool,\r\n isEditMode: PropTypes.bool,\r\n isMobile: PropTypes.bool,\r\n businessName: PropTypes.string.isRequired,\r\n policyContent: PropTypes.string,\r\n};\r\n\r\nUnStyledSmartFooterView.defaultProps = {\r\n hideFooterButton: false,\r\n showPrivacyPolicy: false,\r\n isEditMode: false,\r\n isMobile: false,\r\n};\r\n\r\nUnStyledSmartFooterView.defaultProps = {\r\n policyContent: '',\r\n};\r\n\r\nexport const SmartFooterView = withErrorView(withDefaultStyles(\r\n UnStyledSmartFooterView,\r\n getStyles\r\n), 'componentMode');\r\n","import React, { useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { useIsSmartPagePrivacyPolicyEnabled, useSiteConfig, useClientContext } from '@bingads-webui-campaign-react/smart-page-context';\r\nimport { proxyReadPrivacyPolicyComponentConfig } from '@bingads-webui-campaign-react/smart-component-privacy-policy';\r\nimport { proxyReadBusinessName } from '@bingads-webui-campaign-react/smart-component-header';\r\n\r\nimport { SmartFooterView } from './smart-footer-view';\r\n\r\nexport const SmartFooterConnector = ({\r\n id,\r\n rootId,\r\n disabled,\r\n isMobileEditor,\r\n isEditMode,\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n const { siteConfig } = useSiteConfig();\r\n const { isMobile, isRuntime } = useClientContext();\r\n\r\n const isSmartPagePrivacyPolicyEnabled = useIsSmartPagePrivacyPolicyEnabled();\r\n const {\r\n policyContent,\r\n isPrivacyStatementReviewed,\r\n } = proxyReadPrivacyPolicyComponentConfig(siteConfig, i18n);\r\n const { businessName, defaultBusinessName } = proxyReadBusinessName(siteConfig, i18n);\r\n\r\n /**\r\n * Show privacy policy\r\n * 1. if pilot is on and not in runtime page\r\n * 2. if pilot is on and in runtime page but the policy has been reviewed\r\n * for #2, this could make sure old published page won't show the policy when pilot is on\r\n */\r\n const showPrivacyPolicy = isSmartPagePrivacyPolicyEnabled && (\r\n (isRuntime && isPrivacyStatementReviewed) || !isRuntime\r\n );\r\n\r\n return (\r\n \r\n {i18n.getString(_TL_('Privacy policy'))}\r\n
\r\n\r\n \r\n {text} }}\r\n template={i18n.getString(_TL_('Create a privacy statement describing how you\\'ll use your customers\\' data. This statement is legally required. We\\'ll provide you with a generic privacy statement that may apply in part to your business; however, it is {{bold}}your responsibility to ensure that the statement is fully accurate.{{/bold}}'))}\r\n />\r\n \r\n \r\n {i18n.getString(_TL_('Please note we\\'ll display Microsoft\\'s privacy policy alongside the one you create. This is because Microsoft processes your customers\\' data before sharing it with you.'))}\r\n \r\n
\r\n \r\n setShowEditDialog(true)}\r\n iconProps={{\r\n iconName: 'PageEdit',\r\n className: classes.button,\r\n }}\r\n text={i18n.getString(_TL_('Click here to edit your privacy policy'))}\r\n />\r\n {\r\n !isPrivacyStatementReviewed &&\r\n \r\n }\r\n
\r\n {\r\n showEditDialog &&\r\n \r\n
\r\n );\r\n};\r\n\r\nUnStyledSmartSocialLinksView.propTypes = {\r\n classes: PropTypes.shape({\r\n socialLinksContainer: PropTypes.string.isRequired,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n id: PropTypes.string,\r\n socialLinksConfigs: PropTypes.shape({}).isRequired,\r\n isEditMode: PropTypes.bool,\r\n};\r\n\r\nUnStyledSmartSocialLinksView.defaultProps = {\r\n id: undefined,\r\n isEditMode: false,\r\n};\r\n\r\nexport const SmartSocialLinksView = withErrorView(withDefaultStyles(\r\n UnStyledSmartSocialLinksView,\r\n getStyles\r\n), 'componentMode');\r\n","import React, { useContext, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { SiteConfigContext } from '@bingads-webui-campaign-react/smart-page-context';\r\nimport {\r\n getComponentById,\r\n} from '@bingads-webui-campaign-react/smart-component-util';\r\n\r\nimport { SmartSocialLinksView } from './smart-social-links-view';\r\nimport { getDataProperties } from './data-config';\r\n\r\nexport const SmartSocialLinksConnector = ({ id, isEditMode }) => {\r\n const { siteConfig } = useContext(SiteConfigContext);\r\n const i18n = useContext(I18nContext);\r\n const componentConfigs = getComponentById(siteConfig, id);\r\n const socialLinksConfigs = {};\r\n const dataProperties = getDataProperties(i18n);\r\n let showSocialLinks = false;\r\n\r\n Object.entries(dataProperties).forEach(([, socialLinkMapping]) => {\r\n socialLinksConfigs[socialLinkMapping.key] = componentConfigs[socialLinkMapping.key] ?\r\n componentConfigs[socialLinkMapping.key] : {};\r\n\r\n if (socialLinksConfigs[socialLinkMapping.key].isDisplay) {\r\n showSocialLinks = true;\r\n }\r\n });\r\n\r\n\r\n return useMemo(() => (\r\n showSocialLinks\r\n ? \r\n {socialLinks}\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nSmartSocialLinkEditor.defaultProps = {\r\n value: '',\r\n};\r\n\r\nSmartSocialLinkEditor.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n componentId: PropTypes.string.isRequired,\r\n socialLinkKey: PropTypes.string.isRequired,\r\n socialLinkLabel: PropTypes.string.isRequired,\r\n linkPlaceholder: PropTypes.string.isRequired,\r\n onValueChange: PropTypes.func.isRequired,\r\n onToggleChange: PropTypes.func.isRequired,\r\n enabled: PropTypes.bool.isRequired,\r\n value: PropTypes.string,\r\n};\r\n","import React, { useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { partial, debounce } from 'underscore';\r\nimport { SiteConfigContext } from '@bingads-webui-campaign-react/smart-page-context';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport {\r\n getComponentById,\r\n useDefaultEditorStyle,\r\n prependProtocolToUrl,\r\n} from '@bingads-webui-campaign-react/smart-component-util';\r\n\r\nimport { getDataProperties } from './data-config';\r\nimport { SmartSocialLinkEditor } from './components/smart-social-link-editor';\r\n\r\nconst getStyles = () => ({\r\n socialLinksContainer: {\r\n position: 'relative',\r\n },\r\n toggle: {\r\n position: 'absolute',\r\n right: 40,\r\n marginTop: 5,\r\n zIndex: 1,\r\n },\r\n});\r\n\r\nconst UnstyledSmartSocialLinksEditor = ({\r\n i18n,\r\n classes,\r\n componentId,\r\n}) => {\r\n const {\r\n titleClassName,\r\n descriptionClassName,\r\n editorContentClassName,\r\n } = useDefaultEditorStyle();\r\n\r\n const { siteConfig, dispatchSiteConfig } = useContext(SiteConfigContext);\r\n const componentConfig = getComponentById(siteConfig, componentId) || {};\r\n const defautLinkInfo = {\r\n isDisplay: false,\r\n value: '',\r\n };\r\n\r\n const onValueChange = debounce((property, { value }) => {\r\n const linkInfo = componentConfig[property] || defautLinkInfo;\r\n linkInfo.value = prependProtocolToUrl(value);\r\n const update = {\r\n ...componentConfig,\r\n [property]: linkInfo,\r\n };\r\n dispatchSiteConfig({\r\n type: 'UPDATE_COMPONENT_BY_ID',\r\n payload: update,\r\n });\r\n }, 200);\r\n\r\n const onToggleChange = debounce((property, e, checked) => {\r\n const linkInfo = componentConfig[property] || defautLinkInfo;\r\n linkInfo.isDisplay = checked;\r\n const update = {\r\n ...componentConfig,\r\n [property]: linkInfo,\r\n };\r\n\r\n dispatchSiteConfig({\r\n type: 'UPDATE_COMPONENT_BY_ID',\r\n payload: update,\r\n });\r\n }, 80);\r\n\r\n const dataProperties = getDataProperties(i18n);\r\n const linkEditors = [];\r\n\r\n Object.entries(dataProperties).forEach(([, socialLinkMapping]) => {\r\n linkEditors.push((\r\n \r\n
\r\n \r\n \r\n {text}\r\n
\r\n );\r\n }, [characterSoftLimit, classes.warningIcon, i18n, labelTexts.maximumCharacterErrorText]);\r\n\r\n const [messageError, setMessageError]\r\n = useState(cardMessage.length > characterSoftLimit ? generateCardMessageError(cardMessage.length) : '');\r\n\r\n const onTextAreaChange = useCallback(({\r\n limit,\r\n setText,\r\n setError,\r\n getErrorMsg,\r\n }) => ({ value: newValue }) => {\r\n if (newValue.length > limit) {\r\n setError(getErrorMsg(newValue.length));\r\n } else {\r\n setError('');\r\n }\r\n\r\n setText(newValue.trim() ? newValue : '');\r\n }, []);\r\n\r\n const isAddBtnDisabled = useCallback(\r\n () => {\r\n if ((supportImageInput && imageError)) {\r\n return true;\r\n }\r\n\r\n const hasTextInput = !isEmpty(cardMessage) && (!supportAuthorInput || !isEmpty(cardAuthor));\r\n const hasImageInput = !isEmpty(cardPhotoUrl);\r\n if (!hasTextInput && !hasImageInput) {\r\n return true;\r\n }\r\n\r\n return !isCreate &&\r\n currentCard.message === cardMessage.trim() &&\r\n currentCard.photo === cardPhotoUrl &&\r\n currentCard.author === cardAuthor.trim();\r\n },\r\n [\r\n isCreate,\r\n supportImageInput,\r\n supportAuthorInput,\r\n imageError,\r\n currentCard,\r\n cardMessage,\r\n cardPhotoUrl,\r\n cardAuthor,\r\n ]\r\n );\r\n\r\n const onImageSelectionChanged = useCallback((selectionList) => {\r\n if (isArray(selectionList) && !isEmpty(selectionList)) {\r\n const selection = selectionList[0];\r\n const url = getUploadUrlFromImage(selection) || selection.imageData;\r\n\r\n const { source } = getUploadDetailFromImage(selection);\r\n setSelectedImageType(source);\r\n\r\n setCardPhotoUrl(url);\r\n setImageError('');\r\n }\r\n }, []);\r\n\r\n const onPivotLinkClicked = useCallback((key) => {\r\n if (key === ImageOptionsKey.FACEBOOKIMPORT) {\r\n setShouldStartFetchFbPhotos(true);\r\n }\r\n }, []);\r\n\r\n const serializeTextInputValue = useCallback(val =>\r\n truncateStringEndWithEmoji(val, characterHardLimit), [characterHardLimit]);\r\n const serializeAuthorInputValue = useCallback(val =>\r\n truncateStringEndWithEmoji(val, authorCharacterLimit), [authorCharacterLimit]);\r\n\r\n const onDeleteImage = useCallback(() => {\r\n setCardPhotoUrl(undefined);\r\n setImageError('');\r\n }, []);\r\n\r\n return (\r\n \r\n
\r\n\r\n \r\n {supportImageInput && showImageEditor ?\r\n \r\n \r\n }\r\n
\r\n \r\n setShowImageEditor(false)}\r\n iconProps={{ iconName: 'Back' }}\r\n text={i18n.getString(_TL_('Back'))}\r\n />\r\n
:\r\n \r\n {isCreate ? labelTexts.creationTitleText : labelTexts.editTitleText}\r\n
\r\n {\r\n supportAuthorInput &&\r\n\r\n
\r\n }\r\n \r\n
\r\n {\r\n supportImageInput &&\r\n \r\n \r\n {\r\n cardPhotoUrl ?\r\n setShowImageEditor(true)}\r\n deleteOnly={false}\r\n /> :\r\n setShowImageEditor(true)}\r\n text={i18n.getString(_TL_('Add photo'))}\r\n />\r\n }\r\n
\r\n }\r\n \r\n
\r\n \r\n {imageError}\r\n
\r\n }\r\n \r\n {renderItemHeader && renderItemHeader(item.createdTime)}\r\n
\r\n );\r\n}\r\n\r\nUnStyledToolCell.propTypes = {\r\n classes: PropTypes.shape({\r\n cellContainer: PropTypes.string.isRequired,\r\n }).isRequired,\r\n item: PropTypes.shape({\r\n id: PropTypes.string.isRequired,\r\n }).isRequired,\r\n ItemComponent: PropTypes.func.isRequired,\r\n onDelete: PropTypes.func.isRequired,\r\n onEdit: PropTypes.func,\r\n index: PropTypes.number.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n renderItemHeader: PropTypes.func,\r\n className: PropTypes.string.isRequired,\r\n selectedPageIndex: PropTypes.number.isRequired,\r\n numberOfItemsPerPage: PropTypes.number.isRequired,\r\n deleteButtonAriaLabel: PropTypes.string,\r\n editButtonAriaLabel: PropTypes.string,\r\n editButtonLabel: PropTypes.string,\r\n editable: PropTypes.bool,\r\n};\r\n\r\nUnStyledToolCell.defaultProps = {\r\n renderItemHeader: null,\r\n deleteButtonAriaLabel: null,\r\n editButtonAriaLabel: null,\r\n onEdit: _.noop,\r\n editable: false,\r\n editButtonLabel: null,\r\n};\r\n\r\nexport const ToolCell = withDefaultStyles(\r\n UnStyledToolCell,\r\n getStyles\r\n);\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { SelectableItemView } from '@bingads-webui-campaign-react/smart-component-primitive';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nconst getStyles = () => ({\r\n unSelectedClassName: {\r\n borderColor: 'transparent',\r\n },\r\n itemContainer: {\r\n padding: '16px 12px 16px 21px',\r\n },\r\n});\r\n\r\nfunction UnStyledPickerCell({\r\n classes,\r\n className,\r\n defaultState,\r\n item,\r\n ItemComponent,\r\n updateSelectedState,\r\n i18n,\r\n selectable,\r\n}) {\r\n const onChange = () => {\r\n updateSelectedState({ id: item.id });\r\n };\r\n const onRenderItem = () => (\r\n \r\n
\r\n \r\n \r\n {\r\n editable &&\r\n onEdit((selectedPageIndex * numberOfItemsPerPage) + index)}\r\n className={classnames('smart-page-edit-cell-icon', classes.iconButton)}\r\n ariaLabel={editButtonAriaLabel || i18n.getString(_TL_('Edit'))}\r\n />\r\n }\r\n onDelete((selectedPageIndex * numberOfItemsPerPage) + index)}\r\n className={classnames('smart-page-delete-cell-icon', classes.iconButton)}\r\n ariaLabel={deleteButtonAriaLabel || i18n.getString(_TL_('Delete'))}\r\n />\r\n
\r\n \r\n
\r\n );\r\n\r\n return (\r\n \r\n \r\n {i18n.getString(noDataLabel)}\r\n \r\n
:\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nUnStyledItemPicker.propTypes = {\r\n classes: PropTypes.shape({\r\n listContainer: PropTypes.string.isRequired,\r\n }).isRequired,\r\n items: PropTypes.arrayOf(PropTypes.shape({\r\n id: PropTypes.string.isRequired,\r\n })).isRequired,\r\n ItemComponent: PropTypes.func.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n numberOfItemsPerPage: PropTypes.number,\r\n onDelete: PropTypes.func,\r\n onEdit: PropTypes.func,\r\n onSelectChange: PropTypes.func,\r\n selectable: PropTypes.bool,\r\n getDeleteButtonAriaLabel: PropTypes.func,\r\n editButtonLabel: PropTypes.string,\r\n getEditButtonAriaLabel: PropTypes.func,\r\n limit: PropTypes.number,\r\n selectedIds: PropTypes.shape({}),\r\n noDataLabel: PropTypes.string,\r\n // Overall edit function\r\n editable: PropTypes.bool,\r\n // Each item edit support check\r\n editableConditionCheck: PropTypes.func,\r\n};\r\n\r\nUnStyledItemPicker.defaultProps = {\r\n numberOfItemsPerPage: 2,\r\n onDelete: null,\r\n onEdit: null,\r\n onSelectChange: null,\r\n selectable: false,\r\n limit: Infinity,\r\n selectedIds: {},\r\n getDeleteButtonAriaLabel: noop,\r\n getEditButtonAriaLabel: noop,\r\n noDataLabel: _TL_('There are no data'),\r\n editable: false,\r\n editableConditionCheck: () => true,\r\n editButtonLabel: null,\r\n};\r\n\r\nexport const ItemPicker = withDefaultStyles(\r\n UnStyledItemPicker,\r\n getStyles\r\n);\r\n","import _ from 'underscore';\r\nimport React, { useState, useCallback, useEffect } from 'react';\r\nimport classnames from 'classnames';\r\nimport PropTypes from 'prop-types';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { Carousel } from 'react-responsive-carousel';\r\nimport { leftIcon, rightIcon, ResponsiveMode, THEME_MODE_KEY_MAPPING } from '@bingads-webui-campaign-react/smart-component-util';\r\nimport 'react-responsive-carousel/lib/styles/carousel.min.css';\r\n\r\nimport { CARD_DIALOG_MODE } from './constants';\r\n\r\nconst getStyles = (component, { palette = {} }) => ({\r\n page: {\r\n display: 'flex',\r\n justifyContent: 'center',\r\n },\r\n\r\n carouselContainer: {\r\n '& .carousel.carousel-slider': {\r\n overflow: 'unset',\r\n '& .slide': {\r\n background: palette.primaryBackground,\r\n textAlign: 'left',\r\n },\r\n '& .control-arrow': {\r\n width: 16,\r\n height: 16,\r\n lineHeight: 1,\r\n top: '50%',\r\n marginTop: -30,\r\n '&:before': {\r\n content: 'none',\r\n },\r\n '&:after': {\r\n content: '\"\"',\r\n width: 16,\r\n height: 16,\r\n backgroundSize: '16px 16px',\r\n marginTop: -5,\r\n marginLeft: -5,\r\n display: 'block',\r\n ...(palette.mode === THEME_MODE_KEY_MAPPING.Dark ? { filter: 'brightness(0) invert(1)' } : {}),\r\n },\r\n display: 'block',\r\n },\r\n '& .control-next': {\r\n opacity: 1,\r\n background: 'transparent',\r\n backgroundSize: '16px 16px',\r\n '&:hover, &:active': {\r\n backgroundColor: palette.secondaryBackground,\r\n },\r\n '&:focus': {\r\n outline: `1px solid ${palette.pageControl}`,\r\n },\r\n '&:after': {\r\n backgroundImage: `url(${rightIcon})`,\r\n },\r\n },\r\n '& .control-prev': {\r\n opacity: 1,\r\n background: 'transparent',\r\n backgroundSize: '16px 16px',\r\n '&:hover, &:active': {\r\n backgroundColor: palette.secondaryBackground,\r\n },\r\n '&:focus': {\r\n outline: `1px solid ${palette.pageControl}`,\r\n },\r\n '&:after': {\r\n backgroundImage: `url(${leftIcon})`,\r\n },\r\n },\r\n '& .control-arrow.control-disabled': {\r\n display: 'none',\r\n },\r\n '& .control-dots': {\r\n paddingLeft: 0,\r\n '& .dot': {\r\n background: 'transparent',\r\n border: `1px solid ${palette.pageControl}`,\r\n boxShadow: '0px 0px 0px',\r\n },\r\n '& .dot.selected': {\r\n background: palette.pageSelect,\r\n },\r\n },\r\n },\r\n },\r\n mobileContainer: {\r\n '& .carousel .control-dots .dot': {\r\n margin: '0 4px',\r\n },\r\n },\r\n});\r\n\r\nconst RESPONSIVE_MODE_TO_ITEMS_PER_PAGE = {\r\n [ResponsiveMode.LargeDesktop]: 3,\r\n [ResponsiveMode.MediumDesktop]: 2,\r\n [ResponsiveMode.SmallDesktop]: 1,\r\n [ResponsiveMode.Mobile]: 1,\r\n};\r\n\r\nconst mapCardsToPage = (items, startingIndex, itemsPerPage, CardComponent, i18n) => {\r\n const page = [];\r\n\r\n if (_.isEmpty(items)) {\r\n return page;\r\n }\r\n let currentIndex = startingIndex;\r\n\r\n while (currentIndex < items.length && currentIndex < startingIndex + itemsPerPage) {\r\n const item = items[currentIndex];\r\n page.push((\r\n \r\n
\r\n ));\r\n\r\n currentIndex += 1;\r\n }\r\n\r\n return page;\r\n};\r\n\r\nconst getNumberOfPages = (items, responsiveSize) => {\r\n const itemsPerPage = RESPONSIVE_MODE_TO_ITEMS_PER_PAGE[responsiveSize];\r\n\r\n return Math.ceil(items.length / itemsPerPage);\r\n};\r\n\r\nconst mapCards = (items, responsiveSize, classes, CardComponent, i18n) => {\r\n const itemsPerPage = RESPONSIVE_MODE_TO_ITEMS_PER_PAGE[responsiveSize];\r\n\r\n const carouselPages = [];\r\n if (_.isEmpty(items)) {\r\n return carouselPages;\r\n }\r\n const numPages = getNumberOfPages(items, responsiveSize);\r\n\r\n for (let index = 0; index < numPages; index += 1) {\r\n carouselPages.push((\r\n \r\n {mapCardsToPage(items, index * itemsPerPage, itemsPerPage, CardComponent, i18n)}\r\n
\r\n ));\r\n }\r\n\r\n return carouselPages;\r\n};\r\n\r\nexport const UnStyledItemCarousel = ({\r\n classes,\r\n items,\r\n responsiveSize,\r\n CardComponent,\r\n i18n,\r\n}) => {\r\n const [carouselCursor, setCarouselCursor] = useState(0);\r\n const updateCarouselCursor = useCallback((index) => {\r\n setCarouselCursor(index);\r\n }, []);\r\n const numPages = getNumberOfPages(items, responsiveSize);\r\n\r\n useEffect(() => {\r\n if (carouselCursor >= numPages) {\r\n setCarouselCursor(carouselCursor - 1);\r\n }\r\n }, [numPages, carouselCursor, setCarouselCursor]);\r\n\r\n // TODO: multi-channel need to update react-responsive-carousel to latest version (>=3.1.55)\r\n // to get following accessibility tweak.\r\n const ariaLabels = {\r\n leftArrow: i18n.getString(_TL_('Previous page')),\r\n rightArrow: i18n.getString(_TL_('Next page')),\r\n item: i18n.getString(_TL_('Page')),\r\n };\r\n\r\n return (\r\n \r\n {title}\r\n \r\n 
\r\n \r\n
\r\n );\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {\r\n showError && requestFailMessage\r\n }\r\n {\r\n showWarning && previewWarningMessage\r\n }\r\n
\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nUnstyledEmailForm.propTypes = {\r\n classes: PropTypes.shape({\r\n dialog: PropTypes.string,\r\n close: PropTypes.string,\r\n icon: PropTypes.string,\r\n group: PropTypes.string,\r\n submit: PropTypes.string,\r\n }).isRequired,\r\n title: PropTypes.string.isRequired,\r\n hideDialog: PropTypes.bool.isRequired,\r\n showError: PropTypes.bool.isRequired,\r\n serverError: PropTypes.string,\r\n showWarning: PropTypes.bool,\r\n requestSent: PropTypes.bool,\r\n onSubmit: PropTypes.func.isRequired,\r\n onCancel: PropTypes.func.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n};\r\n\r\nUnstyledEmailForm.defaultProps = {\r\n serverError: '',\r\n showWarning: false,\r\n requestSent: false,\r\n};\r\n\r\nexport const EmailForm = withDefaultStyles(\r\n UnstyledEmailForm,\r\n getStyles\r\n);\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { PrimaryButton } from '@fluentui/react/lib/Button';\r\nimport { Dialog, DialogType } from '@fluentui/react/lib/Dialog';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { useClientContext } from '@bingads-webui-campaign-react/smart-page-context';\r\n\r\nconst getStyles = () => ({\r\n content: {\r\n textAlign: 'center',\r\n },\r\n actionGroup: {\r\n textAlign: 'center',\r\n margin: '20px 30px 0px 30px',\r\n },\r\n confirm: {\r\n borderRadius: 100,\r\n height: 48,\r\n padding: '15px 34px 15px 34px',\r\n fontSize: 18,\r\n lineHeight: '22px',\r\n backgroundColor: 'black',\r\n border: '1px solid black',\r\n '&:hover': {\r\n backgroundColor: 'black',\r\n border: '1px solid black',\r\n },\r\n },\r\n});\r\n\r\nconst dialogStyles = {\r\n main: {\r\n maxWidth: 450,\r\n borderRadius: 5,\r\n },\r\n};\r\n\r\nconst dialogContentStyle = {\r\n title: {\r\n fontSize: 20,\r\n padding: 20,\r\n lineHeight: '24px',\r\n textAlign: 'center',\r\n },\r\n};\r\n\r\nconst mobileDialogContentStyle = {\r\n title: {\r\n fontSize: 18,\r\n padding: 20,\r\n lineHeight: '20px',\r\n textAlign: 'center',\r\n },\r\n};\r\n\r\nexport const UnstyledPromptDialog = ({\r\n classes,\r\n title,\r\n text,\r\n i18n,\r\n hideDialog,\r\n onCancel,\r\n}) => {\r\n const { isMobile } = useClientContext();\r\n\r\n const header = (\r\n \r\n {title || i18n.getString(_TL_('Your submission has been sent successfully.'))}\r\n
\r\n );\r\n\r\n return (\r\n \r\n {text || i18n.getString(_TL_('Thanks for reaching out! We\\'ll get back to you shortly.'))}\r\n
\r\n\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nUnstyledPromptDialog.propTypes = {\r\n classes: PropTypes.shape({\r\n dialog: PropTypes.string,\r\n content: PropTypes.string,\r\n confirm: PropTypes.string,\r\n }).isRequired,\r\n title: PropTypes.string,\r\n text: PropTypes.string,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n hideDialog: PropTypes.bool.isRequired,\r\n onCancel: PropTypes.func.isRequired,\r\n};\r\n\r\nUnstyledPromptDialog.defaultProps = {\r\n title: '',\r\n text: '',\r\n};\r\n\r\nexport const PromptDialog = withDefaultStyles(\r\n UnstyledPromptDialog,\r\n getStyles\r\n);\r\n","import _ from 'underscore';\r\nimport moment from 'moment-timezone';\r\nimport { timeToString } from '@bingads-webui-campaign-react/smart-component-util';\r\n\r\nconst DURATION = {\r\n Half: '30 minutes',\r\n Hour: '1 hour',\r\n};\r\n\r\n/**\r\n * Map duration to minute count\r\n * @param {string} duration Match to DURATION above\r\n * @returns {number} minute count\r\n */\r\nexport const getTimeInMinutes = (duration) => {\r\n if (duration === DURATION.Half) {\r\n return 30;\r\n }\r\n\r\n return 60;\r\n};\r\n\r\n/**\r\n * Map minute count to Duration option\r\n * @param {number} timeInMinutes minute count\r\n * @returns {Object} duration option config\r\n */\r\nexport const getDisplayedDuration = (timeInMinutes) => {\r\n if (timeInMinutes === 30) {\r\n return {\r\n key: DURATION.Half,\r\n text: DURATION.Half,\r\n };\r\n }\r\n\r\n return {\r\n key: DURATION.Hour,\r\n text: DURATION.Hour,\r\n };\r\n};\r\n\r\n/**\r\n * Truncate the time to match a specific rule.\r\n * For example, if the time is 13:34, and the rule is start-time must be :30 or :00,\r\n * then next available time is 14:00. By contrast, the last available time is 13:30.\r\n * @param {Object} time Format like {hour: 13, minute: 0}\r\n * @param {number} timePiece The available time length, usually is 15, 30 or 60\r\n * @param {boolean} findNext Whether to find the next one or the last one\r\n * @returns {Object} Next or last available time.\r\n */\r\nexport const truncateTime = (time, timePiece, findNext) => {\r\n const { hour, minute } = time;\r\n\r\n let newHour = hour;\r\n let newMinute = minute;\r\n\r\n if (findNext) {\r\n newMinute = Math.ceil(minute / timePiece) * timePiece;\r\n if (newMinute === 60) {\r\n newHour = (newHour + 1) % 24;\r\n newMinute = 0;\r\n }\r\n } else {\r\n newMinute = Math.floor(minute / timePiece) * timePiece;\r\n }\r\n\r\n return {\r\n hour: newHour,\r\n minute: newMinute,\r\n };\r\n};\r\n\r\n/**\r\n * Find the index in Day State Array\r\n * @param {Object} time {hour, minute}\r\n * @param {number} partsInHour Based on timePiece, how many parts can be divided for an hour\r\n * @returns {number} Index in the Day State Array\r\n */\r\nexport const mapTimeToStateIndex = (time, partsInHour) => {\r\n const { hour, minute } = time;\r\n const timePiece = 60 / partsInHour;\r\n\r\n return (hour * partsInHour) + Math.floor((minute / timePiece));\r\n};\r\n\r\n\r\n/**\r\n * Apply the availability on the week state array.\r\n * [Week state array]: we split one week into several pieces based on the timePiece, each piece\r\n * is either true or false according to whether this piece of time is in Availability.\r\n * For example, if the time piece is 1 hour, then the length of Week State Array would be 24 * 7,\r\n * and its structure is [false, false, true, ...], the third item in array refers to the\r\n * time slot 2:00 - 3:00\r\n * @param {Array} availability AppointmentHours in a week\r\n * @param {number} timePiece Duration like 30 minutes or 60 minutes\r\n * @returns {Array} State Array with each item is set true or false\r\n * based on if this timeslot is in availability.\r\n */\r\nexport const applyAvailabilityOnWeekStates = (availability, timePiece) => {\r\n const partsInHours = 60 / timePiece;\r\n // All value are false, meaning each time slot is not available at the beginning\r\n const states = Array.from(Array(7 * 24 * partsInHours), () => false);\r\n\r\n availability.forEach((day, index) => {\r\n const { timeSlots, isOpenAllDay } = day;\r\n const baseIndex = index * partsInHours * 24;\r\n\r\n if (isOpenAllDay) {\r\n const startIndex = baseIndex;\r\n const endIndex = baseIndex + ((partsInHours * 24) - 1);\r\n\r\n for (let i = startIndex; i <= endIndex; i += 1) {\r\n states[i] = true;\r\n }\r\n } else {\r\n timeSlots.forEach((timeSlot) => {\r\n const nextTime = truncateTime(\r\n { hour: timeSlot.openHour, minute: timeSlot.openMinute },\r\n timePiece,\r\n true\r\n );\r\n const lastTime = truncateTime(\r\n { hour: timeSlot.closeHour, minute: timeSlot.closeMinute },\r\n timePiece,\r\n false\r\n );\r\n\r\n const startIndex = mapTimeToStateIndex(\r\n { hour: nextTime.hour, minute: nextTime.minute },\r\n partsInHours\r\n ) + baseIndex;\r\n const endIndex = (mapTimeToStateIndex(\r\n { hour: lastTime.hour, minute: lastTime.minute },\r\n partsInHours\r\n ) - 1) + baseIndex;\r\n\r\n for (let i = startIndex; i <= endIndex; i += 1) {\r\n states[i] = true;\r\n }\r\n });\r\n }\r\n });\r\n\r\n return states;\r\n};\r\n\r\n/**\r\n * Transform a consecutive sections in the week state array into the timeslot\r\n * [startIndex, endIndex]: startIndex and endIndex are included\r\n * @param {Object} timeIndexes { startIndex, endIndex }\r\n * @param {number} timePiece 30 mins or 60 mins\r\n * @returns {Object} timeslot\r\n */\r\nexport const transformTimeIndexToTimeslot = (timeIndexes, timePiece) => {\r\n const { startIndex, endIndex } = timeIndexes || {};\r\n const partsInHours = 60 / timePiece;\r\n\r\n const openHour = (Math.floor(startIndex / partsInHours)) % 24;\r\n const openMinute = (startIndex % partsInHours) * timePiece;\r\n\r\n let closeHour = (Math.floor((endIndex + 1) / partsInHours)) % 24;\r\n let closeMinute = ((endIndex + 1) % partsInHours) * timePiece;\r\n\r\n // To not get the all day wrongly map to 0:00 to 0:00,\r\n // we should handle this scenario\r\n if (endIndex !== 0 && closeHour === 0 && closeMinute === 0) {\r\n closeHour = 23;\r\n closeMinute = 59;\r\n }\r\n\r\n return {\r\n openHour,\r\n openMinute,\r\n closeHour,\r\n closeMinute,\r\n };\r\n};\r\n\r\n/**\r\n * Extract timeslots in a Week State Array\r\n * @param {Array} weekStates Week state array\r\n * @returns {Array} Availability\r\n */\r\nexport const extractTimeSlots = (weekStates) => {\r\n const availability = [];\r\n\r\n const dayLength = weekStates.length / 7;\r\n const timePiece = 60 / (dayLength / 24);\r\n const weekDayIndexes = Array.from(Array(7), (item, index) => {\r\n const dayStartIndex = index * dayLength;\r\n const dayEndIndex = (dayStartIndex + dayLength) - 1;\r\n\r\n return { dayStartIndex, dayEndIndex };\r\n });\r\n\r\n for (let dayIndex = 0; dayIndex < weekDayIndexes.length; dayIndex += 1) {\r\n const { dayStartIndex, dayEndIndex } = weekDayIndexes[dayIndex];\r\n\r\n let isFindingSequence = false;\r\n let startIndex = dayStartIndex;\r\n let endIndex = dayStartIndex;\r\n const dayResult = [];\r\n\r\n for (let i = dayStartIndex; i <= dayEndIndex; i += 1) {\r\n const currentState = weekStates[i];\r\n\r\n if (!isFindingSequence && currentState) {\r\n isFindingSequence = true;\r\n startIndex = i;\r\n endIndex = i;\r\n } else if (isFindingSequence && currentState) {\r\n endIndex = i;\r\n\r\n if (i === dayEndIndex) {\r\n const timeSlot = transformTimeIndexToTimeslot(\r\n { startIndex: startIndex % dayLength, endIndex: endIndex % dayLength },\r\n timePiece\r\n );\r\n dayResult.push(timeSlot);\r\n }\r\n } else if (isFindingSequence && !currentState) {\r\n isFindingSequence = false;\r\n const timeSlot = transformTimeIndexToTimeslot(\r\n { startIndex: startIndex % dayLength, endIndex: endIndex % dayLength },\r\n timePiece\r\n );\r\n dayResult.push(timeSlot);\r\n }\r\n }\r\n\r\n availability.push({\r\n day: dayIndex,\r\n timeSlots: dayResult,\r\n });\r\n }\r\n\r\n return availability;\r\n};\r\n\r\n/**\r\n * Transform week state between different time zone\r\n * @param {Array} weekStates Week State Array\r\n * @param {number} timePiece Length of each basic timeslot\r\n * @param {number} sourceTimeOffset Source timezone offset(minutes)\r\n * @param {number} targetTimeOffset Target timezone offset(minutes)\r\n * @returns {Array} Week state array in target timezone\r\n */\r\nexport const transformWeekStatesInTimezones = (\r\n weekStates,\r\n timePiece,\r\n sourceTimeOffset,\r\n targetTimeOffset\r\n) => {\r\n const timeOffset = (targetTimeOffset - sourceTimeOffset) / 60;\r\n const stateOffset = timeOffset * (60 / timePiece);\r\n\r\n if (timeOffset === 0) {\r\n return weekStates;\r\n }\r\n\r\n let targetWeekStates = weekStates;\r\n const rightSide = weekStates.slice(-stateOffset);\r\n const leftSide = weekStates.slice(0, -stateOffset);\r\n targetWeekStates = [...rightSide, ...leftSide];\r\n\r\n return targetWeekStates;\r\n};\r\n\r\n/**\r\n * Transform availability between different timezones\r\n * @param {Array} availability Appointment hours in one week\r\n * @param {number} timePiece 30 mins or 60 mins\r\n * @param {number} sourceTimeOffset source time offset in minute\r\n * @param {number} targetTimeOffset target time offset in minute\r\n * @returns {Array} Availability in target timezone\r\n */\r\nexport const transformAvailabilityInTimezones = (\r\n availability,\r\n timePiece,\r\n sourceTimeOffset,\r\n targetTimeOffset\r\n) => {\r\n const sourceAvailabilityStates = applyAvailabilityOnWeekStates(availability, timePiece);\r\n const targetWeekStates = transformWeekStatesInTimezones(\r\n sourceAvailabilityStates,\r\n timePiece,\r\n sourceTimeOffset,\r\n targetTimeOffset\r\n );\r\n\r\n return extractTimeSlots(targetWeekStates);\r\n};\r\n\r\n/**\r\n * Map timeString to JS object\r\n * @param {Object} TimeParams Time related info\r\n * @returns {Object} JS object which is easy to get hour and minute\r\n */\r\nexport const mapTimeStringToTimeObject = ({ timeString, duration } = {}) => {\r\n const time = moment.parseZone(timeString);\r\n const openHour = time.hour();\r\n const openMinute = time.minute();\r\n\r\n time.add({ minutes: duration });\r\n\r\n const closeHour = time.hour();\r\n const closeMinute = time.minute();\r\n\r\n return {\r\n openHour,\r\n openMinute,\r\n closeHour,\r\n closeMinute,\r\n };\r\n};\r\n\r\n/**\r\n * Get existing bookings in a specific day.\r\n * Note: Remember to keep existing bookings and date are in the same time zone,\r\n * just ignore the timezone carried in the date object, only care the year/month/day info\r\n * inside the Date object.\r\n * @param {Array} existingBookings Existing bookings stored with time string and duration\r\n * @param {Date} date Specific day.\r\n * @returns {Array} Existing bookings in that day.\r\n */\r\nexport const getExistingBookingsOfDay = (existingBookings, date) => {\r\n const time = moment(date);\r\n const year = time.year();\r\n const month = time.month();\r\n const day = time.date();\r\n\r\n return _.filter(existingBookings, (booking) => {\r\n // Keep the time zone info into account when parse.\r\n // booking.time has been transformed to targetTimezoneOffset format in line530\r\n const timeWithTimezone = moment.parseZone(booking.time);\r\n const bookingYear = timeWithTimezone.year();\r\n const bookingMonth = timeWithTimezone.month();\r\n const bookingDay = timeWithTimezone.date();\r\n\r\n return bookingYear === year && bookingMonth === month && bookingDay === day;\r\n });\r\n};\r\n\r\n/**\r\n * Get weekday and return the position in Availability based on date\r\n * @param {Date} date Current date\r\n * @returns {number} Position index of today in Availability\r\n */\r\nexport const getWeekdayIndex = (date) => {\r\n const weekday = moment(date).day();\r\n // moment.js regard \"Sunday\" as 0, \"Monday\" as 1, while in business hours structure\r\n // \"Monday\" is located in index 0, \"Sunday\" is located in index 6.\r\n return (weekday + 6) % 7;\r\n};\r\n\r\n/**\r\n * Mark certain timeslots in Day state array as false(not available).\r\n * @param {Array} dayStates Day state array\r\n * @param {Array} existingBookings today's existing bookings\r\n * @returns {Array} New Day state array\r\n */\r\nexport const markExistingBookingsInDayStates = (dayStates, existingBookings) => {\r\n const newDayStates = [...dayStates];\r\n const partsInHour = dayStates.length / 24;\r\n const timePiece = 60 / partsInHour;\r\n\r\n existingBookings.forEach((booking) => {\r\n const timeObj = mapTimeStringToTimeObject({\r\n timeString: booking.time,\r\n duration: Number(booking.timeInMinutes),\r\n });\r\n\r\n const {\r\n hour: openHour,\r\n minute: openMinute,\r\n } = truncateTime({ hour: timeObj.openHour, minute: timeObj.openMinute }, timePiece, false);\r\n let {\r\n hour: closeHour,\r\n minute: closeMinute,\r\n } = truncateTime({ hour: timeObj.closeHour, minute: timeObj.closeMinute }, timePiece, true);\r\n\r\n // Handle the scenario that end time is 24:00\r\n if (closeHour === 0 && closeMinute === 0 && !(openHour === 0 && openMinute === 0)) {\r\n closeHour = 24;\r\n closeMinute = 0;\r\n }\r\n\r\n const startIndex = mapTimeToStateIndex({ hour: openHour, minute: openMinute }, partsInHour);\r\n const endIndex = mapTimeToStateIndex({ hour: closeHour, minute: closeMinute }, partsInHour);\r\n\r\n for (let i = startIndex; i < endIndex; i += 1) {\r\n newDayStates[i] = false;\r\n }\r\n });\r\n\r\n return newDayStates;\r\n};\r\n\r\n/**\r\n * Get available timeslots in a specific day\r\n * @param {Array} availability AppointmentHours in a week.\r\n * @param {Array} existingBookings Exsiting bookings.\r\n * @param {string} timePiece 30(30 minutes) or 60(1hour)\r\n * @param {Date} date A specific day\r\n * @param {number} sourceTimeOffset Source time offset in minute\r\n * @param {number} targetTimeOffset Target time offset in minute\r\n *\r\n * @returns {Array} Available timeslots in that day\r\n */\r\nexport const getAvailableBookingTimeslots = (\r\n availability,\r\n existingBookings,\r\n timePiece,\r\n date,\r\n sourceTimeOffset,\r\n targetTimeOffset\r\n) => {\r\n const piecesInDay = (60 / timePiece) * 24;\r\n\r\n // Get current week states\r\n let weekStates = applyAvailabilityOnWeekStates(availability, timePiece);\r\n weekStates = transformWeekStatesInTimezones(\r\n weekStates,\r\n timePiece,\r\n sourceTimeOffset,\r\n targetTimeOffset\r\n );\r\n\r\n // Filter out state of today\r\n const weekDayIndex = getWeekdayIndex(date);\r\n const baseIndex = piecesInDay * weekDayIndex;\r\n let dayStates = weekStates.slice(baseIndex, baseIndex + piecesInDay);\r\n\r\n // Mark existingBookings in Day state array\r\n const existingBookingsToday = getExistingBookingsOfDay(existingBookings, date);\r\n dayStates = markExistingBookingsInDayStates(dayStates, existingBookingsToday);\r\n\r\n const availableBookingTimeslots = [];\r\n dayStates.forEach((state, index) => {\r\n if (state) {\r\n const timeSlot = transformTimeIndexToTimeslot(\r\n { startIndex: index, endIndex: index },\r\n timePiece\r\n );\r\n availableBookingTimeslots.push(timeSlot);\r\n }\r\n });\r\n\r\n return availableBookingTimeslots;\r\n};\r\n\r\n/**\r\n * Create a time string based on date and startTime\r\n * @param {Date} date Date object\r\n * @param {string} startTime time string like \"2:30 PM\"\r\n * @param {number} timezoneOffset time zone offset\r\n * @returns {String} A time string like '2022-06-10T16:59:31+08:00'\r\n */\r\nexport const getTimeString = (date, startTime, timezoneOffset) => {\r\n // Keep mind that the date object is not in our desired timezone, it's in\r\n // browser local timezone, we have to use timezoneOffset parameter to adjust it\r\n const timeObj = moment(date).toObject();\r\n\r\n const timeIn24Hour = moment(startTime, 'h:mm A').format('HH:mm');\r\n const timeArray = timeIn24Hour.split(':');\r\n\r\n const parsedTime = moment({\r\n ...timeObj,\r\n hours: timeArray[0],\r\n minutes: timeArray[1],\r\n seconds: 0,\r\n milliseconds: 0,\r\n });\r\n const offset = moment(date).utcOffset() - timezoneOffset;\r\n\r\n return parsedTime.add(offset, 'm').format();\r\n};\r\n\r\n/**\r\n * Parse a time string and get related Date object and corresponding startTime\r\n * @param {string} timeString Time string\r\n * @param {number} timezoneOffset time zone offset in minutes\r\n * @returns {Object} date + startTime\r\n */\r\nexport const getTimeInfo = (timeString, timezoneOffset) => {\r\n // A time string in designated \"timezoneOffset\" format.\r\n const time = moment(timeString).utcOffset(timezoneOffset);\r\n const parsedDate = moment({\r\n year: time.year(),\r\n date: time.date(),\r\n month: time.month(),\r\n }).toDate();\r\n\r\n return {\r\n date: parsedDate,\r\n startTime: time.format('h:mm A'),\r\n };\r\n};\r\n\r\n/**\r\n * Get available time options in a specific day\r\n * @param {Array} availability AppointmentHours in a week.\r\n * @param {Array} existingBookings Exsiting bookings.\r\n * @param {string} duration 30min or 1hour\r\n * @param {Date} date A specific day\r\n * @param {number} sourceTimeOffset Source time offset in minute\r\n * @param {number} targetTimeOffset Target time offset in minute\r\n * @param {boolean} ignorePastTime Whether filter out past time\r\n *\r\n * @returns {Array} Available time options in that day\r\n */\r\nexport const getTimeOptions = (\r\n availability,\r\n existingBookings,\r\n duration,\r\n date,\r\n sourceTimeOffset,\r\n targetTimeOffset,\r\n ignorePastTime = true\r\n) => {\r\n // Make sure all the existing bookings are in target timeoffset format,\r\n // this will facilitate the later comparison in other functions\r\n const newExistingBookings = existingBookings.map(booking => ({\r\n ...booking,\r\n time: moment(booking.time).utcOffset(targetTimeOffset).format(),\r\n }));\r\n\r\n const availableBookingTimeslots = getAvailableBookingTimeslots(\r\n availability,\r\n newExistingBookings,\r\n getTimeInMinutes(duration),\r\n date,\r\n sourceTimeOffset,\r\n targetTimeOffset\r\n );\r\n\r\n const currentTime = moment();\r\n\r\n return _.reduce(\r\n availableBookingTimeslots,\r\n (memo, current) => {\r\n const comparedTime = moment(date);\r\n comparedTime.hour(current.openHour);\r\n comparedTime.minute(current.openMinute);\r\n // Notes: The \"date\" object is in local time zone, not in the user pre-defined time zone.\r\n // like the comparedTime become 2022-08-02T12:00:00+08:00, but what we want to get is\r\n // 2022-08-02T12:00:00-07:00(in pre-defined timezone), so we have to adjust it.\r\n comparedTime.add(moment().utcOffset() - targetTimeOffset, 'm');\r\n\r\n if (ignorePastTime && comparedTime.isBefore(currentTime)) {\r\n return memo;\r\n }\r\n\r\n const timeString = timeToString({ hour: current.openHour, minute: current.openMinute });\r\n const timeOption = { key: timeString, text: timeString };\r\n memo.push(timeOption);\r\n\r\n return memo;\r\n },\r\n []\r\n );\r\n};\r\n","/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport React from 'react';\r\nimport moment from 'moment-timezone';\r\nimport { Link } from '@fluentui/react';\r\n\r\nimport { getDisplayedDuration } from './get-available-timeslots';\r\n\r\nexport const messageMaxCount = 200;\r\n\r\nexport const getDurationOptions = i18n => ([\r\n { key: '30 minutes', text: i18n.getString(_TL_('30 minutes')) },\r\n { key: '1 hour', text: i18n.getString(_TL_('1 hour')) },\r\n]);\r\n\r\nexport const getColumns = ({\r\n i18n,\r\n classes,\r\n currentTime,\r\n timeZoneOffset,\r\n onEditAppointment = () => {},\r\n onCancelAppointment = () => {},\r\n}) => ([\r\n {\r\n key: 'time',\r\n name: i18n.getString(_TL_('Appointment time')),\r\n minWidth: 150,\r\n maxWidth: 150,\r\n fieldName: 'time',\r\n className: classes.columnCell,\r\n headerClassName: classes.topBottomBorder,\r\n onRender: (item) => {\r\n // Time should be shown in owner pre-defined time zone\r\n const bookingTime = moment(item.time).utcOffset(timeZoneOffset);\r\n const formattedTime = bookingTime.format('MM/DD/YYYY h:mm A');\r\n // Existing bookings that past current time won't be able to edit.\r\n const isDisabled = bookingTime.isBefore(currentTime);\r\n return (\r\n \r\n
\r\n );\r\n },\r\n },\r\n {\r\n key: 'duration',\r\n name: i18n.getString(_TL_('Duration')),\r\n fieldName: 'timeInMinutes',\r\n minWidth: 80,\r\n maxWidth: 80,\r\n className: classes.columnCell,\r\n headerClassName: classes.topBottomBorder,\r\n onRender: item => (\r\n {getDisplayedDuration(item.timeInMinutes).text}\r\n ),\r\n },\r\n {\r\n key: 'customerName',\r\n name: i18n.getString(_TL_('Customer name')),\r\n fieldName: 'name',\r\n minWidth: 120,\r\n maxWidth: 120,\r\n className: classes.columnCell,\r\n headerClassName: classes.topBottomBorder,\r\n },\r\n {\r\n key: 'phoneNumber',\r\n name: i18n.getString(_TL_('Phone number')),\r\n fieldName: 'phoneNumber',\r\n minWidth: 100,\r\n maxWidth: 100,\r\n className: classes.columnCell,\r\n headerClassName: classes.topBottomBorder,\r\n },\r\n {\r\n key: 'email',\r\n name: i18n.getString(_TL_('Email')),\r\n fieldName: 'emailAddress',\r\n minWidth: 120,\r\n className: classes.columnCell,\r\n headerClassName: classes.topBottomBorder,\r\n onRender: item => (\r\n \r\n {item.emailAddress}\r\n \r\n ),\r\n },\r\n {\r\n key: 'notes',\r\n name: i18n.getString(_TL_('Notes')),\r\n fieldName: 'message',\r\n minWidth: 160,\r\n maxWidth: 160,\r\n className: classes.columnCell,\r\n headerClassName: classes.topBottomBorder,\r\n },\r\n {\r\n key: 'cancel',\r\n name: '',\r\n className: classes.columnCell,\r\n headerClassName: classes.topBottomBorder,\r\n onRender: (item) => {\r\n const bookingTime = moment(item.time);\r\n // Existing bookings that past current time won't be able to cancel.\r\n const isDisabled = bookingTime.isBefore(currentTime);\r\n return (\r\n {formattedTime}
\r\n onEditAppointment(item)} underline disabled={isDisabled}>\r\n {i18n.getString(_TL_('Edit appointment'))}\r\n \r\n \r\n onCancelAppointment(item)} disabled={isDisabled}>\r\n {i18n.getString(_TL_('Cancel appointment'))}\r\n \r\n
\r\n );\r\n },\r\n },\r\n]);\r\n","import React, { useMemo } from 'react';\r\nimport _ from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { Modal, IconButton, PrimaryButton, Spinner } from '@fluentui/react';\r\n\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nconst getStyles = () => ({\r\n bookingContainer: {\r\n minHeight: '100%',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n position: 'relative',\r\n },\r\n header: {\r\n position: 'relative',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n\r\n '& button:hover': {\r\n color: 'black',\r\n },\r\n },\r\n title: {\r\n height: 84,\r\n lineHeight: '84px',\r\n fontSize: 24,\r\n fontWeight: 600,\r\n marginTop: 0,\r\n marginBottom: 0,\r\n },\r\n cancelIcon: {\r\n position: 'absolute',\r\n top: 8,\r\n right: 8,\r\n zIndex: 1,\r\n },\r\n footer: {\r\n height: 100,\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n flexShrink: 0,\r\n },\r\n content: {\r\n flex: 1,\r\n display: 'flex',\r\n justifyContent: 'center',\r\n },\r\n footerBtn: {\r\n borderRadius: 100,\r\n height: 48,\r\n padding: '15px 34px 15px 34px',\r\n fontSize: 20,\r\n lineHeight: '24px',\r\n backgroundColor: 'black',\r\n border: '1px solid black',\r\n '&:hover': {\r\n backgroundColor: 'black',\r\n border: '1px solid black',\r\n },\r\n '&[disabled]': {\r\n backgroundColor: 'lightgray',\r\n border: '1px solid lightgray',\r\n color: 'darkgray',\r\n },\r\n },\r\n loadingMask: {\r\n width: '100%',\r\n height: '100%',\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n position: 'absolute',\r\n background: 'gray',\r\n zIndex: 2,\r\n opacity: '0.4',\r\n },\r\n});\r\n\r\nconst modalDefaultStyle = {\r\n main: {\r\n width: '1052px',\r\n height: '720px',\r\n },\r\n scrollableContent: {\r\n maxHeight: 'unset',\r\n height: '100%',\r\n },\r\n};\r\n\r\nconst iconButtonStyles = {\r\n root: {\r\n marginLeft: 'auto',\r\n marginTop: '4px',\r\n marginRight: '2px',\r\n color: 'black',\r\n },\r\n};\r\n\r\nconst cancelIcon = { iconName: 'Cancel' };\r\n\r\nexport const UnStyledSmartBookingModal = ({\r\n children,\r\n i18n,\r\n classes,\r\n className,\r\n isOpen,\r\n title,\r\n isLoading,\r\n actionButtonLabel,\r\n onCloseModal,\r\n onClickFooterButton,\r\n modalStyle,\r\n hideFooter,\r\n hideHeader,\r\n onRenderHeader,\r\n}) => {\r\n const mergedStyles = useMemo(() => ({\r\n main: [modalDefaultStyle.main, modalStyle.main],\r\n scrollableContent: [modalDefaultStyle.scrollableContent, modalStyle.scrollableContent],\r\n ..._.omit(modalStyle, 'main', 'scrollableContent'),\r\n }), [modalStyle]);\r\n\r\n const header = useMemo(() => {\r\n if (hideHeader) {\r\n return null;\r\n }\r\n\r\n if (_.isFunction(onRenderHeader)) {\r\n return onRenderHeader();\r\n }\r\n\r\n return {title}
;\r\n }, [classes, hideHeader, onRenderHeader, title]);\r\n\r\n return (\r\n\r\n {\r\n isLoading && (\r\n
\r\n \r\n );\r\n};\r\n\r\nUnStyledSmartBookingModal.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n classes: PropTypes.shape({\r\n header: PropTypes.string.isRequired,\r\n footer: PropTypes.string.isRequired,\r\n content: PropTypes.string.isRequired,\r\n }).isRequired,\r\n className: PropTypes.string,\r\n isLoading: PropTypes.bool,\r\n isOpen: PropTypes.bool.isRequired,\r\n title: PropTypes.string,\r\n actionButtonLabel: PropTypes.string,\r\n onCloseModal: PropTypes.func.isRequired,\r\n onClickFooterButton: PropTypes.func,\r\n children: PropTypes.node.isRequired,\r\n modalStyle: PropTypes.shape({\r\n main: PropTypes.shape({\r\n width: PropTypes.string,\r\n height: PropTypes.string,\r\n }),\r\n }),\r\n hideFooter: PropTypes.bool,\r\n hideHeader: PropTypes.bool,\r\n onRenderHeader: PropTypes.func,\r\n};\r\n\r\nUnStyledSmartBookingModal.defaultProps = {\r\n modalStyle: {},\r\n className: '',\r\n title: '',\r\n actionButtonLabel: '',\r\n isLoading: false,\r\n hideFooter: false,\r\n hideHeader: false,\r\n onClickFooterButton: _.noop(),\r\n onRenderHeader: null,\r\n};\r\n\r\nexport const SmartBookingModal = withDefaultStyles(\r\n UnStyledSmartBookingModal,\r\n getStyles\r\n);\r\n","import React, { useEffect, useRef } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport moment from 'moment-timezone';\r\n\r\nimport { Calendar, Dropdown, Spinner } from '@fluentui/react';\r\nimport { Icon } from '@fluentui/react/lib/Icon';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { RadioButton as Availability } from '@bingads-webui-campaign-react/smart-component-primitive';\r\n\r\nconst getStyles = () => ({\r\n duration: {\r\n marginBottom: 30,\r\n },\r\n timePicker: ({ isMobile } = {}) => ({\r\n display: 'flex',\r\n ...(\r\n isMobile\r\n ? {\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n }\r\n : {}\r\n ),\r\n '& .card th': {\r\n textAlign: 'center',\r\n },\r\n\r\n '& .indicator': {\r\n display: 'flex',\r\n alignItems: 'center',\r\n height: 30,\r\n marginBottom: 8,\r\n fontWeight: 600,\r\n\r\n '& i': {\r\n fontWeight: 600,\r\n },\r\n\r\n '& span': {\r\n marginLeft: 5,\r\n marginTop: '-2px',\r\n },\r\n },\r\n\r\n '& .time-list': {\r\n minHeight: 200,\r\n minWidth: 200,\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n },\r\n }),\r\n availability: ({ isMobile } = {}) => ({\r\n marginLeft: 25,\r\n marginTop: isMobile ? 13 : 0,\r\n }),\r\n error: {\r\n color: 'red',\r\n position: 'absolute',\r\n bottom: 0,\r\n },\r\n mobileTimelist: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n justifyContent: 'center',\r\n },\r\n timeHint: {\r\n fontStyle: 'italic',\r\n fontSize: 12,\r\n },\r\n});\r\n\r\nconst calenderStyle = {\r\n root: {\r\n boxShadow: '0 3px 10px -5px grey',\r\n },\r\n};\r\n\r\nconst availabilityLabelId = 'availability-label';\r\n\r\nconst UnstyledBookingStepTime = ({\r\n classes,\r\n className,\r\n i18n,\r\n isLoading,\r\n availability,\r\n durationOptions,\r\n selectedDuration,\r\n onSelectDuration,\r\n selectedDate,\r\n onSelectDate,\r\n selectedTime,\r\n onSelectTime,\r\n errorMessage,\r\n isMobile,\r\n timezoneOffset,\r\n isInPreview,\r\n focus,\r\n}) => {\r\n const dropdownRef = useRef();\r\n\r\n useEffect(() => {\r\n if (dropdownRef.current && focus) {\r\n // Focus on the first control\r\n dropdownRef.current.focus();\r\n }\r\n }, [focus]);\r\n\r\n return (\r\n \r\n
\r\n )\r\n }\r\n \r\n { header }\r\n
\r\n \r\n {children}\r\n
\r\n {\r\n !hideFooter && (\r\n \r\n
\r\n )\r\n }\r\n \r\n
\r\n );\r\n};\r\n\r\nUnstyledBookingStepTime.propTypes = {\r\n classes: PropTypes.shape({}).isRequired,\r\n className: PropTypes.string,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n isLoading: PropTypes.bool,\r\n availability: PropTypes.arrayOf(PropTypes.shape({\r\n key: PropTypes.string,\r\n text: PropTypes.string,\r\n })).isRequired,\r\n durationOptions: PropTypes.arrayOf(PropTypes.shape({\r\n key: PropTypes.string,\r\n text: PropTypes.string,\r\n })).isRequired,\r\n selectedDuration: PropTypes.shape({\r\n key: PropTypes.string,\r\n text: PropTypes.string,\r\n }).isRequired,\r\n onSelectDuration: PropTypes.func.isRequired,\r\n selectedDate: PropTypes.shape({}).isRequired,\r\n onSelectDate: PropTypes.func.isRequired,\r\n selectedTime: PropTypes.shape({\r\n key: PropTypes.string,\r\n text: PropTypes.string,\r\n }).isRequired,\r\n onSelectTime: PropTypes.func.isRequired,\r\n errorMessage: PropTypes.oneOfType([\r\n PropTypes.string,\r\n PropTypes.shape({}),\r\n ]),\r\n isMobile: PropTypes.bool,\r\n timezoneOffset: PropTypes.number,\r\n isInPreview: PropTypes.bool,\r\n focus: PropTypes.bool,\r\n};\r\n\r\nUnstyledBookingStepTime.defaultProps = {\r\n className: '',\r\n errorMessage: null,\r\n isLoading: false,\r\n isMobile: false,\r\n timezoneOffset: moment().utcOffset(),\r\n isInPreview: false,\r\n focus: false,\r\n};\r\n\r\nexport const BookingStepTime = React.memo(withDefaultStyles(\r\n UnstyledBookingStepTime,\r\n getStyles\r\n));\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\n\r\nimport { DefaultButton, TextField, MessageBar, MessageBarType } from '@fluentui/react';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nconst getStyles = () => ({\r\n stepTwo: ({ isMobile } = {}) => ({\r\n padding: isMobile ? '0 23px' : '0 72px',\r\n\r\n '& .preview-warning-message': {\r\n marginTop: 8,\r\n },\r\n }),\r\n bold: {\r\n fontWeight: 600,\r\n },\r\n form: {\r\n marginTop: 20,\r\n\r\n '& .ms-TextField-fieldGroup': {\r\n border: '1px solid #B3B0AD',\r\n },\r\n\r\n '& .name': {\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n\r\n '& .ms-TextField': {\r\n width: 202,\r\n },\r\n },\r\n },\r\n item: {\r\n minHeight: 80,\r\n },\r\n error: {\r\n color: 'red',\r\n },\r\n});\r\n\r\nconst editButtonStyle = {\r\n root: {\r\n minWidth: 60,\r\n marginLeft: 20,\r\n height: 26,\r\n },\r\n};\r\n\r\nconst textAreaStyle = {\r\n fieldGroup: {\r\n height: 134,\r\n },\r\n};\r\n\r\nconst UnstyledBookingStepUserInfo = ({\r\n classes,\r\n className,\r\n i18n,\r\n bookingTimeInfo,\r\n onEditTime,\r\n name,\r\n onChangeName,\r\n email,\r\n onChangeEmail,\r\n phoneNumber,\r\n onChangePhoneNumber,\r\n extraMessage,\r\n errorMessage,\r\n onChangeExtraMessage,\r\n showWarning,\r\n}) => (\r\n \r\n { dropdownRef.current = input; }}\r\n label={i18n.getString(_TL_('Appointment duration'))}\r\n options={durationOptions}\r\n selectedKey={selectedDuration.key}\r\n onChange={onSelectDuration}\r\n />\r\n
\r\n {\r\n isInPreview && (\r\n \r\n *{i18n.getString(_TL_('Your appointment availability will automatically show to users in their local time'))}\r\n
\r\n )\r\n }\r\n \r\n
\r\n {\r\n errorMessage && (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {\r\n isLoading\r\n ?
\r\n \r\n *{errorMessage}\r\n
\r\n )\r\n }\r\n \r\n
\r\n);\r\n\r\nUnstyledBookingStepUserInfo.propTypes = {\r\n classes: PropTypes.shape({}).isRequired,\r\n className: PropTypes.string,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n bookingTimeInfo: PropTypes.string.isRequired,\r\n onEditTime: PropTypes.func.isRequired,\r\n name: PropTypes.shape({\r\n firstName: PropTypes.string,\r\n lastName: PropTypes.string,\r\n }).isRequired,\r\n onChangeName: PropTypes.func.isRequired,\r\n email: PropTypes.shape({\r\n value: PropTypes.string,\r\n error: PropTypes.string,\r\n }).isRequired,\r\n onChangeEmail: PropTypes.func.isRequired,\r\n phoneNumber: PropTypes.shape({\r\n value: PropTypes.string,\r\n error: PropTypes.string,\r\n }).isRequired,\r\n onChangePhoneNumber: PropTypes.func.isRequired,\r\n extraMessage: PropTypes.shape({\r\n value: PropTypes.string,\r\n error: PropTypes.string,\r\n }).isRequired,\r\n onChangeExtraMessage: PropTypes.func.isRequired,\r\n errorMessage: PropTypes.string,\r\n showWarning: PropTypes.bool,\r\n};\r\n\r\nUnstyledBookingStepUserInfo.defaultProps = {\r\n className: '',\r\n errorMessage: '',\r\n showWarning: false,\r\n};\r\n\r\nexport const BookingStepUserInfo = withDefaultStyles(\r\n UnstyledBookingStepUserInfo,\r\n getStyles\r\n);\r\n","import React, { useState, useCallback, useMemo, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport moment from 'moment-timezone';\r\nimport _ from 'underscore';\r\n\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { useBookingService } from '@bingads-webui-campaign-react/smart-page-data-service';\r\nimport {\r\n validateEmailAddress,\r\n validatePhone,\r\n sendAnalyticsData,\r\n sendLeadsTrackingData,\r\n} from '@bingads-webui-campaign-react/smart-component-util';\r\nimport { useCurrentLocale } from '@bingads-webui-campaign-react/smart-page-context';\r\nimport { validateText } from '@bingads-webui-campaign-react/smart-component-text';\r\n\r\nimport { getDurationOptions, messageMaxCount } from '../utils/booking-config';\r\nimport {\r\n getTimeOptions,\r\n getTimeInMinutes,\r\n getTimeString,\r\n} from '../utils/get-available-timeslots';\r\nimport { SmartBookingModal } from './booking-modal-base';\r\nimport { BookingStepTime } from './booking-step-time';\r\nimport { BookingStepUserInfo } from './booking-step-user-info';\r\n\r\nconst nameMaxLen = 50;\r\n\r\nconst getStyles = () => ({\r\n container: {\r\n width: '100%',\r\n position: 'relative',\r\n },\r\n step: {\r\n width: '100%',\r\n padding: '20px 70px',\r\n },\r\n stepMobile: {\r\n padding: '20px 28px',\r\n },\r\n});\r\n\r\nconst customModalStyle = {\r\n main: {\r\n width: '590px',\r\n height: '680px',\r\n },\r\n};\r\n\r\nconst getMobileModalStyle = isRuntime => ({\r\n main: {\r\n width: isRuntime ? '90vw' : '360px',\r\n },\r\n});\r\n\r\nconst STEP_CONFIG = {\r\n ONE: {\r\n key: 'ONE',\r\n buttonText: _TL_('Appointment details'),\r\n validator: ({ time }, i18n) => {\r\n if (!time) {\r\n return i18n.getString(_TL_('Please select specific time'));\r\n }\r\n\r\n return null;\r\n },\r\n },\r\n TWO: {\r\n key: 'TWO',\r\n buttonText: _TL_('Submit'),\r\n validator: ({\r\n email, phoneNumber, extraMessage, name,\r\n }, i18n) => {\r\n const emailError = validateEmailAddress(email) ? '' : i18n.getString(_TL_('Invalid email address.'));\r\n const phoneError = validatePhone(phoneNumber) ? '' : i18n.getString(_TL_('Invalid phone number.'));\r\n const firstNameError = validateText(name.firstName, nameMaxLen, i18n).errorMessage;\r\n const lastNameError = validateText(name.lastName, nameMaxLen, i18n).errorMessage;\r\n const extraMessageError = validateText(extraMessage, messageMaxCount, i18n).errorMessage;\r\n\r\n if (!emailError && !phoneError && !extraMessageError && !firstNameError && !lastNameError) {\r\n return null;\r\n }\r\n\r\n return {\r\n email: emailError,\r\n phoneNumber: phoneError,\r\n extraMessage: extraMessageError,\r\n name: { firstName: firstNameError, lastName: lastNameError },\r\n };\r\n },\r\n },\r\n};\r\nconst dateOptions = {\r\n year: 'numeric',\r\n month: 'long',\r\n day: 'numeric',\r\n};\r\n\r\nconst UstyledBookingSteps = ({\r\n classes,\r\n i18n,\r\n isOpen,\r\n bookingProps,\r\n onClose,\r\n logger,\r\n isRuntime,\r\n isMobile,\r\n userLocale,\r\n}) => {\r\n const {\r\n smartPageId,\r\n availableBookingHours,\r\n email: customerEmail,\r\n landingLink,\r\n businessName,\r\n customerTimeZoneOffset,\r\n } = bookingProps;\r\n const durationOptions = useMemo(() => getDurationOptions(i18n), [i18n]);\r\n\r\n const {\r\n // create\r\n createBooking,\r\n isCreatingBooking,\r\n // get\r\n isGetExistingBookings,\r\n existingBookings,\r\n getExistingBooking,\r\n } = useBookingService({ logger });\r\n const locale = useCurrentLocale();\r\n\r\n const [currentStep, setCurrentStep] = useState(STEP_CONFIG.ONE);\r\n // Step one:\r\n const [duration, setDuration] = useState(durationOptions[0]);\r\n const [selectedDate, setSelectedDate] = useState(new Date());\r\n const [selectedTime, setSelectedTime] = useState({});\r\n const [stepOneError, setStepOneError] = useState(null);\r\n const [availability, setAvailability] = useState([]);\r\n // Step two:\r\n const [name, setName] = useState({ firstName: '', lastName: '', error: { firstName: '', lastName: '' } });\r\n const [email, setEmail] = useState({ value: '', error: '' });\r\n const [phoneNumber, setPhoneNumber] = useState({ value: '', error: '' });\r\n const [extraMessage, setExtraMessage] = useState({ value: '', error: '' });\r\n const [stepTwoError, setStepTwoError] = useState('');\r\n const [showWarning, setShowWarning] = useState(false);\r\n const [autoFocus, setAutoFocus] = useState(false);\r\n\r\n const formattedBookingInfo = `${selectedDate.toLocaleDateString(locale, dateOptions)}, ${duration.text}, ${selectedTime.text}`;\r\n\r\n const onSelectDate = useCallback((date) => {\r\n setSelectedDate(date);\r\n // Clear the selected time\r\n setSelectedTime({});\r\n }, []);\r\n\r\n const onSelectDuration = useCallback((e, item) => {\r\n setDuration(item);\r\n // Clear the selected time\r\n setSelectedTime({});\r\n }, []);\r\n\r\n const onSelectTime = useCallback((time) => {\r\n setSelectedTime(time);\r\n setStepOneError(null);\r\n }, []);\r\n\r\n const onChangeName = useCallback((e, newValue, key) => {\r\n setName(prev => ({\r\n ...prev,\r\n [key]: newValue,\r\n error: {\r\n ...prev.error,\r\n [key]: validateText(newValue, nameMaxLen, i18n).errorMessage,\r\n },\r\n }));\r\n }, [i18n]);\r\n\r\n const onChangeEmail = useCallback((e, newValue) => {\r\n setEmail({\r\n value: newValue,\r\n error: validateEmailAddress(newValue)\r\n ? ''\r\n : i18n.getString(_TL_('Invalid email address.')),\r\n });\r\n }, [i18n]);\r\n\r\n const onChangePhoneNumber = useCallback((e, newValue) => {\r\n setPhoneNumber({\r\n value: newValue,\r\n error: validatePhone(newValue)\r\n ? ''\r\n : i18n.getString(_TL_('Invalid phone number.')),\r\n });\r\n }, [i18n]);\r\n\r\n const onChangeExtraMessage = useCallback((e, newValue) => {\r\n setExtraMessage({\r\n value: newValue,\r\n error: validateText(newValue, messageMaxCount, i18n).errorMessage,\r\n });\r\n }, [i18n]);\r\n\r\n const onClickFooterBtn = () => {\r\n if (currentStep.key === STEP_CONFIG.ONE.key) {\r\n const errors = currentStep.validator({ time: selectedTime.text }, i18n);\r\n setStepOneError(errors);\r\n\r\n if (!errors) {\r\n setCurrentStep(STEP_CONFIG.TWO);\r\n }\r\n } else {\r\n const errors = currentStep.validator({\r\n email: email.value,\r\n phoneNumber: phoneNumber.value,\r\n extraMessage: extraMessage.value,\r\n name: { firstName: name.firstName, lastName: name.lastName },\r\n }, i18n);\r\n\r\n if (!errors) {\r\n if (!isRuntime) {\r\n setShowWarning(true);\r\n return;\r\n }\r\n\r\n // Trigger only in Runtime\r\n sendAnalyticsData('BookAppointment');\r\n sendLeadsTrackingData();\r\n\r\n // Create booking\r\n const timeString = getTimeString(\r\n selectedDate,\r\n selectedTime.key,\r\n moment().utcOffset()\r\n );\r\n\r\n createBooking({\r\n smartPageId,\r\n customerEmailAddress: customerEmail,\r\n manageAppointmentLink: landingLink,\r\n bookingDetails: {\r\n Name: `${name.firstName} ${name.lastName}`,\r\n PhoneNumber: phoneNumber.value,\r\n EmailAddress: email.value,\r\n Service: '',\r\n Time: timeString,\r\n TimeInMinutes: getTimeInMinutes(duration.key),\r\n Message: extraMessage.value,\r\n UserTimeZoneOffset: moment().utcOffset(),\r\n },\r\n businessName,\r\n customerTimeZoneOffset,\r\n userLocale,\r\n }).then(() => {\r\n logger.logTrace(`CTA|submitBooking|${window.location.hostname}|BookAppointment`);\r\n\r\n onClose({}, true);\r\n }).catch((error) => {\r\n setStepTwoError(error);\r\n });\r\n } else {\r\n setEmail(prev => ({ ...prev, error: errors.email }));\r\n setPhoneNumber(prev => ({ ...prev, error: errors.phoneNumber }));\r\n setExtraMessage(prev => ({ ...prev, error: errors.extraMessage }));\r\n setName(prev => ({ ...prev, error: errors.name }));\r\n }\r\n }\r\n };\r\n\r\n const onBackToStepOne = useCallback(() => {\r\n setStepTwoError('');\r\n setCurrentStep(STEP_CONFIG.ONE);\r\n setShowWarning(false);\r\n setAutoFocus(true);\r\n }, []);\r\n\r\n useEffect(() => {\r\n // Always fetch data when isOpen is true, as user might book one and want to book another again,\r\n // we have to make sure the specific timeslot is occupied.\r\n // Only fetch data in Runtime\r\n if (isOpen && isRuntime) {\r\n getExistingBooking({ smartPageId });\r\n }\r\n }, [getExistingBooking, isOpen, smartPageId, isRuntime]);\r\n\r\n // Recalculate the availability when duration, date or existingBookings change.\r\n useEffect(() => {\r\n if (isOpen) {\r\n const userTimeZoneOffset = moment().utcOffset();\r\n const availableStartTime = getTimeOptions(\r\n availableBookingHours,\r\n existingBookings,\r\n duration.key,\r\n selectedDate,\r\n customerTimeZoneOffset,\r\n userTimeZoneOffset\r\n );\r\n\r\n setAvailability(availableStartTime);\r\n }\r\n }, [\r\n availableBookingHours, duration.key, existingBookings,\r\n selectedDate, isOpen, customerTimeZoneOffset,\r\n ]);\r\n\r\n return (\r\n \r\n
\r\n {i18n.getString(_TL_('Date and time'))}
\r\n \r\n {bookingTimeInfo}\r\n
\r\n \r\n \r\n \r\n {i18n.getString(_TL_('Booking functionality is not supported in Preview mode. Please publish your website and try again.'))}\r\n \r\n \r\n )\r\n }\r\n
\r\n \r\n onChangeName(e, val, 'firstName')}\r\n errorMessage={name.error.firstName}\r\n />\r\n onChangeName(e, val, 'lastName')}\r\n errorMessage={name.error.lastName}\r\n />\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {\r\n errorMessage && (\r\n \r\n *{i18n.getString(errorMessage)}\r\n
\r\n )\r\n }\r\n {\r\n showWarning && (\r\n \r\n {\r\n currentStep.key === STEP_CONFIG.ONE.key\r\n ? (\r\n
\r\n \r\n );\r\n};\r\n\r\nUstyledBookingSteps.propTypes = {\r\n classes: PropTypes.shape({\r\n container: PropTypes.string.isRequired,\r\n step: PropTypes.string.isRequired,\r\n stepMobile: PropTypes.string.isRequired,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n isOpen: PropTypes.bool.isRequired,\r\n bookingProps: PropTypes.shape({\r\n smartPageId: PropTypes.string,\r\n availableBookingHours: PropTypes.arrayOf(PropTypes.shape({\r\n day: PropTypes.string,\r\n isOpenAllDay: PropTypes.bool,\r\n timeSlots: PropTypes.arrayOf(PropTypes.shape({})),\r\n isValid: PropTypes.bool,\r\n })),\r\n email: PropTypes.string,\r\n landingLink: PropTypes.string,\r\n businessName: PropTypes.string,\r\n customerTimeZoneOffset: PropTypes.number,\r\n }).isRequired,\r\n onClose: PropTypes.func.isRequired,\r\n logger: PropTypes.shape({\r\n logError: PropTypes.func,\r\n logTrace: PropTypes.func,\r\n }),\r\n isRuntime: PropTypes.bool,\r\n isMobile: PropTypes.bool,\r\n userLocale: PropTypes.string.isRequired,\r\n};\r\n\r\nUstyledBookingSteps.defaultProps = {\r\n logger: {\r\n logError: _.noop,\r\n logTrace: _.noop,\r\n },\r\n isRuntime: true,\r\n isMobile: false,\r\n};\r\n\r\nexport const BookingSteps = React.memo(withDefaultStyles(\r\n UstyledBookingSteps,\r\n getStyles\r\n));\r\n","/* eslint-disable no-param-reassign */\r\nimport { mapObject, chain, isArray, isEmpty, noop } from 'underscore';\r\nimport { cloneDeep } from '@bingads-webui-universal/primitive-utilities';\r\nimport {\r\n DATA_SOURCE_KEY_MAPPING,\r\n mailIcon,\r\n mapPinIcon,\r\n phoneIcon,\r\n validateEmailAddress,\r\n validatePhone,\r\n isValidUrl,\r\n} from '@bingads-webui-campaign-react/smart-component-util';\r\n\r\nexport const DATA_SOURCE_NAME = 'data-source-name';\r\n\r\nexport const BOOKING_OPERATIONS = {\r\n availability: 'availability',\r\n appointment: 'appointment',\r\n};\r\n\r\nconst ERRORS = {\r\n EMPTY: _TL_('Required field is empty.'),\r\n INVALID_PHONE: _TL_('Invalid phone number.'),\r\n INVALID_EMAIL: _TL_('Invalid email address.'),\r\n INVALID_URL: _TL_('Invalid URL.'),\r\n};\r\n\r\nconst ActionTypes = {\r\n CallNow: {\r\n text: _TL_('Call now'),\r\n uriPrefix: 'tel:',\r\n dataSourceName: DATA_SOURCE_KEY_MAPPING.PhoneNumber,\r\n editorLabel: _TL_('Phone number'),\r\n icon: phoneIcon,\r\n iconText: _TL_('Call'),\r\n enable: true,\r\n validator: (value, i18n) => (\r\n !validatePhone(value.dataSourceValue)\r\n ? i18n.getString(ERRORS.INVALID_PHONE)\r\n : null\r\n ),\r\n },\r\n SendMail: {\r\n text: _TL_('Send email'),\r\n uriPrefix: 'mailto:',\r\n dataSourceName: DATA_SOURCE_KEY_MAPPING.Emails,\r\n readProcessor: value => (isArray(value) ? value[0] : value),\r\n writeProcessor: value => [value],\r\n editorLabel: _TL_('Email address'),\r\n icon: mailIcon,\r\n enable: true,\r\n validator: (value, i18n) => (\r\n !validateEmailAddress(value.dataSourceValue)\r\n ? i18n.getString(ERRORS.INVALID_EMAIL)\r\n : null\r\n ),\r\n },\r\n GetDirections: {\r\n text: _TL_('Get Directions'),\r\n uriPrefix: 'https://maps.bing.com/?q=',\r\n dataSourceName: DATA_SOURCE_KEY_MAPPING.LocationInfo,\r\n editorLabel: _TL_('Address'),\r\n icon: mapPinIcon,\r\n iconText: _TL_('Directions'),\r\n validator: (value, i18n) => {\r\n if (isEmpty(value.dataSourceValue)) {\r\n return i18n.getString(ERRORS.EMPTY);\r\n }\r\n\r\n return null;\r\n },\r\n },\r\n GetQuote: {\r\n text: _TL_('Get quote'),\r\n isFormLink: true,\r\n dataSourceName: DATA_SOURCE_KEY_MAPPING.Emails,\r\n readProcessor: value => (isArray(value) ? value[0] : value),\r\n writeProcessor: value => [value],\r\n editorLabel: _TL_('Email address'),\r\n enable: true,\r\n validator: (value, i18n) => (\r\n !validateEmailAddress(value.dataSourceValue)\r\n ? i18n.getString(ERRORS.INVALID_EMAIL)\r\n : null\r\n ),\r\n },\r\n ContactUs: {\r\n text: _TL_('Contact us'),\r\n isFormLink: true,\r\n dataSourceName: DATA_SOURCE_KEY_MAPPING.Emails,\r\n readProcessor: value => (isArray(value) ? value[0] : value),\r\n writeProcessor: value => [value],\r\n editorLabel: _TL_('Email address'),\r\n enable: true,\r\n validator: (value, i18n) => (\r\n !validateEmailAddress(value.dataSourceValue)\r\n ? i18n.getString(ERRORS.INVALID_EMAIL)\r\n : null\r\n ),\r\n },\r\n BookAppointment: {\r\n text: _TL_('Book appointment'),\r\n isLinkEditable: true,\r\n enable: true,\r\n dataSourceName: DATA_SOURCE_KEY_MAPPING.Emails,\r\n readProcessor: value => (isArray(value) ? value[0] : value),\r\n writeProcessor: value => [value],\r\n editorLabel: _TL_('Email address'),\r\n operations: [\r\n {\r\n key: BOOKING_OPERATIONS.availability,\r\n linkText: _TL_('When can customers book appointments with you?'),\r\n title: _TL_('Manage appointment availability'),\r\n action: _TL_('Submit'),\r\n }, {\r\n key: BOOKING_OPERATIONS.appointment,\r\n linkText: _TL_('Manage existing appointments'),\r\n title: _TL_('Your appointments'),\r\n action: _TL_('Edit'),\r\n },\r\n ],\r\n validator: (value, i18n, pilots) => {\r\n if (!pilots.isSmartPageBookAppointmentEnabled || value.isExternalLink) {\r\n return !isValidUrl(value.linkUrl) ? i18n.getString(ERRORS.INVALID_URL) : null;\r\n }\r\n\r\n return (\r\n !validateEmailAddress(value.dataSourceValue)\r\n ? i18n.getString(ERRORS.INVALID_EMAIL)\r\n : null\r\n );\r\n },\r\n },\r\n ShopNow: {\r\n text: _TL_('Shop now'),\r\n isLinkEditable: true,\r\n validator: noop,\r\n },\r\n SignUp: {\r\n text: _TL_('Sign up'),\r\n isLinkEditable: true,\r\n validator: noop,\r\n },\r\n OrderFood: {\r\n text: _TL_('Order food'),\r\n isLinkEditable: true,\r\n validator: noop,\r\n },\r\n PurchaseGiftCard: {\r\n text: _TL_('Purchase gift card'),\r\n isLinkEditable: true,\r\n validator: noop,\r\n },\r\n CustomLink: {\r\n text: _TL_('Create your own'),\r\n isTextEditable: true,\r\n isLinkEditable: true,\r\n enable: true,\r\n validator: (value, i18n) => {\r\n if (!isValidUrl(value.linkUrl)) {\r\n return i18n.getString(ERRORS.INVALID_URL);\r\n } else if (isEmpty(value.linkText)) {\r\n return i18n.getString(ERRORS.EMPTY);\r\n }\r\n\r\n return null;\r\n },\r\n },\r\n};\r\n\r\nexport const SmartActionButtonTypes = mapObject(ActionTypes, (val, key) => ({\r\n ...val,\r\n name: key,\r\n}));\r\n\r\n// These actions would show email address\r\nexport const EMAIL_ACTION_TYPES = [\r\n SmartActionButtonTypes.SendMail.name,\r\n SmartActionButtonTypes.GetQuote.name,\r\n SmartActionButtonTypes.ContactUs.name,\r\n SmartActionButtonTypes.BookAppointment.name,\r\n];\r\n\r\n// Will mutate the original object\r\nexport const applyBookAppointmentDefaultConfig = (config, pilots) => {\r\n config.actionType = SmartActionButtonTypes.BookAppointment.name;\r\n delete config.linkText;\r\n\r\n if (pilots.isSmartPageBookAppointmentEnabled) {\r\n config[DATA_SOURCE_NAME] = DATA_SOURCE_KEY_MAPPING.Emails;\r\n // Tell difference between external link and internal booking services\r\n // Default to use internal booking services.\r\n config.isExternalLink = false;\r\n } else {\r\n delete config[DATA_SOURCE_NAME];\r\n }\r\n\r\n config.linkUrl = '';\r\n};\r\n\r\n/**\r\n * Update CTA(Call to action) component config by action type\r\n * @param {String} actionType Action Type\r\n * @param {Object} componentConfig Call to action component config\r\n * @param {Object} i18n i18n\r\n * @param {Object} pilots pilots\r\n * @returns {Object} A new component config object.\r\n */\r\nexport const getUpdatedComponentConfigByType = (actionType, componentConfig = {}, i18n, pilots) => {\r\n const newComponentConfig = cloneDeep(componentConfig);\r\n newComponentConfig.actionType = actionType;\r\n\r\n switch (actionType) {\r\n case 'CallNow':\r\n newComponentConfig[DATA_SOURCE_NAME] = DATA_SOURCE_KEY_MAPPING.PhoneNumber;\r\n delete newComponentConfig.linkText;\r\n delete newComponentConfig.linkUrl;\r\n break;\r\n case 'GetDirections':\r\n newComponentConfig[DATA_SOURCE_NAME] = DATA_SOURCE_KEY_MAPPING.LocationInfo;\r\n delete newComponentConfig.linkText;\r\n delete newComponentConfig.linkUrl;\r\n break;\r\n case 'SendMail':\r\n case 'GetQuote':\r\n case 'ContactUs':\r\n newComponentConfig[DATA_SOURCE_NAME] = DATA_SOURCE_KEY_MAPPING.Emails;\r\n delete newComponentConfig.linkText;\r\n delete newComponentConfig.linkUrl;\r\n break;\r\n case 'ShopNow':\r\n case 'SignUp':\r\n case 'OrderFood':\r\n case 'PurchaseGiftCard':\r\n delete newComponentConfig[DATA_SOURCE_NAME];\r\n delete newComponentConfig.linkText;\r\n newComponentConfig.linkUrl = '';\r\n break;\r\n case 'BookAppointment':\r\n applyBookAppointmentDefaultConfig(newComponentConfig, pilots);\r\n break;\r\n case 'CustomLink':\r\n delete newComponentConfig[DATA_SOURCE_NAME];\r\n newComponentConfig.linkUrl = '';\r\n newComponentConfig.linkText = i18n.getString(ActionTypes.CustomLink.text);\r\n break;\r\n default:\r\n newComponentConfig.actionType = SmartActionButtonTypes.GetQuote.name;\r\n newComponentConfig[DATA_SOURCE_NAME] = DATA_SOURCE_KEY_MAPPING.Emails;\r\n delete newComponentConfig.linkText;\r\n delete newComponentConfig.linkUrl;\r\n }\r\n\r\n return newComponentConfig;\r\n};\r\n\r\n/**\r\n * Get available action types.\r\n * @param {Object} i18n i18n\r\n * @returns {Array} Available action types\r\n */\r\nexport const getActionOptions = i18n => (chain(SmartActionButtonTypes)\r\n .pairs()\r\n .map(item => (item[1].enable && {\r\n key: item[0],\r\n text: i18n.getString(item[1].text),\r\n }))\r\n .compact()\r\n .value()\r\n);\r\n","import React, { useCallback, useMemo, useState, useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport _ from 'underscore';\r\n\r\nimport { Link } from '@fluentui/react/lib/Link';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport {\r\n useClientContext,\r\n InstrumentationServiceContext,\r\n} from '@bingads-webui-campaign-react/smart-page-context';\r\nimport { sendAnalyticsData, sendLeadsTrackingData, THEME_MODE_KEY_MAPPING } from '@bingads-webui-campaign-react/smart-component-util';\r\n\r\nimport { EmailForm } from './components/email-form';\r\nimport { PromptDialog } from './components/prompt-dialog';\r\nimport { BookingSteps } from './components/booking-steps';\r\nimport { SmartActionButtonTypes } from './utils/smart-action-types';\r\n\r\nconst getStyles = (components, { palette = {} }) => ({\r\n actionButton: {\r\n ...components.primaryButton,\r\n textAlign: 'center',\r\n textDecoration: 'none',\r\n display: 'block',\r\n margin: '0 auto',\r\n width: 'fit-content',\r\n maxWidth: 200,\r\n whiteSpace: 'nowrap',\r\n textOverflow: 'ellipsis',\r\n overflow: 'hidden',\r\n },\r\n iconButton: {\r\n ...components.section,\r\n textAlign: 'center',\r\n '& a': {\r\n height: 'fit-content',\r\n width: 'fit-content',\r\n display: 'inline-block',\r\n '&:focus': {\r\n outline: `1px solid ${palette.outline}`,\r\n },\r\n '&:hover': {\r\n backgroundColor: palette.secondaryBackground,\r\n },\r\n },\r\n },\r\n icon: {\r\n width: 32,\r\n height: 32,\r\n display: 'block',\r\n marginLeft: 'auto',\r\n marginRight: 'auto',\r\n marginTop: 12,\r\n ...(palette.mode === THEME_MODE_KEY_MAPPING.Dark ? { filter: 'brightness(0) invert(1)' } : {}),\r\n },\r\n iconText: {\r\n color: palette.secondaryText,\r\n textDecoration: 'underline',\r\n display: 'block',\r\n fontSize: 16,\r\n lineHeight: '24px',\r\n },\r\n});\r\n\r\nconst UnStyledSmartActionButtonView = ({\r\n actionType,\r\n text,\r\n target,\r\n id,\r\n isFormLink,\r\n mailService,\r\n i18n,\r\n classes,\r\n className,\r\n useIconButton,\r\n icon,\r\n disabled,\r\n isEditMode,\r\n bookingProps,\r\n userLocale,\r\n pilots,\r\n}) => {\r\n const [hideDialog, setHideDialog] = useState(true);\r\n const [hidePromptDialog, setHidePromptDialog] = useState(true);\r\n const [showError, setShowError] = useState(false);\r\n const [showBookingModal, setShowBookingModal] = useState(false);\r\n const [requestSent, setRequestSent] = useState(false);\r\n\r\n const { isRuntime, isMobile } = useClientContext();\r\n const logger = useContext(InstrumentationServiceContext);\r\n\r\n const host = window.location.hostname;\r\n const showWarning = !isRuntime;\r\n\r\n const onClickActionButton = useCallback(() => {\r\n if (isFormLink && hideDialog) {\r\n // open dialog, not track\r\n setHideDialog(false);\r\n } else if (\r\n actionType === SmartActionButtonTypes.BookAppointment.name\r\n && pilots.isSmartPageBookAppointmentEnabled && !bookingProps.isExternalLink\r\n ) {\r\n setShowBookingModal(true);\r\n } else if (isRuntime) {\r\n // only trigger when smart page in runtime\r\n sendAnalyticsData(actionType);\r\n sendLeadsTrackingData();\r\n }\r\n\r\n if (isRuntime) {\r\n logger.logTrace(`CTA|openDialog|${host}|${actionType}`);\r\n }\r\n }, [\r\n isFormLink, hideDialog, actionType, pilots,\r\n isRuntime, logger, host, bookingProps,\r\n ]);\r\n\r\n const onSubmitForm = useCallback(({\r\n name,\r\n phone,\r\n mail,\r\n message,\r\n }) => {\r\n setRequestSent(true);\r\n mailService.sendMail({\r\n mailType: actionType,\r\n userName: name,\r\n userMail: mail,\r\n userPhone: phone,\r\n message,\r\n userLocale,\r\n }).then(() => {\r\n setHideDialog(true);\r\n setHidePromptDialog(false);\r\n }).catch((res) => {\r\n setShowError(true);\r\n logger.logError('Send email failed', res);\r\n }).finally(() => {\r\n setRequestSent(false);\r\n });\r\n // only trigger when smart page in runtime\r\n if (isRuntime) {\r\n sendAnalyticsData(actionType);\r\n sendLeadsTrackingData();\r\n logger.logTrace(`CTA|submitForm|${host}|${actionType}`);\r\n }\r\n }, [actionType, host, isRuntime, logger, mailService, userLocale]);\r\n\r\n const onCancelForm = useCallback(() => {\r\n setHideDialog(true);\r\n }, []);\r\n\r\n const onClosePromptDialog = useCallback(() => {\r\n setHidePromptDialog(true);\r\n }, []);\r\n\r\n const onCloseBookingModal = useCallback((e, isComplete) => {\r\n setShowBookingModal(false);\r\n\r\n if (isComplete) {\r\n setHidePromptDialog(false);\r\n }\r\n }, []);\r\n\r\n const IconContainer = (disabled || isEditMode) ? 'span' : 'a';\r\n\r\n const pureButton = useMemo(() => {\r\n if (isEditMode) {\r\n return (\r\n \r\n \r\n 
\r\n {text}\r\n \r\n
\r\n }\r\n \r\n
\r\n );\r\n};\r\n\r\nUnStyledSmartMainActionButtonView.propTypes = {\r\n classes: PropTypes.shape({\r\n container: PropTypes.string,\r\n }).isRequired,\r\n};\r\n\r\nexport const SmartMainActionButtonView = withErrorView(withDefaultStyles(\r\n UnStyledSmartMainActionButtonView,\r\n getStyles\r\n), 'componentMode');\r\n","import { identity, isUndefined } from 'underscore';\r\nimport {\r\n getComponentById,\r\n getDataSourceByKey,\r\n} from '@bingads-webui-campaign-react/smart-component-util';\r\nimport {\r\n isAndroid,\r\n isIOS,\r\n} from '@bingads-webui-campaign-react/smart-page-util';\r\nimport { SmartActionButtonTypes } from './smart-action-types';\r\n\r\nexport const proxyReadFromCTAComponentConfig = (componentConfig) => {\r\n if (!componentConfig) {\r\n return { actionType: SmartActionButtonTypes.GetQuote.name };\r\n }\r\n\r\n return {\r\n linkUrl: componentConfig.linkUrl,\r\n linkText: componentConfig.linkText,\r\n actionType: componentConfig.actionType || SmartActionButtonTypes.GetQuote.name,\r\n };\r\n};\r\n\r\nconst androidPrefix = 'geo://?q=';\r\nconst iOSPrefix = 'http://maps.apple.com/?q=';\r\n\r\nconst formatUri = (prefix, uri) => (prefix + encodeURI(uri));\r\n\r\nexport const getIsUsedExternalLink = (componentConfig) => {\r\n const { isExternalLink } = componentConfig;\r\n\r\n // True and undefined are both regarded as isExternalLink\r\n return isExternalLink || isUndefined(isExternalLink);\r\n};\r\n\r\nexport const getDirectionUri = (location) => {\r\n const { uriPrefix } = SmartActionButtonTypes.GetDirections;\r\n\r\n let directionUri = uriPrefix && location\r\n ? formatUri(uriPrefix, location)\r\n : '';\r\n\r\n if (isAndroid()) {\r\n directionUri = formatUri(androidPrefix, location);\r\n } else if (isIOS()) {\r\n directionUri = formatUri(iOSPrefix, location);\r\n }\r\n\r\n return directionUri;\r\n};\r\n\r\nexport const getActionButtonProps =\r\n (siteConfig, id, overrideButtonConfig, useIconButton = false) => {\r\n const componentConfig = overrideButtonConfig || getComponentById(siteConfig, id);\r\n const { actionType } = proxyReadFromCTAComponentConfig(componentConfig);\r\n const {\r\n text,\r\n uriPrefix,\r\n dataSourceName,\r\n editorLabel,\r\n isTextEditable,\r\n isLinkEditable,\r\n isFormLink,\r\n icon,\r\n iconText,\r\n operations = [],\r\n readProcessor = identity,\r\n writeProcessor = identity,\r\n validator,\r\n } = SmartActionButtonTypes[actionType];\r\n\r\n const { linkUrl, linkText } = componentConfig;\r\n\r\n const dataSourceValue = getDataSourceByKey(siteConfig, dataSourceName);\r\n let targetUri = uriPrefix && dataSourceValue ?\r\n formatUri(uriPrefix, dataSourceValue) :\r\n '';\r\n\r\n if (actionType === SmartActionButtonTypes.GetDirections.name) {\r\n targetUri = getDirectionUri(dataSourceValue);\r\n }\r\n\r\n return {\r\n id,\r\n componentConfig,\r\n actionType,\r\n text: useIconButton && iconText ? iconText : text,\r\n dataSourceName,\r\n dataSourceValue,\r\n editorLabel,\r\n targetUri,\r\n linkUrl,\r\n linkText,\r\n isTextEditable,\r\n isLinkEditable,\r\n isFormLink,\r\n icon,\r\n defaultLinkText: SmartActionButtonTypes.CustomLink.text,\r\n operations,\r\n readProcessor,\r\n writeProcessor,\r\n validator,\r\n };\r\n };\r\n","import _ from 'underscore';\r\nimport {\r\n COMPONENT_TYPE_MAPPING,\r\n DATA_SOURCE_KEY_MAPPING,\r\n WEBSITE_SOURCE_DATA_KEY_MAPPING,\r\n getWebsiteSourceDataByKey,\r\n getComponentByType,\r\n mapWSDHoursToHours,\r\n getDefaultHoursConfig,\r\n} from '@bingads-webui-campaign-react/smart-component-util';\r\n\r\n/**\r\n * Read booking availability.\r\n * 1. Read from WebsiteSourceData.Appointment.AppointmentHours\r\n * 2. Fallback to Business Hours\r\n * 3. Fallback to default hours\r\n * @param {Object} siteConfig Complete site config\r\n * @returns {Array} Booking availability\r\n */\r\nexport const proxyReadHoursConfig = (siteConfig) => {\r\n const defaultHours = getDefaultHoursConfig();\r\n\r\n const appointment = getWebsiteSourceDataByKey(\r\n siteConfig,\r\n WEBSITE_SOURCE_DATA_KEY_MAPPING.Appointment\r\n ) || {};\r\n const bookingHours = appointment.AppointmentHours || [];\r\n\r\n // Business Hours may store in two places: Business Hours Component and Contact Component.\r\n const bizHourConfig = getComponentByType(siteConfig, COMPONENT_TYPE_MAPPING.BusinessHours);\r\n const contactConfig = getComponentByType(siteConfig, COMPONENT_TYPE_MAPPING.Contact);\r\n let businessHours = _.propertyOf(bizHourConfig)(DATA_SOURCE_KEY_MAPPING.BusinessHours);\r\n if (_.isEmpty(bizHourConfig)) {\r\n businessHours = _.propertyOf(contactConfig)(DATA_SOURCE_KEY_MAPPING.BusinessHours);\r\n }\r\n\r\n\r\n let hours = defaultHours;\r\n if (!_.isEmpty(bookingHours)) {\r\n hours = mapWSDHoursToHours(bookingHours);\r\n } else if (!_.isEmpty(businessHours)) {\r\n hours = businessHours;\r\n }\r\n\r\n // Filter out \"Holidays\", not support holidays now.\r\n hours = _.filter(hours, item => item.day !== 'holiday');\r\n\r\n return hours;\r\n};\r\n","import React, { useContext, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport {\r\n SiteConfigContext,\r\n DataServiceContext,\r\n useIsSmartPageBookAppointmentEnabled,\r\n useCurrentLocale,\r\n} from '@bingads-webui-campaign-react/smart-page-context';\r\nimport {\r\n DATA_SOURCE_KEY_MAPPING,\r\n getDataSourceByKey,\r\n getWebsiteSourceDataByKey,\r\n WEBSITE_SOURCE_DATA_KEY_MAPPING,\r\n getTimeZoneOffset,\r\n} from '@bingads-webui-campaign-react/smart-component-util';\r\nimport { MailService } from '@bingads-webui-campaign-react/smart-page-data-service';\r\n\r\nimport { SmartActionButtonView } from './smart-action-button-view';\r\nimport { SmartMainActionButtonView } from './smart-main-action-button-view';\r\nimport { getActionButtonProps, getIsUsedExternalLink } from './utils/get-action-button-props';\r\nimport { proxyReadHoursConfig } from './utils/proxy-read-hours-config';\r\n\r\nexport const SmartActionButtonConnector = ({\r\n id,\r\n overrideButtonConfig,\r\n className,\r\n useIconButton,\r\n disabled,\r\n isEditMode,\r\n}) => {\r\n const { siteConfig } = useContext(SiteConfigContext);\r\n const i18n = useContext(I18nContext);\r\n const { Urls: { SignOutUrl = null } = {} } = useContext(DataServiceContext);\r\n const userLocale = useCurrentLocale();\r\n const isSmartPageBookAppointmentEnabled = useIsSmartPageBookAppointmentEnabled();\r\n\r\n const {\r\n actionType,\r\n text,\r\n targetUri,\r\n linkUrl,\r\n linkText,\r\n isFormLink,\r\n icon,\r\n componentConfig,\r\n } = getActionButtonProps(siteConfig, id, overrideButtonConfig, useIconButton);\r\n const emails = getDataSourceByKey(siteConfig, DATA_SOURCE_KEY_MAPPING.Emails, []);\r\n const businessName = getDataSourceByKey(siteConfig, DATA_SOURCE_KEY_MAPPING.BusinessName, '');\r\n const availableBookingHours = proxyReadHoursConfig(siteConfig);\r\n const timeZoneId = getWebsiteSourceDataByKey(\r\n siteConfig,\r\n WEBSITE_SOURCE_DATA_KEY_MAPPING.TimeZoneId\r\n );\r\n const customerTimeZoneOffset = getTimeZoneOffset({ timeZoneId });\r\n const smartPageId = siteConfig.id;\r\n const landingLink = siteConfig.siteContextInfo ? siteConfig.siteContextInfo.sourceUrl : '';\r\n\r\n const mailService = useMemo(() => MailService({\r\n location: window.location,\r\n customerName: businessName,\r\n customerEmail: emails.length > 0 ? emails[0] : '',\r\n signOutUrl: SignOutUrl,\r\n }), [SignOutUrl, emails, businessName]);\r\n\r\n const pilots = useMemo(() => ({\r\n isSmartPageBookAppointmentEnabled,\r\n }), [isSmartPageBookAppointmentEnabled]);\r\n\r\n const bookingProps = useMemo(() => ({\r\n smartPageId,\r\n availableBookingHours,\r\n landingLink,\r\n email: emails.length > 0 ? emails[0] : '',\r\n isExternalLink: getIsUsedExternalLink(componentConfig),\r\n businessName,\r\n customerTimeZoneOffset,\r\n }), [\r\n smartPageId, availableBookingHours, landingLink, emails,\r\n componentConfig, businessName, customerTimeZoneOffset,\r\n ]);\r\n\r\n const Component = overrideButtonConfig ? SmartActionButtonView : SmartMainActionButtonView;\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nUnstyledAppointmentEdit.propTypes = {\r\n classes: PropTypes.shape({\r\n container: PropTypes.string,\r\n contact: PropTypes.string,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n bookingDetail: PropTypes.shape({\r\n id: PropTypes.string,\r\n emailAddress: PropTypes.string,\r\n name: PropTypes.string,\r\n phoneNumber: PropTypes.string,\r\n sequence: PropTypes.number,\r\n message: PropTypes.string,\r\n service: PropTypes.string,\r\n status: PropTypes.string,\r\n time: PropTypes.string,\r\n timeInMinutes: PropTypes.number,\r\n }).isRequired,\r\n existingBookings: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\r\n appointmentHours: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\r\n customerTimeZoneOffset: PropTypes.number.isRequired,\r\n updateAppointment: PropTypes.func.isRequired,\r\n submitFnRef: PropTypes.shape({}).isRequired,\r\n onFinished: PropTypes.func,\r\n logger: PropTypes.shape({\r\n logError: PropTypes.func,\r\n logTrace: PropTypes.func,\r\n }),\r\n};\r\n\r\nUnstyledAppointmentEdit.defaultProps = {\r\n onFinished: _.noop,\r\n logger: {\r\n logError: _.noop,\r\n logTrace: _.noop,\r\n },\r\n};\r\n\r\nexport const AppointmentEdit = React.memo(withDefaultStyles(\r\n UnstyledAppointmentEdit,\r\n getStyles\r\n));\r\n","import React, { useState, useCallback, useMemo, useEffect, useRef } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport classNames from 'classnames';\r\nimport { DetailsList, SelectionMode, IconButton, Spinner } from '@fluentui/react';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { useConfirmDialog } from '@bingads-webui-campaign-react/common-hooks';\r\n\r\nimport { getColumns } from '../utils/booking-config';\r\nimport { SmartBookingModal } from './booking-modal-base';\r\nimport { AppointmentEdit } from './edit-appoinment';\r\n\r\nconst getStyles = () => ({\r\n container: {\r\n width: '100%',\r\n position: 'relative',\r\n },\r\n listContainer: {\r\n height: '100%',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n\r\n '& .ms-DetailsList-headerWrapper .ms-DetailsHeader': {\r\n borderBottom: 'none',\r\n },\r\n\r\n '& .ms-Spinner, .empty-message': {\r\n position: 'absolute',\r\n top: '50%',\r\n left: '50%',\r\n transform: 'translate(-50%, -50%)',\r\n },\r\n\r\n '& .list-header': {\r\n height: '84px',\r\n lineHeight: '84px',\r\n fontSize: 20,\r\n fontWeight: 600,\r\n margin: 0,\r\n },\r\n\r\n '& .list-content': {\r\n minHeight: 60,\r\n flex: 1,\r\n },\r\n },\r\n columnCell: {\r\n borderRight: '1px solid #F3F2F1',\r\n whiteSpace: 'normal',\r\n fontSize: 14,\r\n\r\n '&:last-child': {\r\n borderRight: 'none',\r\n },\r\n },\r\n topBottomBorder: {\r\n borderTop: '1px solid #979797',\r\n borderBottom: '1px solid #979797',\r\n },\r\n editingHeader: {\r\n width: '100%',\r\n paddingLeft: 32,\r\n lineHeight: '65px',\r\n fontWeight: 600,\r\n\r\n '& .back-to-list': {\r\n fontSize: 20,\r\n height: 65,\r\n\r\n '& button': {\r\n color: 'black',\r\n marginRight: 10,\r\n },\r\n },\r\n\r\n '& .title': {\r\n fontSize: 24,\r\n height: 65,\r\n textAlign: 'center',\r\n },\r\n },\r\n});\r\n\r\nconst editingModalStyle = {\r\n main: {\r\n width: '590px',\r\n height: '950px',\r\n },\r\n};\r\n\r\nconst backIcon = { iconName: 'Back' };\r\n\r\nexport const UnStyledSmartAppointmentManagement = ({\r\n i18n,\r\n logger,\r\n classes,\r\n className,\r\n title,\r\n customerEmailAddress,\r\n customerTimeZoneOffset,\r\n appointmentHours,\r\n userLocale,\r\n smartPageId,\r\n businessName,\r\n smartPageService,\r\n onInternalModalChange,\r\n modalStyle,\r\n // whethe to show \"go back apponintments\"\r\n showBack,\r\n}) => {\r\n const submitFnRef = useRef(null);\r\n\r\n const [isEditingModalVisible, setIsEditingModalVisible] = useState(false);\r\n const [shouldFetchBookings, setShouldFetchBookings] = useState(true);\r\n const [isFetchBookings, setIsFetchBookings] = useState(false);\r\n const [isUpdateBooking, setIsUpdateBooking] = useState(false);\r\n\r\n const [existingBookings, setExistingBookings] = useState([]);\r\n const [editingItem, setEditingItem] = useState({});\r\n\r\n // Update specific appointment\r\n const upsertSmartPageBookings = useCallback((bookingDetail) => {\r\n const {\r\n protocol,\r\n host,\r\n pathname,\r\n } = window.location;\r\n\r\n const parameters = {\r\n manageAppointmentLink: `${protocol}//${host}${pathname}`,\r\n customerEmailAddress,\r\n smartPageId,\r\n bookingDetail,\r\n businessName,\r\n customerTimeZoneOffset,\r\n userLocale,\r\n };\r\n\r\n setIsUpdateBooking(true);\r\n logger.logTrace('CTA|BookAppointment|UpdateAppointment');\r\n\r\n return smartPageService.upsertSmartPageBookings(parameters)\r\n .then((res) => {\r\n setShouldFetchBookings(true);\r\n\r\n return res;\r\n }).catch((err) => {\r\n const errorMessage = (err && err.body && err.body.value)\r\n || i18n.getString(_TL_('Request failed, please try later.'));\r\n\r\n logger.logError('CTAError|BookAppointment|UpdateAppointment', err);\r\n throw errorMessage;\r\n }).finally(() => {\r\n setIsUpdateBooking(false);\r\n });\r\n }, [\r\n smartPageService, smartPageId, logger, customerEmailAddress,\r\n businessName, i18n, customerTimeZoneOffset, userLocale,\r\n ]);\r\n\r\n // Handler for clicking cancel appointment button in confirm dialog\r\n const onConfirmCancelAppointment = useCallback(() => {\r\n logger.logTrace('CTA|BookAppointment|CancelAppointment');\r\n\r\n upsertSmartPageBookings({\r\n ...editingItem,\r\n status: 'Deleted',\r\n }).then(() => {\r\n // Refetch the data to update the list\r\n setShouldFetchBookings(true);\r\n }).catch((error) => {\r\n logger.logError('CTAError|BookAppointment|CancelAppointment', error);\r\n\r\n throw new Error(error);\r\n });\r\n }, [editingItem, logger, upsertSmartPageBookings]);\r\n\r\n const [\r\n cancelAppointmentDialog,\r\n showCancelAppointmentDialog,\r\n isCancelAppointmentDialogVisible,\r\n ] = useConfirmDialog({\r\n title: i18n.getString(_TL_('Are you sure you want to cancel this appointment?')),\r\n content: i18n.getString(_TL_('If you cancel, we\\'ll email the customer who booked the appointment informing them of the cancellation.')),\r\n confirmText: i18n.getString(_TL_('Cancel appointment')),\r\n onConfirm: onConfirmCancelAppointment,\r\n cancelText: i18n.getString(_TL_('Go back')),\r\n onCancel: _.noop,\r\n className: 'smart-page-booking-cancel-dialog',\r\n });\r\n\r\n // Handler for clicking \"Edit Appointment\"\r\n const onEditAppointment = useCallback((item) => {\r\n setEditingItem(item);\r\n setIsEditingModalVisible(true);\r\n onInternalModalChange({ isOpen: true });\r\n }, [onInternalModalChange]);\r\n\r\n // Handler for click \"Cancel the appointment\"\r\n const onCancelAppointment = useCallback((item) => {\r\n setEditingItem(item);\r\n showCancelAppointmentDialog();\r\n }, [showCancelAppointmentDialog]);\r\n\r\n const onCloseModalInternal = useCallback((e, shouldCloseAllModal) => {\r\n setIsEditingModalVisible(false);\r\n onInternalModalChange({ isOpen: false, shouldCloseAllModal });\r\n }, [onInternalModalChange]);\r\n\r\n // Handler for clicking \"submit\" button\r\n const onSubmit = useCallback(() => {\r\n if (_.isFunction(submitFnRef.current)) {\r\n submitFnRef.current();\r\n }\r\n }, []);\r\n\r\n const onRenderHeader = useCallback(() => (\r\n \r\n
\r\n {i18n.getString(_TL_('Customer contact information'))}
\r\n \r\n
\r\n {name}
\r\n {phoneNumber}
\r\n \r\n {emailAddress}\r\n \r\n \r\n *{errorMessage}\r\n
\r\n )\r\n }\r\n \r\n {\r\n showBack && (\r\n
\r\n ), [classes, onCloseModalInternal, i18n, showBack]);\r\n\r\n // DetailList columns config\r\n const columns = useMemo(() => getColumns({\r\n i18n,\r\n classes,\r\n onEditAppointment,\r\n onCancelAppointment,\r\n currentTime: new Date(),\r\n timeZoneOffset: customerTimeZoneOffset,\r\n }), [classes, i18n, onEditAppointment, onCancelAppointment, customerTimeZoneOffset]);\r\n\r\n const bookingList = useMemo(() => {\r\n if (isFetchBookings || isUpdateBooking) {\r\n return \r\n
\r\n )\r\n }\r\n {i18n.getString(_TL_('Edit appointment'))}
\r\n {i18n.getString(_TL_('No upcoming bookings.'))}
;\r\n }\r\n\r\n return (\r\n \r\n
\r\n );\r\n }, [columns, existingBookings, i18n, isFetchBookings, isUpdateBooking]);\r\n\r\n useEffect(() => {\r\n if (shouldFetchBookings && smartPageId) {\r\n setIsFetchBookings(true);\r\n logger.logTrace('CTA|BookAppointment|FetchExistingBookings');\r\n\r\n smartPageService.getExistingBookings(smartPageId).then((val) => {\r\n setExistingBookings(val);\r\n }).catch((error) => {\r\n logger.logError('CTAError|BookAppointment|FetchExistingBookings', error);\r\n throw new Error(error);\r\n }).finally(() => {\r\n setShouldFetchBookings(false);\r\n setIsFetchBookings(false);\r\n });\r\n }\r\n }, [shouldFetchBookings, smartPageId, smartPageService, logger]);\r\n\r\n const containerClassName = classNames(\r\n className,\r\n classes.container,\r\n 'appointment-management-container'\r\n );\r\n\r\n return (\r\n \r\n onCloseModalInternal(e, true)}\r\n onClickFooterButton={onSubmit}\r\n modalStyle={modalStyle}\r\n >\r\n
\r\n );\r\n};\r\n\r\nUnStyledSmartAppointmentManagement.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n classes: PropTypes.shape({\r\n listContainer: PropTypes.string.isRequired,\r\n container: PropTypes.string.isRequired,\r\n editingHeader: PropTypes.string.isRequired,\r\n }).isRequired,\r\n className: PropTypes.string,\r\n onInternalModalChange: PropTypes.func,\r\n logger: PropTypes.shape({\r\n logError: PropTypes.func,\r\n logTrace: PropTypes.func,\r\n }),\r\n title: PropTypes.string.isRequired,\r\n appointmentHours: PropTypes.arrayOf(PropTypes.shape({\r\n day: PropTypes.string,\r\n isOpenAllDay: PropTypes.bool,\r\n timeSlots: PropTypes.arrayOf(PropTypes.shape({})),\r\n isValid: PropTypes.bool,\r\n })).isRequired,\r\n userLocale: PropTypes.string.isRequired,\r\n smartPageId: PropTypes.string.isRequired,\r\n smartPageService: PropTypes.shape({}).isRequired,\r\n customerEmailAddress: PropTypes.string.isRequired,\r\n customerTimeZoneOffset: PropTypes.number.isRequired,\r\n businessName: PropTypes.string.isRequired,\r\n modalStyle: PropTypes.shape({}),\r\n showBack: PropTypes.bool,\r\n};\r\n\r\nUnStyledSmartAppointmentManagement.defaultProps = {\r\n logger: {\r\n logError: _.noop,\r\n logTrace: _.noop,\r\n },\r\n className: '',\r\n onInternalModalChange: _.noop,\r\n modalStyle: editingModalStyle,\r\n showBack: true,\r\n};\r\n\r\nexport const SmartAppointmentManagement = React.memo(withDefaultStyles(\r\n UnStyledSmartAppointmentManagement,\r\n getStyles\r\n));\r\n","import React, { useCallback, useContext, useMemo, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport _ from 'underscore';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport {\r\n SiteConfigContext,\r\n DataServiceContext,\r\n} from '@bingads-webui-campaign-react/smart-page-context';\r\nimport {\r\n DATA_SOURCE_KEY_MAPPING,\r\n getDataSourceByKeys,\r\n getWebsiteSourceDataByKey,\r\n WEBSITE_SOURCE_DATA_KEY_MAPPING,\r\n getTimeZoneOffset\r\n} from '@bingads-webui-campaign-react/smart-component-util';\r\n\r\nimport { proxyReadHoursConfig } from '../utils/proxy-read-hours-config';\r\nimport { SmartBookingModal } from './booking-modal-base';\r\nimport { SmartAppointmentManagement } from './appointment-management';\r\n\r\nconst getStyles = () => ({\r\n content: {\r\n padding: '0 27px 20px',\r\n },\r\n});\r\n\r\nexport const UnStyledSmartAppointmentManagementWrapper = ({\r\n classes,\r\n i18n,\r\n logger,\r\n title,\r\n onCloseModal,\r\n}) => {\r\n const { smartPageService } = useContext(DataServiceContext);\r\n const { siteConfig } = useContext(SiteConfigContext);\r\n\r\n const [isModalVisible, setIsModalVisible] = useState(true);\r\n\r\n const modalStyle = useMemo(() => ({\r\n main: {\r\n width: '1075px',\r\n height: '480px',\r\n visibility: isModalVisible ? 'visible' : 'hidden',\r\n },\r\n }), [isModalVisible]);\r\n\r\n const onInternalModalChange = useCallback(({ isOpen, shouldCloseAllModal }) => {\r\n setIsModalVisible(!isOpen);\r\n\r\n if (shouldCloseAllModal) {\r\n onCloseModal();\r\n }\r\n }, [onCloseModal]);\r\n\r\n const appointmentHours = proxyReadHoursConfig(siteConfig);\r\n const smartPageId = siteConfig.id;\r\n const timeZoneId = getWebsiteSourceDataByKey(\r\n siteConfig,\r\n WEBSITE_SOURCE_DATA_KEY_MAPPING.TimeZoneId\r\n );\r\n const [emailAddress, businessName] = getDataSourceByKeys(\r\n siteConfig,\r\n [DATA_SOURCE_KEY_MAPPING.Emails, DATA_SOURCE_KEY_MAPPING.BusinessName],\r\n ['', '']\r\n );\r\n const customerEmailAddress = _.isArray(emailAddress) ? emailAddress[0] : emailAddress;\r\n const customerTimeZoneOffset = getTimeZoneOffset({ timeZoneId });\r\n // User locale should be \"language + region\", don't use \"useCurrentLocale\" as it might return \"en\"\r\n // which is invalid for a standard locale\r\n const userLocale = getWebsiteSourceDataByKey(\r\n siteConfig,\r\n WEBSITE_SOURCE_DATA_KEY_MAPPING.Localization\r\n ) || 'en-us';\r\n\r\n return (\r\n \r\n
\r\n {\r\n isEditingModalVisible && (\r\n {i18n.getString(title)}
\r\n{bookingList}
\r\n \r\n
\r\n), [classes.group, i18n]);\r\n\r\n// Editor for those value come from DataSource\r\nconst DataSourceFieldEditor = ({\r\n classes,\r\n selectedActionType,\r\n editorLabel,\r\n dataSourceValue,\r\n readProcessor,\r\n writeProcessor,\r\n dispatchSiteConfig,\r\n validateInput,\r\n}) => {\r\n const value = readProcessor(dataSourceValue);\r\n\r\n const dispatchDataSourceChange = useCallback((action, newValue) => {\r\n const { dataSourceName } = SmartActionButtonTypes[action];\r\n const formattedValue = writeProcessor(newValue);\r\n\r\n dispatchSiteConfig({\r\n type: 'UPDATE_DATASOURCE_BY_NAME',\r\n payload: {\r\n name: dataSourceName,\r\n value: formattedValue,\r\n },\r\n });\r\n }, [dispatchSiteConfig, writeProcessor]);\r\n\r\n const onDataSourceChange = useCallback((e, val) => {\r\n dispatchDataSourceChange(selectedActionType.key, val);\r\n }, [dispatchDataSourceChange, selectedActionType.key]);\r\n\r\n return useMemo(() => (\r\n \r\n
\r\n ), [classes.group, editorLabel, onDataSourceChange, validateInput, value]);\r\n};\r\n\r\nconst LinkTextEditor = ({\r\n classes,\r\n i18n,\r\n linkText,\r\n validateInput,\r\n componentConfig,\r\n dispatchSiteConfig,\r\n}) => {\r\n const onLinkTextChange = useCallback((e, val) => {\r\n const newComponentConfig = {\r\n ...componentConfig,\r\n linkText: val,\r\n };\r\n\r\n dispatchSiteConfig({\r\n type: 'UPDATE_COMPONENT_BY_ID',\r\n payload: newComponentConfig,\r\n });\r\n }, [componentConfig, dispatchSiteConfig]);\r\n\r\n return useMemo(() => (\r\n \r\n
\r\n ), [classes.group, i18n, linkText, onLinkTextChange, validateInput]);\r\n};\r\n\r\nconst LinkUrlEditor = ({\r\n classes,\r\n i18n,\r\n linkUrl,\r\n hideLabel,\r\n ariaLabel,\r\n componentConfig,\r\n dispatchSiteConfig,\r\n}) => {\r\n const validateLink = useCallback((val) => {\r\n if (isValidUrl(val)) {\r\n return '';\r\n }\r\n return i18n.getString(_TL_('Invalid link'));\r\n }, [i18n]);\r\n\r\n const onLinkUrlChange = useCallback((e, val) => {\r\n const newComponentConfig = {\r\n ...componentConfig,\r\n linkUrl: val,\r\n };\r\n\r\n dispatchSiteConfig({\r\n type: 'UPDATE_COMPONENT_BY_ID',\r\n payload: newComponentConfig,\r\n });\r\n }, [componentConfig, dispatchSiteConfig]);\r\n\r\n const onLinkUrlBlur = useCallback((e) => {\r\n onLinkUrlChange(e, prependProtocolToUrl(linkUrl));\r\n }, [linkUrl, onLinkUrlChange]);\r\n\r\n const label = hideLabel ? '' : i18n.getString(_TL_('Link'));\r\n const className = hideLabel ? '' : classes.group;\r\n\r\n return useMemo(() => (\r\n \r\n
\r\n ), [className, label, linkUrl, onLinkUrlChange, validateLink, onLinkUrlBlur, ariaLabel]);\r\n};\r\n\r\nconst PreviewForm = ({\r\n classes,\r\n i18n,\r\n selectedActionType,\r\n}) => {\r\n const [hideDialog, setHideDialog] = useState(true);\r\n const [showWarning, setShowWarning] = useState(false);\r\n const [requestSent, setRequestSent] = useState(false);\r\n const isMobile = useMobileSupportEnabled();\r\n\r\n const openDialog = useCallback(() => {\r\n setHideDialog(prev => (prev ? false : prev));\r\n }, []);\r\n\r\n const onSubmitForm = useCallback(() => {\r\n setShowWarning(true);\r\n setRequestSent(true);\r\n }, []);\r\n\r\n const onCancelForm = useCallback(() => {\r\n setShowWarning(false);\r\n setRequestSent(false);\r\n setHideDialog(true);\r\n }, []);\r\n\r\n const formContent = useMemo(() => (\r\n \r\n \r\n {i18n.getString(_TL_('Preview form'))}\r\n \r\n
\r\n ), [\r\n classes.group, classes.previewLink, hideDialog, i18n,\r\n onCancelForm, onSubmitForm, openDialog, selectedActionType.text,\r\n showWarning,\r\n ]);\r\n\r\n if (isMobile) {\r\n return null;\r\n }\r\n\r\n return formContent;\r\n};\r\n\r\nconst BookingOperations = ({\r\n i18n,\r\n classes,\r\n operations,\r\n logger,\r\n}) => {\r\n const [isBookingModalOpen, setIsBookingModalOpen] = useState(false);\r\n const [\r\n bookingOperation,\r\n setBookingOperation,\r\n ] = useState(SmartActionButtonTypes.BookAppointment.operations[0]);\r\n\r\n const onOpenBookingModal = useCallback((e, index) => {\r\n setIsBookingModalOpen(true);\r\n\r\n const selectedBookingOperation = operations[index];\r\n setBookingOperation(selectedBookingOperation);\r\n }, [operations]);\r\n\r\n const onCloseBookingModal = useCallback(() => {\r\n setIsBookingModalOpen(false);\r\n }, []);\r\n\r\n const showAvailabilityManagement = isBookingModalOpen\r\n && bookingOperation.key === BOOKING_OPERATIONS.availability;\r\n const showAppointmentManagement = isBookingModalOpen\r\n && bookingOperation.key === BOOKING_OPERATIONS.appointment;\r\n\r\n return useMemo(() => (\r\n \r\n {\r\n operations.map(({ linkText }, index) => (\r\n
\r\n ), [\r\n bookingOperation, classes.group, classes.previewLink, showAppointmentManagement,\r\n showAvailabilityManagement, i18n, onCloseBookingModal, onOpenBookingModal,\r\n operations, logger,\r\n ]);\r\n};\r\n\r\nconst BookingAppointment = (props) => {\r\n const {\r\n i18n,\r\n pilots,\r\n componentConfig,\r\n dispatchSiteConfig,\r\n } = props;\r\n\r\n // Legacy users: isExternalLinkUsed === undefined, regard them as isExternalLinkUsed.\r\n // So only isExternalLinkUsed === false we should set the toggle off.\r\n const [\r\n isExternalLinkUsed,\r\n setIsExternalLinkUsed,\r\n ] = useState(getIsUsedExternalLink(componentConfig));\r\n const isMobile = useMobileSupportEnabled();\r\n\r\n const label = i18n.getString(_TL_('Use an external booking website'));\r\n\r\n const onToggleChange = useCallback((e, checked) => {\r\n setIsExternalLinkUsed(checked);\r\n\r\n dispatchSiteConfig({\r\n type: 'UPDATE_COMPONENT_BY_ID',\r\n payload: {\r\n ...componentConfig,\r\n isExternalLink: checked,\r\n // Clear the linkUrl\r\n linkUrl: '',\r\n },\r\n });\r\n }, [componentConfig, dispatchSiteConfig]);\r\n\r\n if (!pilots.isSmartPageBookAppointmentEnabled) {\r\n return \r\n onOpenBookingModal(e, index)}\r\n >\r\n {i18n.getString(linkText)}\r\n \r\n
\r\n ))\r\n }\r\n {\r\n showAvailabilityManagement && (\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nUnstyledSmartActionButtonEditor.propTypes = {\r\n classes: PropTypes.shape({\r\n group: PropTypes.string.isRequired,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n componentId: PropTypes.string.isRequired,\r\n};\r\n\r\nexport const SmartActionButtonEditor = withDefaultStyles(\r\n UnstyledSmartActionButtonEditor,\r\n getStyles\r\n);\r\n","import React, { useCallback, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Cropper from 'react-easy-crop';\r\nimport classNames from 'classnames';\r\nimport { FontIcon } from '@fluentui/react/lib/Icon';\r\n\r\nconst getOffsetFromCropSettings = (cropSettings) => {\r\n const { cropY, cropHeight } = cropSettings;\r\n\r\n if (!cropHeight) {\r\n return 0;\r\n }\r\n\r\n return -(100 * cropY) / cropHeight;\r\n};\r\n\r\nconst convertPercentageOffsetToCropValue = ({\r\n offset,\r\n imageWidth,\r\n imageHeight,\r\n aspectRatio,\r\n}) => {\r\n const cropAreaHeight = imageWidth * aspectRatio;\r\n const imageToCropAreaProportion = imageHeight / cropAreaHeight;\r\n const offsetNormalized = -(offset / 100) / imageToCropAreaProportion;\r\n const offsetInPixels = offsetNormalized * imageHeight;\r\n\r\n let y = 0;\r\n\r\n y += imageHeight / 2;\r\n y -= cropAreaHeight / 2;\r\n y -= offsetInPixels;\r\n\r\n return { x: 0, y };\r\n};\r\n\r\nexport const ImageCropperEditor = (props) => {\r\n const {\r\n i18n,\r\n classes,\r\n src,\r\n cropSettings,\r\n aspectRatio,\r\n onCropFinished,\r\n } = props;\r\n\r\n const [crop, setCrop] = useState({ x: 0, y: 0 });\r\n\r\n const onMediaLoaded = useCallback(\r\n (mediaSize) => {\r\n const off = getOffsetFromCropSettings(cropSettings);\r\n const initialCrop = convertPercentageOffsetToCropValue({\r\n offset: off,\r\n imageWidth: mediaSize.width,\r\n imageHeight: mediaSize.height,\r\n aspectRatio,\r\n });\r\n setCrop(initialCrop);\r\n },\r\n [aspectRatio, cropSettings]\r\n );\r\n\r\n const onCropComplete = useCallback(\r\n (croppedArea) => {\r\n onCropFinished({\r\n cropX: 0,\r\n cropY: croppedArea.y / 100,\r\n cropWidth: 1,\r\n cropHeight: croppedArea.height / 100,\r\n });\r\n },\r\n [onCropFinished]\r\n );\r\n\r\n return (\r\n \r\n {ctaLabel}\r\n
\r\n\r\n {i18n.getString(_TL_('Select the primary action you want customers to take on your website.'))}\r\n
\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nImageCropperEditor.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n classes: PropTypes.shape({\r\n img: PropTypes.string.isRequired,\r\n }).isRequired,\r\n src: PropTypes.string.isRequired,\r\n cropSettings: PropTypes.shape({}).isRequired,\r\n aspectRatio: PropTypes.number.isRequired,\r\n onCropFinished: PropTypes.func.isRequired,\r\n};\r\n","import React, { useMemo, useCallback } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\n\r\nimport {\r\n usePreviewPageContext,\r\n useSiteConfig,\r\n ComponentLoadingStatus,\r\n} from '@bingads-webui-campaign-react/smart-page-context';\r\n\r\nimport { FontIcon } from '@fluentui/react/lib/Icon';\r\n\r\nconst getOffsetFromCropSettings = (cropSettings) => {\r\n const { cropY, cropHeight } = cropSettings;\r\n\r\n if (!cropHeight) {\r\n return 0;\r\n }\r\n\r\n return -(100 * cropY) / cropHeight;\r\n};\r\n\r\nexport const ImageCropperPreview = (props) => {\r\n const {\r\n i18n,\r\n classes,\r\n src,\r\n cropSettings,\r\n activate,\r\n isInEditor,\r\n isExternalSrc,\r\n } = props;\r\n\r\n const offset = useMemo(() => getOffsetFromCropSettings(cropSettings), [cropSettings]);\r\n\r\n const { updateElementsLoadingStatus } = usePreviewPageContext();\r\n const { dispatchSiteConfig } = useSiteConfig();\r\n\r\n const handleOnLoad = useCallback((e) => {\r\n if (!isInEditor) {\r\n updateElementsLoadingStatus({ coverImage: { status: ComponentLoadingStatus.LOADED } });\r\n }\r\n\r\n if (isExternalSrc) {\r\n const { height, width } = e.currentTarget;\r\n\r\n dispatchSiteConfig({\r\n type: 'UPDATE_COVER_IMAGE',\r\n payload: {\r\n imageWidth: width,\r\n imageHeight: height,\r\n },\r\n });\r\n }\r\n }, [\r\n updateElementsLoadingStatus,\r\n isInEditor,\r\n dispatchSiteConfig,\r\n isExternalSrc,\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\n \r\n\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n }\r\n \r\n );\r\n};\r\n\r\nImageCropperPreview.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n classes: PropTypes.shape({\r\n img: PropTypes.string.isRequired,\r\n }).isRequired,\r\n src: PropTypes.string.isRequired,\r\n cropSettings: PropTypes.shape({}).isRequired,\r\n activate: PropTypes.func.isRequired,\r\n isInEditor: PropTypes.bool.isRequired,\r\n isExternalSrc: PropTypes.bool.isRequired,\r\n};\r\n","import React, { useCallback, useEffect, useMemo, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\n\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { IDEAL_ASPECT_RATIO, preventEventPropagation } from '@bingads-webui-campaign-react/smart-component-util';\r\nimport {\r\n useIsComponentSelected,\r\n usePreviewPageContext,\r\n ComponentLoadingStatus,\r\n} from '@bingads-webui-campaign-react/smart-page-context';\r\nimport { Loading } from '@bingads-webui-campaign-react/smart-component-primitive';\r\n\r\nimport { ImageCropperEditor } from './image-cropper-editor';\r\nimport { ImageCropperPreview } from './image-cropper-preview';\r\n\r\nimport { getStyles } from './styles';\r\n\r\nconst cropSettingsInPercentage = ({\r\n cropX,\r\n cropY,\r\n cropWidth,\r\n cropHeight,\r\n}, imageWidth, imageHeight) => ({\r\n cropX: cropX / imageWidth,\r\n cropY: cropY / imageHeight,\r\n cropWidth: cropWidth / imageWidth,\r\n cropHeight: cropHeight / imageHeight,\r\n});\r\n\r\nconst cropSettingsInPixels = ({\r\n cropX,\r\n cropY,\r\n cropWidth,\r\n cropHeight,\r\n}, imageWidth, imageHeight) => ({\r\n cropX: cropX * imageWidth,\r\n cropY: cropY * imageHeight,\r\n cropWidth: cropWidth * imageWidth,\r\n cropHeight: cropHeight * imageHeight,\r\n});\r\n\r\nexport const UnStyledImageCropper = (props) => {\r\n const {\r\n i18n,\r\n classes,\r\n src,\r\n imageWidth,\r\n imageHeight,\r\n cropSettings: initialCropSettings,\r\n isEditMode,\r\n isActive,\r\n setIsActive,\r\n onCropSettingsChange,\r\n isExternalSrc,\r\n } = props;\r\n\r\n const [cropSettings, setCropSettings] = useState({});\r\n\r\n const { elementsLoadingStatus } = usePreviewPageContext();\r\n\r\n const imageAspectRatio = imageHeight / imageWidth;\r\n const aspectRatiosProportion = imageAspectRatio / IDEAL_ASPECT_RATIO;\r\n const showEditMode = isEditMode && aspectRatiosProportion > 1;\r\n const triggerEditor = showEditMode && isActive;\r\n const cropperStyle = triggerEditor ? classes.imageCropperEditor : classes.imageCropperPreview;\r\n\r\n const selected = useIsComponentSelected('coverImage');\r\n\r\n useEffect(\r\n () => {\r\n setCropSettings(initialCropSettings\r\n ? cropSettingsInPercentage(initialCropSettings, imageWidth, imageHeight)\r\n : ({\r\n cropX: 0,\r\n cropY: 0,\r\n cropWidth: 1,\r\n cropHeight: triggerEditor ? (1 / aspectRatiosProportion) : 1,\r\n }));\r\n },\r\n [aspectRatiosProportion, imageHeight, imageWidth, initialCropSettings, triggerEditor]\r\n );\r\n\r\n const updateCropSettings = useCallback(\r\n (newCropSettings) => {\r\n setCropSettings(newCropSettings);\r\n onCropSettingsChange(cropSettingsInPixels(newCropSettings, imageWidth, imageHeight));\r\n },\r\n [imageHeight, imageWidth, onCropSettingsChange]\r\n );\r\n\r\n const activate = useCallback((e) => {\r\n setIsActive(true);\r\n if (selected) {\r\n preventEventPropagation(e);\r\n }\r\n }, [setIsActive, selected]);\r\n\r\n const CropperView = useMemo(\r\n () => (triggerEditor ? ImageCropperEditor : ImageCropperPreview),\r\n [triggerEditor]\r\n );\r\n\r\n return (\r\n \r\n \r\n
\r\n {\r\n isInEditor &&\r\n \r\n
\r\n \r\n {\r\n elementsLoadingStatus.coverImage &&\r\n elementsLoadingStatus.coverImage.status === ComponentLoadingStatus.LOADING\r\n ?
\r\n );\r\n};\r\n\r\nUnStyledImageCropper.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n classes: PropTypes.shape({\r\n imageCropperEditor: PropTypes.string.isRequired,\r\n imageCropperPreview: PropTypes.string.isRequired,\r\n }).isRequired,\r\n src: PropTypes.string.isRequired,\r\n imageWidth: PropTypes.number.isRequired,\r\n imageHeight: PropTypes.number.isRequired,\r\n isEditMode: PropTypes.bool,\r\n isActive: PropTypes.bool.isRequired,\r\n setIsActive: PropTypes.func.isRequired,\r\n cropSettings: PropTypes.shape({}),\r\n onCropSettingsChange: PropTypes.func.isRequired,\r\n isExternalSrc: PropTypes.bool,\r\n};\r\n\r\nUnStyledImageCropper.defaultProps = {\r\n cropSettings: null,\r\n isEditMode: false,\r\n isExternalSrc: false,\r\n};\r\n\r\nexport const ImageCropper = withDefaultStyles(UnStyledImageCropper, getStyles);\r\n","import { IDEAL_ASPECT_RATIO_PERCENTAGE } from '@bingads-webui-campaign-react/smart-component-util';\r\n\r\nexport const getStyles = () => ({\r\n imageCropperPreview: {\r\n position: 'absolute',\r\n width: '100%',\r\n paddingTop: `${IDEAL_ASPECT_RATIO_PERCENTAGE}%`,\r\n overflow: 'hidden',\r\n },\r\n imageCropperEditor: {\r\n },\r\n // #region Preview styles\r\n overlayPreview: {\r\n position: 'absolute',\r\n top: 0,\r\n width: '100%',\r\n height: '100%',\r\n },\r\n preview: {\r\n width: '100%',\r\n height: '100%',\r\n },\r\n previewLoading: {\r\n position: 'absolute',\r\n top: 0,\r\n zIndex: 1,\r\n },\r\n img: {\r\n width: '100%',\r\n height: 'auto',\r\n },\r\n // #endregion\r\n // #region Editor styles\r\n unclickable: {\r\n pointerEvents: 'none',\r\n },\r\n overlay: {\r\n position: 'absolute',\r\n width: '100%',\r\n paddingTop: `${IDEAL_ASPECT_RATIO_PERCENTAGE}%`,\r\n marginTop: '100px',\r\n },\r\n overlayStrip: {\r\n position: 'absolute',\r\n width: 5,\r\n height: 5,\r\n background: 'black',\r\n },\r\n overlayMessage: {\r\n position: 'absolute',\r\n top: '50%',\r\n left: '50%',\r\n transform: 'translateY(-50%) translateX(-50%)',\r\n height: 40,\r\n borderRadius: 20,\r\n background: 'rgba(0, 0, 0, 0.9)',\r\n color: '#ffffff',\r\n border: 'none',\r\n padding: '0px 16px',\r\n minWidth: 80,\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n '& .ms-Icon': {\r\n margin: '0px 4px',\r\n textAlign: 'center',\r\n fontSize: '16px',\r\n lineHeight: '16px',\r\n },\r\n '& span': {\r\n margin: '0px 4px',\r\n lineHeight: '100%',\r\n display: 'block',\r\n fontWeight: '600',\r\n },\r\n },\r\n verticalStrip: {\r\n height: 20,\r\n },\r\n horizontalStrip: {\r\n width: 20,\r\n },\r\n topStrip: {\r\n top: 0,\r\n },\r\n middleStrip: {\r\n top: 'calc(50% - 10px)',\r\n },\r\n bottomStrip: {\r\n bottom: 0,\r\n },\r\n leftStrip: {\r\n left: 0,\r\n },\r\n rightStrip: {\r\n right: 0,\r\n },\r\n // #endregion\r\n});\r\n","import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\n\r\nimport { useImageMeta } from '@bingads-webui-campaign-react/smart-component-image';\r\nimport {\r\n useClientContext,\r\n useIsComponentSelected,\r\n useSiteConfig\r\n} from '@bingads-webui-campaign-react/smart-page-context';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { withErrorView } from '@bingads-webui-campaign-react/smart-page-error-boundary';\r\nimport { preventEventPropagation } from '@bingads-webui-campaign-react/smart-component-util';\r\n\r\nimport { useLocalImage } from './components/use-local-image';\r\nimport { ImageCropper } from './components/image-cropper';\r\n\r\nconst getRatio = (width, height) => height / width;\r\nconst getCssPercentStr = (width, height) => `${getRatio(width, height) * 100}%`;\r\n\r\nconst MaxWidth = 1080;\r\nconst MaxHeight = 608;\r\nconst MaxRatio = getRatio(MaxWidth, MaxHeight);\r\nconst MaxCssPercentStr = getCssPercentStr(MaxWidth, MaxHeight);\r\n\r\nconst getImageRatio = (width, height) => {\r\n if (!width || !height) {\r\n return MaxCssPercentStr;\r\n }\r\n\r\n if (getRatio(width, height) < MaxRatio) {\r\n return getCssPercentStr(width, height);\r\n }\r\n return MaxCssPercentStr;\r\n};\r\n\r\nconst getStyles = components => ({\r\n container: {\r\n padding: '24px 10%',\r\n },\r\n mobileContainer: {\r\n ...components.section,\r\n },\r\n centerContainer: {\r\n marginLeft: 'auto',\r\n marginRight: 'auto',\r\n maxWidth: MaxWidth,\r\n },\r\n sizedContainer: {\r\n position: 'relative',\r\n },\r\n content: {\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n width: '100%',\r\n height: '100%',\r\n },\r\n selectedContent: {\r\n position: 'absolute',\r\n top: -100,\r\n left: 0,\r\n width: '100%',\r\n height: 'calc(100% + 200px)',\r\n },\r\n});\r\n\r\nconst useClickOutsideHandler = (ref, cb) => {\r\n const handle = useCallback((e) => {\r\n if (ref.current && !e.target.classList.contains('image-cropper-preview-overlay') && !ref.current.contains(e.target)) { cb(); }\r\n }, [cb, ref]);\r\n\r\n useEffect(() => {\r\n document.addEventListener('click', handle);\r\n return () => document.removeEventListener('click', handle);\r\n }, [handle]);\r\n};\r\n\r\nconst UnStyledSmartCoverImageViewWithCropper = ({\r\n imageId,\r\n imageName,\r\n imageWidth,\r\n imageHeight,\r\n cropSettings,\r\n id,\r\n i18n,\r\n classes,\r\n isEditMode,\r\n externalSrc,\r\n}) => {\r\n const ref = useRef();\r\n const [isActive, setIsActive] = useState(false);\r\n\r\n const { isMobile } = useClientContext();\r\n const { ImageUrl } = useImageMeta({ imageId });\r\n const localImageSrc = useLocalImage(imageName);\r\n const src = (ImageUrl || externalSrc) || localImageSrc;\r\n const isExternalSrc = useMemo(() => !imageId && !!externalSrc, [imageId, externalSrc]);\r\n\r\n const selected = useIsComponentSelected('coverImage');\r\n\r\n const { dispatchSiteConfig } = useSiteConfig();\r\n\r\n const imageAspectRatio = imageHeight / imageWidth;\r\n const aspectRatiosProportion = imageAspectRatio / (MaxHeight / MaxWidth);\r\n // Only when user click \"Cover Image\" to expand the cover image editor,\r\n // can we show crop option. This is to fix a11y nested-interactive issue.\r\n const showEditMode = isEditMode && selected && !isMobile && aspectRatiosProportion > 1;\r\n\r\n const storeNewCropSettings = useCallback(\r\n (newCropSettings) => {\r\n dispatchSiteConfig({\r\n type: 'UPDATE_COVER_IMAGE',\r\n payload: {\r\n cropSettings: newCropSettings,\r\n editWithCropper: true,\r\n },\r\n });\r\n },\r\n [dispatchSiteConfig]\r\n );\r\n\r\n const setInactive = useCallback(() => setIsActive(false), []);\r\n\r\n const setInactiveOnClickOutside = useCallback(\r\n () => isActive && setInactive(),\r\n [isActive, setInactive]\r\n );\r\n\r\n useClickOutsideHandler(ref, setInactiveOnClickOutside);\r\n\r\n const contentStyle = selected && isActive\r\n ? classes.selectedContent\r\n : classes.content;\r\n\r\n const centerContainerProps = useMemo(\r\n () => (selected && isActive\r\n ? ({\r\n role: 'button',\r\n tabIndex: '0',\r\n onClick: preventEventPropagation,\r\n onKeyPress: preventEventPropagation,\r\n })\r\n : ({})),\r\n [isActive, selected]\r\n );\r\n\r\n return (\r\n \r\n {\r\n src &&\r\n
\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nUnStyledSmartCoverImageViewWithCropper.propTypes = {\r\n id: PropTypes.string.isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n classes: PropTypes.shape({}).isRequired,\r\n imageWidth: PropTypes.number,\r\n imageHeight: PropTypes.number,\r\n cropSettings: PropTypes.shape({}),\r\n\r\n // below two are exclusive, either by Id or Name\r\n imageId: PropTypes.string,\r\n imageName: PropTypes.string,\r\n isEditMode: PropTypes.bool,\r\n externalSrc: PropTypes.string,\r\n};\r\n\r\n\r\nUnStyledSmartCoverImageViewWithCropper.defaultProps = {\r\n imageId: null,\r\n imageName: null,\r\n imageWidth: null,\r\n imageHeight: null,\r\n cropSettings: null,\r\n isEditMode: false,\r\n externalSrc: null,\r\n};\r\n\r\nexport const SmartCoverImageViewWithCropper = withErrorView(withDefaultStyles(\r\n UnStyledSmartCoverImageViewWithCropper,\r\n getStyles\r\n), 'componentMode');\r\n","import { useState, useEffect } from 'react';\r\nimport { useSiteConfig } from '@bingads-webui-campaign-react/smart-page-context';\r\nimport { loadLocalImage } from '@bingads-webui-campaign-react/static-local-image-selector';\r\n\r\nexport const useLocalImage = (imageName) => {\r\n const [localImageSrc, setLocalImageSrc] = useState(null);\r\n const { dispatchSiteConfig } = useSiteConfig();\r\n\r\n useEffect(() => {\r\n if (imageName) {\r\n loadLocalImage(imageName)\r\n .then((src) => {\r\n setLocalImageSrc(src);\r\n dispatchSiteConfig({\r\n type: 'UPDATE_LOCAL_IMAGE_URL',\r\n payload: src,\r\n });\r\n });\r\n }\r\n }, [imageName, dispatchSiteConfig]);\r\n\r\n return localImageSrc;\r\n};\r\n","import { DefaultLocalImageName } from '@bingads-webui-campaign-react/static-local-image-selector';\r\n\r\nexport const proxyReadCoverComponentConfig = (componentConfig) => {\r\n const {\r\n imageId,\r\n imageName,\r\n imageWidth,\r\n imageHeight,\r\n cropSettings,\r\n fileName,\r\n editWithCropper,\r\n externalSrc,\r\n } = componentConfig;\r\n\r\n return {\r\n imageId,\r\n imageName: imageName || (imageId ? null : DefaultLocalImageName),\r\n imageWidth,\r\n imageHeight,\r\n cropSettings,\r\n fileName,\r\n editWithCropper,\r\n externalSrc,\r\n };\r\n};\r\n","import React, { useContext, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { getComponentById } from '@bingads-webui-campaign-react/smart-component-util';\r\nimport { useSiteConfig } from '@bingads-webui-campaign-react/smart-page-context';\r\n\r\nimport { SmartCoverImageViewWithCropper } from './smart-cover-image-view-with-cropper';\r\nimport { proxyReadCoverComponentConfig } from './component-config-reader';\r\n\r\nexport const SmartCoverImageConnector = ({ id, isEditMode }) => {\r\n const { siteConfig } = useSiteConfig();\r\n const i18n = useContext(I18nContext);\r\n const componentConfig = getComponentById(siteConfig, id);\r\n const {\r\n ...imageConfigs\r\n } = proxyReadCoverComponentConfig(componentConfig);\r\n\r\n return useMemo(\r\n () => (\r\n \r\n {i18n.getString(_TL_('Choose one image'))}\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nUnstyledSmartCoverImageEditor.propTypes = {\r\n classes: PropTypes.shape({}).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n componentId: PropTypes.string.isRequired,\r\n gotoSettings: PropTypes.func.isRequired,\r\n};\r\n\r\nexport const SmartCoverImageEditor = withDefaultStyles(\r\n UnstyledSmartCoverImageEditor,\r\n () => ({\r\n mobileStyle: {\r\n '@media (max-width: 600px)': {\r\n paddingRight: 15,\r\n },\r\n },\r\n })\r\n);\r\n","/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport React from 'react';\r\nimport classNames from 'classnames';\r\n\r\nimport { Link } from '@fluentui/react';\r\nimport { ImageFit } from '@fluentui/react/lib/Image';\r\nimport {\r\n ImageOptionsKey,\r\n SelectImagesListViewWithSearch,\r\n SmartImage,\r\n} from '@bingads-webui-campaign-react/smart-component-image';\r\n\r\nconst IMAGE_WIDTH = 210;\r\nconst IMAGE_HEIGHT = 175;\r\nconst PAGE_HEIGHT = 432;\r\n\r\nexport const getImageOptionsConfigForPivot = ({\r\n i18n,\r\n onStockImageItemSelectionChanged,\r\n defaultKeywords,\r\n enableFacebookImport,\r\n gotoSettings,\r\n classes,\r\n facebookImageInfo,\r\n}) => (\r\n {\r\n [ImageOptionsKey.DEFAULT]: {\r\n text: _TL_('Stock image'),\r\n onRenderItemLink: () => (\r\n \r\n {i18n.getString(_TL_('Cover image'))}\r\n
\r\n\r\n {i18n.getString(_TL_('Choose a cover image that represents your business. For the best appearance, we recommend using a high-resolution image of 1080 x 608 pixels.'))}\r\n
\r\n \r\n
\r\n \r\n
\r\n ),\r\n },\r\n [ImageOptionsKey.FACEBOOKIMPORT]: {\r\n text: _TL_('From Facebook'),\r\n onRenderItemLink: () => {\r\n let labelText = _TL_('Sync your Facebook Business Page with your Smart Page to use the same cover image.');\r\n let fbContent = (\r\n \r\n
\r\n );\r\n },\r\n },\r\n }\r\n);\r\n","import React, { useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nexport const SmartTextView = ({\r\n content,\r\n id,\r\n TagName,\r\n}) => useMemo(() => (\r\n {i18n.getString(labelText)}
\r\n\r\n {fbContent}\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nUnstyledSmartPhoneNumberEditor.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n classes: PropTypes.shape({}).isRequired,\r\n onPhoneNumberChange: PropTypes.func,\r\n onRenderLabel: PropTypes.func,\r\n initialCountryCode: PropTypes.string,\r\n label: PropTypes.string,\r\n dataSourceName: PropTypes.string,\r\n value: PropTypes.string,\r\n disabled: PropTypes.bool,\r\n errorMessage: PropTypes.string,\r\n ignoreInternalValidate: PropTypes.bool,\r\n};\r\n\r\nUnstyledSmartPhoneNumberEditor.defaultProps = {\r\n onPhoneNumberChange: _.noop,\r\n // This is used in differentiating US and CA\r\n // TODO: Use US for now. Need to store the countryCode in dataSource in next PR\r\n initialCountryCode: 'US',\r\n label: '',\r\n dataSourceName: null,\r\n value: '',\r\n disabled: false,\r\n errorMessage: '',\r\n ignoreInternalValidate: false,\r\n onRenderLabel: undefined,\r\n};\r\n\r\nUnstyledSmartPhoneNumberEditor.displayName = 'SmartPhoneNumberEditor';\r\n\r\nexport const SmartPhoneNumberEditor = withDefaultStyles(\r\n UnstyledSmartPhoneNumberEditor,\r\n getStyles\r\n);\r\n","import React, { useContext, useState, useEffect } from 'react';\r\nimport _ from 'underscore';\r\nimport PropTypes from 'prop-types';\r\nimport { Editor, GetContentMode } from 'roosterjs';\r\nimport classNames from 'classnames';\r\n\r\nimport { Label } from '@fluentui/react/lib/Label';\r\nimport { mobileDevice } from '@bingads-webui-campaign-react/mca-core';\r\nimport {\r\n SiteConfigContext,\r\n useDebouncedDispatchSiteConfig,\r\n} from '@bingads-webui-campaign-react/smart-page-context';\r\nimport {\r\n getDataSourceByKey,\r\n useDefaultEditorStyle,\r\n} from '@bingads-webui-campaign-react/smart-component-util';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { RibbonButtons, RichTextEditor } from '@bingads-webui-react/rich-text-editor';\r\nimport { withErrorView } from '@bingads-webui-campaign-react/smart-page-error-boundary';\r\nimport { validateText, TextErrorMap } from './text-helper';\r\n\r\n// Create a dangling div to calculate content length\r\nconst tmpDiv = document.createElement('div');\r\nconst editorForCharCount = new Editor(tmpDiv);\r\n\r\nconst ribbonButtons = [\r\n RibbonButtons.Bold,\r\n RibbonButtons.Italic,\r\n RibbonButtons.Underline,\r\n RibbonButtons.Bullet,\r\n RibbonButtons.Numbering,\r\n RibbonButtons.AlignLeft,\r\n RibbonButtons.AlignCenter,\r\n RibbonButtons.AlignRight,\r\n RibbonButtons.InsertHyperlink,\r\n RibbonButtons.RemoveHyperlink,\r\n RibbonButtons.Undo,\r\n RibbonButtons.Redo,\r\n RibbonButtons.RemoveFormatting,\r\n RibbonButtons.Clear,\r\n];\r\n\r\nexport const getRawTextFromRichText = (richText) => {\r\n editorForCharCount.setContent(richText);\r\n\r\n return editorForCharCount.getContent(GetContentMode.PlainText);\r\n};\r\n\r\nconst getStyles = () => ({\r\n charRemaining: {\r\n color: '#605e5c',\r\n fontSize: '12px',\r\n display: 'block',\r\n textAlign: 'right',\r\n },\r\n errorMessage: {\r\n color: '#a80000',\r\n fontSize: '12px',\r\n paddingTop: '5px',\r\n },\r\n rteContainer: {\r\n [mobileDevice]: {\r\n '& .rich-text-editor-wrapper': {\r\n minHeight: 180,\r\n },\r\n },\r\n },\r\n});\r\n\r\nconst sectionTitleLabelId = 'smart-rich-text-editor-label';\r\n\r\nconst UnstyledSmartRichTextEditor = (props) => {\r\n const {\r\n // below two fields are mutually exclusive (dataSourceName takes precedence)\r\n dataSourceName, value,\r\n\r\n classes,\r\n className,\r\n label,\r\n onChange,\r\n maxCharCount,\r\n placeholder,\r\n customErrorMap,\r\n isRequired,\r\n onValidate,\r\n } = props;\r\n const { sectionTitleClassName } = useDefaultEditorStyle();\r\n const [validatedResult, setValidatedResult] = useState({});\r\n\r\n const { siteConfig } = useContext(SiteConfigContext);\r\n const inputVal = getDataSourceByKey(siteConfig, dataSourceName, value, false) || '';\r\n const debouncedDispatchSiteConfig = useDebouncedDispatchSiteConfig();\r\n const i18n = useContext(I18nContext);\r\n\r\n const onChangeAction = (val) => {\r\n if (dataSourceName) {\r\n debouncedDispatchSiteConfig({\r\n type: 'UPDATE_DATASOURCE_BY_NAME',\r\n payload: {\r\n name: dataSourceName,\r\n value: val,\r\n },\r\n });\r\n }\r\n\r\n onChange({\r\n value: val,\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n const plainText = getRawTextFromRichText(inputVal);\r\n const validation = validateText(\r\n plainText,\r\n maxCharCount,\r\n i18n,\r\n undefined,\r\n isRequired,\r\n customErrorMap\r\n );\r\n\r\n onValidate(validation.errorMessage);\r\n setValidatedResult(validation);\r\n }, [customErrorMap, i18n, isRequired, inputVal, maxCharCount, onValidate]);\r\n\r\n return (\r\n \r\n {countryDropDown}\r\n
\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nUnstyledSmartRichTextEditor.propTypes = {\r\n classes: PropTypes.shape({}).isRequired,\r\n className: PropTypes.string,\r\n label: PropTypes.oneOfType([\r\n PropTypes.string,\r\n PropTypes.node,\r\n ]).isRequired,\r\n isRequired: PropTypes.bool,\r\n onChange: PropTypes.func,\r\n maxCharCount: PropTypes.number,\r\n dataSourceName: PropTypes.string,\r\n value: PropTypes.string,\r\n placeholder: PropTypes.string,\r\n onValidate: PropTypes.func,\r\n customErrorMap: PropTypes.shape({\r\n [TextErrorMap.MaxLength]: PropTypes.string,\r\n }),\r\n};\r\n\r\nconst emptyObj = {};\r\n\r\nUnstyledSmartRichTextEditor.defaultProps = {\r\n className: null,\r\n onChange: _.noop,\r\n maxCharCount: undefined,\r\n placeholder: undefined,\r\n\r\n // below two fields are mutually exclusive (dataSourceName takes precedence)\r\n dataSourceName: null,\r\n value: undefined,\r\n customErrorMap: emptyObj,\r\n isRequired: false,\r\n onValidate: _.noop,\r\n};\r\n\r\nexport const SmartRichTextEditor = withErrorView(withDefaultStyles(\r\n UnstyledSmartRichTextEditor,\r\n getStyles\r\n), 'componentMode');\r\n","import { number, string, shape } from 'prop-types';\r\n\r\nexport const professionalServicePropTypes = shape({\r\n name: string,\r\n price: number,\r\n description: string,\r\n});\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { isNumber } from 'underscore';\r\n\r\nimport { TooltipWrapper } from '@bingads-webui-campaign-react/smart-component-primitive';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { professionalServicePropTypes } from '../consts/prop-types';\r\n\r\nconst UnStyledSmartProfessionalServiceCard = ({\r\n item,\r\n classes,\r\n}) => {\r\n const {\r\n name,\r\n price,\r\n description,\r\n } = item;\r\n\r\n return (\r\n \r\n
\r\n {validatedResult.charRemainingDescription}\r\n \r\n {validatedResult.errorMessage}\r\n
\r\n \r\n {name}\r\n {\r\n isNumber(price) && {`$${price.toLocaleString('en-US')}`}\r\n }\r\n {\r\n description &&\r\n \r\n \r\n {description}\r\n \r\n \r\n }\r\n
\r\n );\r\n};\r\n\r\nUnStyledSmartProfessionalServiceCard.propTypes = {\r\n item: professionalServicePropTypes.isRequired,\r\n classes: PropTypes.shape({}).isRequired,\r\n};\r\n\r\nexport const SmartProfessionalServiceCard = withDefaultStyles(\r\n UnStyledSmartProfessionalServiceCard,\r\n (_, { palette = {} }) => ({\r\n container: {\r\n height: '275px',\r\n width: '340px',\r\n position: 'relative',\r\n padding: '20px 13px 40px',\r\n margin: '0px 15px 50px',\r\n boxShadow: '0px 1.6px 3.6px rgba(0, 0, 0, 0.132), 0px 0.3px 0.9px rgba(0, 0, 0, 0.108)',\r\n borderRadius: 2,\r\n background: palette.cardBackground,\r\n display: 'flex',\r\n flexDirection: 'column',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n lineHeight: '20px',\r\n textAlign: 'center',\r\n fontSize: '16px',\r\n wordBreak: 'break-word',\r\n color: palette.secondaryText,\r\n },\r\n name: {\r\n fontWeight: 'bold',\r\n fontSize: '24px',\r\n marginBottom: '15px',\r\n lineHeight: '24px',\r\n },\r\n price: {\r\n marginBottom: '15px',\r\n },\r\n description: {\r\n marginBottom: '30px',\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n display: '-webkit-box',\r\n WebkitBoxOrient: 'vertical',\r\n WebkitLineClamp: 6,\r\n },\r\n })\r\n);\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\n\r\nimport { ItemCarousel } from '@bingads-webui-campaign-react/smart-component-card';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { useClientContext, useI18n } from '@bingads-webui-campaign-react/smart-page-context';\r\nimport { withErrorView } from '@bingads-webui-campaign-react/smart-page-error-boundary';\r\nimport { professionalServicePropTypes } from './consts/prop-types';\r\nimport { SmartProfessionalServiceCard } from './components/professional-service-card';\r\n\r\nconst UnStyledSmartProfessionalServiceView = ({\r\n classes,\r\n id,\r\n services,\r\n}) => {\r\n const { isMobile, responsiveMode } = useClientContext();\r\n const i18n = useI18n();\r\n\r\n return (\r\n \r\n {i18n.getString(_TL_('Services'))}\r\n
\r\n\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nProfessionalServiceForm.propTypes = {\r\n onValidate: func.isRequired,\r\n defaultValue: professionalServicePropTypes,\r\n existingServiceNames: arrayOf(string),\r\n};\r\n\r\nProfessionalServiceForm.defaultProps = {\r\n existingServiceNames: [],\r\n defaultValue: {},\r\n};\r\n","import React, { useState, useMemo, useCallback, useRef } from 'react';\r\nimport { func, arrayOf, number } from 'prop-types';\r\nimport { compact } from 'underscore';\r\n\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { Dialog, DialogType, DialogFooter } from '@fluentui/react/lib/Dialog';\r\nimport { PrimaryButton, DefaultButton } from '@fluentui/react/lib/Button';\r\nimport { useI18n } from '@bingads-webui-campaign-react/smart-page-context';\r\n\r\nimport { ProfessionalServiceForm } from './professional-service-form';\r\nimport { professionalServicePropTypes } from '../consts/prop-types';\r\n\r\nconst UnstyledAddProfessionalServiceDialog = ({\r\n onAdd,\r\n onCancel,\r\n editingIndex,\r\n services,\r\n}) => {\r\n const i18n = useI18n();\r\n\r\n const editing = editingIndex > -1;\r\n const servicesRef = useRef(services);\r\n const [formData, setFormData] = useState(services[editingIndex]);\r\n const [isValid, setIsValid] = useState(false);\r\n\r\n const dialogContentProps = useMemo(() => ({\r\n type: DialogType.close,\r\n title: i18n.getString(editing ? _TL_('Update a service') : _TL_('Add a new service offered')),\r\n closeButtonAriaLabel: i18n.getString(_TL_('Close')),\r\n }), [i18n, editing]);\r\n\r\n const onFormValidate = useCallback((res) => {\r\n setFormData(res.data);\r\n setIsValid(res.isValid);\r\n }, []);\r\n\r\n const onFormAdd = useCallback(() => {\r\n const { name } = formData;\r\n onAdd({ ...formData, name: name.trim() });\r\n }, [formData, onAdd]);\r\n\r\n const existingServiceNames = useMemo(() => {\r\n servicesRef.current[editingIndex] = undefined;\r\n return compact(servicesRef.current).map(s => s.name.toLowerCase());\r\n }, [editingIndex, servicesRef]);\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nUnStyledSmartProfessionalServiceEditorItemView.propTypes = {\r\n classes: shape({}).isRequired,\r\n item: professionalServicePropTypes.isRequired,\r\n i18n: shape({}).isRequired,\r\n};\r\n\r\nexport const SmartProfessionalServiceEditorItemView = withDefaultStyles(\r\n UnStyledSmartProfessionalServiceEditorItemView,\r\n () => ({\r\n container: {\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n position: 'relative',\r\n width: '100%',\r\n wordBreak: 'break-word',\r\n },\r\n contentContainer: {\r\n height: '100%',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n justifyContent: 'space-evenly',\r\n fontSize: '14px',\r\n },\r\n serviceName: {\r\n fontWeight: 'bold',\r\n fontSize: '16px',\r\n marginBottom: '3px',\r\n },\r\n servicePrice: {\r\n color: '#797775',\r\n fontWeight: 600,\r\n marginBottom: '3px',\r\n },\r\n serviceDescription: {\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n display: '-webkit-box',\r\n WebkitBoxOrient: 'vertical',\r\n WebkitLineClamp: 2,\r\n },\r\n })\r\n);\r\n","import React, { useCallback, useMemo } from 'react';\r\nimport { arrayOf, func, shape } from 'prop-types';\r\nimport { isEmpty, map } from 'underscore';\r\nimport classnames from 'classnames';\r\n\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { useI18n } from '@bingads-webui-campaign-react/smart-page-context';\r\nimport { useDefaultEditorStyle } from '@bingads-webui-campaign-react/smart-component-util';\r\nimport { MessageBar } from '@fluentui/react/lib/MessageBar';\r\nimport { ItemPicker } from '@bingads-webui-campaign-react/smart-component-card';\r\n\r\nimport { professionalServicePropTypes } from '../consts/prop-types';\r\nimport { SmartProfessionalServiceEditorItemView } from './professional-service-editor-item-view';\r\n\r\nconst UnStyledSmartProfessionalServiceEditorItemList = ({\r\n classes,\r\n onEdit,\r\n onDelete,\r\n services,\r\n}) => {\r\n const i18n = useI18n();\r\n const { infoMessageBarClassName } = useDefaultEditorStyle();\r\n\r\n const servicesInternal = useMemo(() => map(services, s => ({ ...s, id: s.name })), [services]);\r\n const getDeleteAriaLabel = useCallback((i, item) => i18n.getString(_TL_('Delete service {{name}}'), { name: item.name }), [i18n]);\r\n const getEditAriaLabel = useCallback((i, item) => i18n.getString(_TL_('Edit service {{name}}'), { name: item.name }), [i18n]);\r\n\r\n return (\r\n \r\n \r\n {name}\r\n \r\n {\r\n isNumber(price) &&\r\n \r\n {`${i18n.getString(_TL_('Price'))}: $${price.toLocaleString('en-US')}`}\r\n \r\n }\r\n {\r\n description &&\r\n \r\n \r\n {description}\r\n \r\n \r\n }\r\n
\r\n \r\n {\r\n !isEmpty(services)\r\n ? \r\n {i18n.getString(_TL_('You don\\'t have any existing services. Please add one.'))}\r\n \r\n }\r\n
\r\n );\r\n};\r\n\r\nUnStyledSmartProfessionalServiceEditorItemList.propTypes = {\r\n classes: shape({}).isRequired,\r\n onEdit: func.isRequired,\r\n onDelete: func.isRequired,\r\n services: arrayOf(professionalServicePropTypes),\r\n};\r\n\r\nUnStyledSmartProfessionalServiceEditorItemList.defaultProps = {\r\n services: [],\r\n};\r\n\r\nexport const SmartProfessionalServiceEditorItemList = withDefaultStyles(\r\n UnStyledSmartProfessionalServiceEditorItemList,\r\n (_c, { palette = {} }) => ({\r\n iconContainer: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n color: palette.themeDarkAlt,\r\n opacity: '0.95',\r\n },\r\n iconButton: {\r\n background: 'rgba(255, 255, 255, 0.83)',\r\n border: '1px solid black',\r\n width: 32,\r\n height: 32,\r\n minWidth: 32,\r\n borderRadius: 99,\r\n cursor: 'pointer',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n\r\n // Hide the default chevron for menu\r\n '& span i:not(:first-child)': {\r\n display: 'none',\r\n },\r\n },\r\n noData: {\r\n background: '#F3F2F0',\r\n padding: '24px 5px',\r\n },\r\n })\r\n);\r\n","import React, { useCallback, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\n\r\nimport {\r\n useDefaultEditorStyle,\r\n WEBSITE_SOURCE_DATA_KEY_MAPPING,\r\n} from '@bingads-webui-campaign-react/smart-component-util';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { ActionButton } from '@fluentui/react/lib/Button';\r\nimport { useI18n, useSiteConfig } from '@bingads-webui-campaign-react/smart-page-context';\r\n\r\nimport { AddProfessionalServiceDialog } from './components/add-professional-service-dialog';\r\nimport { proxyReadProfessionalServicesComponentConfig } from './component-config-reader';\r\nimport { covertConfigToModel } from './data-config';\r\nimport { SmartProfessionalServiceEditorItemList } from './components/professional-service-editor-item-list';\r\n\r\nconst componentKey = WEBSITE_SOURCE_DATA_KEY_MAPPING.Services;\r\nconst MaxCount = 12;\r\n\r\nexport const UnStyledSmartProfessionalServiceEditor = ({\r\n classes,\r\n}) => {\r\n const i18n = useI18n();\r\n const [showDialog, setShowDialog] = useState(false);\r\n const { siteConfig, dispatchSiteConfig } = useSiteConfig();\r\n const [editingIndex, setEditingIndex] = useState(-1);\r\n\r\n const {\r\n titleClassName,\r\n descriptionClassName,\r\n } = useDefaultEditorStyle();\r\n\r\n const services = proxyReadProfessionalServicesComponentConfig(siteConfig);\r\n\r\n const toggleDialog = useCallback((show) => {\r\n setShowDialog(show);\r\n if (!show) {\r\n setEditingIndex(-1);\r\n }\r\n }, []);\r\n\r\n const updateServices = useCallback((newServices) => {\r\n dispatchSiteConfig({\r\n type: 'UPDATE_WEBSITESOURCEDATA_BY_NAME',\r\n payload: {\r\n name: componentKey,\r\n value: newServices.map(covertConfigToModel),\r\n },\r\n });\r\n }, [dispatchSiteConfig]);\r\n\r\n const onAdd = useCallback((newService) => {\r\n const newServices = [...services];\r\n\r\n if (editingIndex > -1) {\r\n newServices[editingIndex] = newService;\r\n } else {\r\n newServices.push(newService);\r\n }\r\n\r\n updateServices(newServices);\r\n toggleDialog(false);\r\n }, [updateServices, services, toggleDialog, editingIndex]);\r\n\r\n const onDelete = useCallback((index) => {\r\n const newServices = [...services];\r\n newServices.splice(index, 1);\r\n updateServices(newServices);\r\n }, [services, updateServices]);\r\n\r\n const onEdit = useCallback((index) => {\r\n setEditingIndex(index);\r\n toggleDialog(true);\r\n }, [toggleDialog]);\r\n\r\n return (\r\n \r\n toggleDialog(false)}\r\n services={services}\r\n editingIndex={editingIndex}\r\n />\r\n }\r\n
\r\n );\r\n};\r\n\r\nUnStyledSmartProfessionalServiceEditor.propTypes = {\r\n classes: PropTypes.shape({}).isRequired,\r\n};\r\n\r\nexport const SmartProfessionalServiceEditor = withDefaultStyles(\r\n UnStyledSmartProfessionalServiceEditor,\r\n () => ({\r\n listLabelContainer: {\r\n display: 'flex',\r\n },\r\n addBtn: {\r\n marginLeft: 'auto',\r\n marginRight: '12px',\r\n height: '25px',\r\n '&:enabled': {\r\n color: '#0063B1',\r\n },\r\n },\r\n })\r\n);\r\n","import React, { useCallback } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\nimport { DefaultButton } from '@fluentui/react';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { withErrorView } from '@bingads-webui-campaign-react/smart-page-error-boundary';\r\nimport { getLandingPageUrl } from '@bingads-webui-campaign-react/smart-page-util';\r\n\r\nconst getStyles = () => ({\r\n bannerContainer: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n width: '100%',\r\n height: 60,\r\n background: 'linear-gradient(102.36deg, #0A1B45 0%, #0A1B45 17.63%, rgba(27, 62, 115, 0.882169) 63.53%, rgba(43, 88, 156, 0.775808) 96.63%), #0A1B45',\r\n fontFamily: 'Segoe UI',\r\n },\r\n\r\n content: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n },\r\n\r\n text: {\r\n marginRight: 52,\r\n height: 26,\r\n fontSize: 16,\r\n color: '#FFF',\r\n },\r\n\r\n strongFont: {\r\n fontWeight: 'bold',\r\n },\r\n\r\n mobileBannerContainer: {\r\n height: 90,\r\n\r\n '& $content': {\r\n flexDirection: 'column',\r\n justifyContent: 'center',\r\n },\r\n\r\n '& $text': {\r\n marginRight: 0,\r\n fontSize: 14,\r\n },\r\n\r\n '& button': {\r\n marginTop: 5,\r\n fontSize: 12,\r\n },\r\n },\r\n});\r\n\r\nconst buttonStyles = {\r\n root: {\r\n background: 'transparent',\r\n fontSize: 14,\r\n lineHeight: 20,\r\n border: '1px solid #FFF',\r\n color: '#FFF',\r\n },\r\n rootHovered: {\r\n background: 'transparent',\r\n color: '#FFF',\r\n },\r\n rootPressed: {\r\n background: 'transparent',\r\n color: '#FFF',\r\n },\r\n};\r\n\r\nexport const UnStyledSmartBannerView = ({\r\n classes,\r\n i18n,\r\n isMobile,\r\n customedContent,\r\n}) => {\r\n const bannerContainerClasses = classnames({\r\n [classes.bannerContainer]: true,\r\n [classes.mobileBannerContainer]: isMobile,\r\n });\r\n\r\n const onClickButton = useCallback(() => {\r\n const landingPageUrl = getLandingPageUrl(document.domain, { source: 'm365banner' });\r\n\r\n window.open(landingPageUrl);\r\n }, []);\r\n\r\n return (\r\n \r\n {i18n.getString(_TL_('Services'))}\r\n
\r\n\r\n {i18n.getString(_TL_('This section is where you\\'ll display the different services your business offers (maximum 12 services).'))}\r\n
\r\n \r\n
\r\n {\r\n showDialog &&\r\n \r\n toggleDialog(true)}\r\n disabled={services && services.length >= MaxCount}\r\n >\r\n {i18n.getString(_TL_('+ Add service'))}\r\n \r\n
\r\n \r\n {\r\n customedContent || (\r\n
\r\n );\r\n};\r\n\r\nUnStyledSmartBannerView.propTypes = {\r\n classes: PropTypes.shape({\r\n bannerContainer: PropTypes.string.isRequired,\r\n mobileBannerContainer: PropTypes.string.isRequired,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }),\r\n isMobile: PropTypes.bool.isRequired,\r\n customedContent: PropTypes.element,\r\n};\r\n\r\nUnStyledSmartBannerView.defaultProps = {\r\n i18n: {\r\n getString: key => key,\r\n },\r\n customedContent: null,\r\n};\r\n\r\nexport const SmartBannerView = withErrorView(withDefaultStyles(\r\n UnStyledSmartBannerView,\r\n getStyles\r\n), 'componentMode');\r\n","import React, { useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { useClientContext, useIsSmartPageM365BannerEnabled, useIsM365Premium } from '@bingads-webui-campaign-react/smart-page-context';\r\n\r\nimport { SmartBannerView } from './smart-banner-view';\r\n\r\nexport const SmartBannerConnector = ({ customedContent }) => {\r\n const i18n = useContext(I18nContext);\r\n const { isMobile } = useClientContext();\r\n const isSmartPageM365BannerEnabled = useIsSmartPageM365BannerEnabled();\r\n const isM365Premium = useIsM365Premium();\r\n\r\n if (isSmartPageM365BannerEnabled && !isM365Premium) {\r\n return (\r\n \r\n
\r\n )\r\n }\r\n \r\n \r\n {i18n.getString(_TL_('This website is powered by'))} \r\n Microsoft Advertising\r\n \r\n
\r\n \r\n {\r\n isMultiple\r\n ?
\r\n }\r\n \r\n );\r\n};\r\n\r\nUnStyledSelectableItemView.propTypes = {\r\n classes: PropTypes.shape({\r\n item: PropTypes.string.isRequired,\r\n }).isRequired,\r\n item: PropTypes.objectOf(PropTypes.any).isRequired,\r\n className: PropTypes.string,\r\n unSelectedClassName: PropTypes.string,\r\n width: PropTypes.number,\r\n height: PropTypes.number,\r\n onRenderItem: PropTypes.func.isRequired,\r\n onChange: PropTypes.func,\r\n selectable: PropTypes.bool,\r\n disabled: PropTypes.bool,\r\n selected: PropTypes.bool,\r\n ariaLabel: PropTypes.string,\r\n isMultiple: PropTypes.bool,\r\n};\r\n\r\nUnStyledSelectableItemView.defaultProps = {\r\n selectable: false,\r\n selected: false,\r\n onChange: noop,\r\n width: undefined,\r\n height: undefined,\r\n className: undefined,\r\n unSelectedClassName: undefined,\r\n ariaLabel: null,\r\n isMultiple: true,\r\n disabled: false,\r\n};\r\n\r\nexport const SelectableItemView = withDefaultStyles(\r\n UnStyledSelectableItemView,\r\n getStyles\r\n);\r\n","import _ from 'underscore';\r\nimport React, { useCallback, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\n\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { IconButton } from '@fluentui/react/lib/Button';\r\nimport { Dropdown } from '@fluentui/react/lib/Dropdown';\r\nimport { curlyTemplate } from '@bingads-webui-universal/primitive-utilities';\r\n\r\nconst getStyles = () => {\r\n const pagerIcon = {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n justifyContent: 'center',\r\n background: '#FFFFFF',\r\n padding: '27px 0',\r\n };\r\n\r\n const pageNavigationButton = {\r\n background: 'transparent',\r\n };\r\n\r\n const pageNumber = {\r\n fontStyle: 'normal',\r\n fontWeight: 'normal',\r\n fontSize: '12px',\r\n lineHeight: '32px',\r\n color: '#323130',\r\n alignItems: 'center',\r\n display: 'flex',\r\n };\r\n\r\n const totalPageNumber = {\r\n marginLeft: 8,\r\n };\r\n\r\n return {\r\n pagerIcon,\r\n pageNavigationButton,\r\n pageNumber,\r\n totalPageNumber,\r\n };\r\n};\r\n\r\nconst PageNavigationFooterUnstyled = (props) => {\r\n const {\r\n pageIndex,\r\n totalPageNumber,\r\n onNextPageClick,\r\n onPreviousPageClick,\r\n onRandomPageSelect,\r\n classes,\r\n i18n,\r\n } = props;\r\n\r\n const nextPageHandler = useCallback(() => {\r\n if (onNextPageClick) {\r\n onNextPageClick();\r\n }\r\n }, [onNextPageClick]);\r\n\r\n const previousPageHandler = useCallback(() => {\r\n if (onPreviousPageClick) {\r\n onPreviousPageClick();\r\n }\r\n }, [onPreviousPageClick]);\r\n\r\n const randomPagingHandler = useCallback((evt, item) => {\r\n if (onRandomPageSelect) {\r\n onRandomPageSelect(item.key - 1);\r\n }\r\n }, [onRandomPageSelect]);\r\n\r\n const firstPageHandler = useCallback(() => {\r\n if (onRandomPageSelect) {\r\n onRandomPageSelect(0);\r\n }\r\n }, [onRandomPageSelect]);\r\n\r\n const lastPageHandler = useCallback(() => {\r\n if (onRandomPageSelect) {\r\n onRandomPageSelect(totalPageNumber - 1);\r\n }\r\n }, [onRandomPageSelect, totalPageNumber]);\r\n\r\n const pageIndexContent = useMemo(() => (\r\n curlyTemplate('of {{totalPageNumber}}')({ totalPageNumber })\r\n ), [totalPageNumber]);\r\n\r\n const dropdownOptions = useMemo(() => {\r\n const options = [];\r\n\r\n for (let index = 1; index <= totalPageNumber; index += 1) {\r\n options.push({ key: index, text: index });\r\n }\r\n\r\n return options;\r\n }, [totalPageNumber]);\r\n\r\n return (\r\n \r\n
\r\n);\r\n\r\nUnstyledLoading.defaultProps = {\r\n classes: {},\r\n className: null,\r\n label: '',\r\n size: SpinnerSize.large,\r\n};\r\n\r\nUnstyledLoading.propTypes = {\r\n classes: objectOf(any),\r\n className: string,\r\n label: string,\r\n size: number,\r\n};\r\n\r\nexport const Loading = withDefaultStyles(UnstyledLoading, () => ({\r\n loading: {\r\n width: '100%',\r\n height: '100%',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n backgroundColor: 'white',\r\n },\r\n}));\r\n","/* eslint-disable jsx-a11y/click-events-have-key-events */\r\n/* eslint-disable jsx-a11y/no-static-element-interactions */\r\nimport React, { useCallback, useEffect, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { isEmpty } from 'underscore';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { submitEvent } from '@bingads-webui-universal/accessibility-helper';\r\n\r\nconst getStyles = () => ({\r\n container: {\r\n '& .selected': {\r\n backgroundColor: '#0078D4',\r\n color: 'white',\r\n border: '1px solid #0078D4',\r\n\r\n '@media (forced-colors: active)': {\r\n borderColor: 'highlight',\r\n forcedColorAdjust: 'none',\r\n background: 'highlight',\r\n color: 'black',\r\n },\r\n },\r\n },\r\n item: {\r\n display: 'inline-block',\r\n boxSizing: 'border-box',\r\n textAlign: 'center',\r\n width: 80,\r\n height: 30,\r\n lineHeight: '28px',\r\n border: '1px solid #868686',\r\n borderRadius: 3,\r\n marginRight: 9,\r\n marginBottom: 9,\r\n fontSize: 14,\r\n\r\n '&:hover': {\r\n cursor: 'pointer',\r\n },\r\n },\r\n});\r\n\r\nconst UstyledRadioButton = ({\r\n classes,\r\n emptyLabel,\r\n options,\r\n // Do not use below two props at the same\r\n defaultSelectedItem,\r\n selectedItem,\r\n onSelectItem,\r\n className,\r\n ariaDescribedBy,\r\n}) => {\r\n // Maintain internal state and thus support both controlled and uncontrolled component.\r\n const [\r\n internalSelectedItem,\r\n setInternalSelectedItem,\r\n ] = useState(defaultSelectedItem || selectedItem);\r\n\r\n const onClickOption = useCallback((option) => {\r\n setInternalSelectedItem(option);\r\n onSelectItem(option);\r\n }, [onSelectItem]);\r\n\r\n useEffect(() => {\r\n if (selectedItem && internalSelectedItem.key !== selectedItem.key) {\r\n setInternalSelectedItem(selectedItem);\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [selectedItem]);\r\n\r\n return (\r\n \r\n {\r\n isEmpty(options)\r\n ? emptyLabel\r\n : options.map(option => (\r\n onClickOption(option)}\r\n onKeyDown={e => submitEvent(onClickOption)(e, option)}\r\n aria-pressed={option.key === internalSelectedItem.key}\r\n aria-describedby={ariaDescribedBy}\r\n >\r\n {option.text}\r\n \r\n ))\r\n }\r\n
\r\n );\r\n};\r\n\r\nUstyledRadioButton.propTypes = {\r\n classes: PropTypes.shape({\r\n container: PropTypes.string.isRequired,\r\n }).isRequired,\r\n emptyLabel: PropTypes.string,\r\n options: PropTypes.arrayOf(PropTypes.shape({\r\n key: PropTypes.string.isRequired,\r\n text: PropTypes.string.isRequired,\r\n })).isRequired,\r\n selectedItem: PropTypes.shape({\r\n key: PropTypes.string,\r\n text: PropTypes.string,\r\n }),\r\n defaultSelectedItem: PropTypes.shape({\r\n key: PropTypes.string,\r\n text: PropTypes.string,\r\n }),\r\n onSelectItem: PropTypes.func,\r\n className: PropTypes.string,\r\n ariaDescribedBy: PropTypes.string.isRequired,\r\n};\r\n\r\nUstyledRadioButton.defaultProps = {\r\n selectedItem: {\r\n key: null,\r\n text: null,\r\n },\r\n emptyLabel: '',\r\n defaultSelectedItem: null,\r\n onSelectItem: () => { },\r\n className: '',\r\n};\r\n\r\nexport const RadioButton = React.memo(withDefaultStyles(\r\n UstyledRadioButton,\r\n getStyles\r\n));\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nexport const StepHandlerContext = React.createContext([]);\r\nexport const useStepHandlerContext = () => React.useContext(StepHandlerContext);\r\n\r\nexport const StepHandlerContextProvider = (props) => {\r\n const { children, stepHandlers } = props;\r\n\r\n return (\r\n \r\n {renderPageHeader()}\r\n
\r\n \r\n {children}\r\n
\r\n \r\n );\r\n};\r\n\r\nStepCardBaseContainer.propTypes = {\r\n children: PropTypes.oneOfType([\r\n PropTypes.node,\r\n PropTypes.arrayOf(PropTypes.node),\r\n ]).isRequired,\r\n className: PropTypes.string,\r\n title: PropTypes.string,\r\n description: PropTypes.string,\r\n};\r\n\r\nStepCardBaseContainer.defaultProps = {\r\n className: '',\r\n title: '',\r\n description: '',\r\n};\r\n","import { isProdEnvironment } from '@bingads-webui-campaign-react/smart-page-util';\r\n\r\nconst isProdEnv = isProdEnvironment(document.domain);\r\n\r\nconst prodAppId = 'c97b71c8-e958-4ec9-a302-053aabc9890c';\r\nconst prodClientAppId = 'b024b9dc-dd00-4ebf-8f6c-84d7bd100853';\r\nconst prodAuthority = 'https://login.windows.net/common';\r\n\r\nconst testAppId = 'd203d5bc-88db-444a-9851-9e49d47cbf58';\r\nconst testClientAppId = '2b5ff9fc-fdc3-4d2d-a63a-13f62ce897dc';\r\nconst testAuthority = 'https://login.windows-ppe.net/common';\r\n\r\n/**\r\n * Configuration object to be passed to MSAL instance on creation.\r\n * For a full list of MSAL.js configuration parameters, visit:\r\n * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md\r\n */\r\nexport const msalConfig = {\r\n auth: {\r\n clientId: isProdEnv ? prodClientAppId : testClientAppId,\r\n authority: isProdEnv ? prodAuthority : testAuthority,\r\n },\r\n cache: {\r\n cacheLocation: 'sessionStorage', // This configures where your cache will be stored\r\n storeAuthStateInCookie: false, // Set this to \"true\" if you are having issues on IE11 or Edge\r\n },\r\n system: {\r\n pollIntervalMilliseconds: 15,\r\n },\r\n};\r\n\r\n/**\r\n * Scopes you add here will be prompted for user consent during sign-in.\r\n * By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.\r\n * For more information about OIDC scopes, visit:\r\n * https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes\r\n */\r\nexport const customDomainLoginRequest = {\r\n scopes: [\r\n `api://${isProdEnv ? prodAppId : testAppId}/User.Write`,\r\n ],\r\n};\r\n","import { useCallback, useContext } from 'react';\r\nimport _ from 'underscore';\r\n\r\nimport { PublicClientApplication } from '@azure/msal-browser';\r\nimport { InstrumentationServiceContext } from '@bingads-webui-campaign-react/smart-page-context';\r\n\r\nimport { msalConfig, customDomainLoginRequest } from './config';\r\n\r\nconst msalInstance = new PublicClientApplication(msalConfig);\r\n\r\nexport const useMsal = () => {\r\n const logger = useContext(InstrumentationServiceContext);\r\n\r\n const onLogin = useCallback((cb) => {\r\n msalInstance.loginPopup(customDomainLoginRequest)\r\n .then(res => _.isFunction(cb) && cb(res))\r\n .catch((err) => {\r\n if (err && err.errorCode !== 'user_cancelled') {\r\n logger.logError(err);\r\n }\r\n });\r\n }, [logger]);\r\n\r\n const onLogout = useCallback((cb) => {\r\n msalInstance.logoutPopup().then(() => _.isFunction(cb) && cb());\r\n }, []);\r\n\r\n return {\r\n onLogin,\r\n onLogout,\r\n };\r\n};\r\n","import React, { useEffect, useState, createContext, useContext } from 'react';\r\nimport _ from 'underscore';\r\nimport { node } from 'prop-types';\r\n\r\nimport { useGetCouponDetails } from '@bingads-webui/overreact-cc';\r\nimport { useCustomerLevelVariables, usePostponeReadVariables } from '@bingads-webui-campaign-react/basic-context-utils';\r\nimport { isProdEnvironment } from '@bingads-webui-campaign-react/smart-page-util';\r\nimport { UpSignupWizardCouponClassForNonProd, HasDateExpiredInPST } from '@bingads-webui-campaign-react/mca-core';\r\nimport { useIsDraftOrPendingAccount } from '@bingads-webui-campaign-react/smart-page-context';\r\n\r\nconst VALID_COUPON_CLASS_PROD = 'AENOTINCSPUPQ422US100';\r\n\r\nexport const COUPON_CLASS = isProdEnvironment(document.domain)\r\n ? VALID_COUPON_CLASS_PROD\r\n // Use for SI test to get coupon message displayed\r\n : UpSignupWizardCouponClassForNonProd;\r\n\r\nfunction useCouponDetail() {\r\n const [validCouponDetails, setValidCouponDetails] = useState(null);\r\n const isDraftOfPendingAccount = useIsDraftOrPendingAccount();\r\n const customerLevelVariables = useCustomerLevelVariables();\r\n const postponeReadConfig = usePostponeReadVariables();\r\n\r\n const [{ data: couponDetails, error: couponError }, { read: getCouponDetails }]\r\n = useGetCouponDetails(customerLevelVariables, postponeReadConfig);\r\n\r\n useEffect(() => {\r\n if (isDraftOfPendingAccount && !couponDetails && !couponError) {\r\n getCouponDetails({ variables: { ccl: COUPON_CLASS } });\r\n }\r\n }, [isDraftOfPendingAccount, couponDetails, couponError, getCouponDetails]);\r\n\r\n useEffect(() => {\r\n if (_.isArray(couponDetails) && couponDetails.length > 0 && couponDetails[0].CouponDetails) {\r\n const couponDetail = couponDetails[0].CouponDetails;\r\n if (!HasDateExpiredInPST(couponDetail.ExpiryDate)) {\r\n setValidCouponDetails(couponDetail);\r\n }\r\n }\r\n }, [couponDetails]);\r\n\r\n return {\r\n couponDetails: validCouponDetails,\r\n };\r\n}\r\n\r\nconst CouponDetailContext = createContext();\r\nexport const useCouponDetailContext = () => useContext(CouponDetailContext);\r\n\r\nexport function CouponDetailProvider({ children }) {\r\n const { couponDetails } = useCouponDetail();\r\n\r\n return (\r\n {i18n.getString(_TL_('Closed'))}
\r\n );\r\n }\r\n\r\n const slotElements = sortTimeSlots(timeSlots).map((timeSlot) => {\r\n const str = getTimeSpanString(timeSlot, i18n);\r\n return (\r\n \r\n {getDayName(day, i18n)}\r\n
\r\n \r\n
\r\n \r\n {\r\n !hideTitle &&\r\n
\r\n );\r\n};\r\n\r\nUnStyledSmartBusinessHoursView.propTypes = {\r\n id: PropTypes.string.isRequired,\r\n hours: PropTypes.arrayOf(PropTypes.shape({\r\n day: PropTypes.string.isRequired,\r\n timeSlots: PropTypes.arrayOf(PropTypes.object),\r\n })).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n classes: PropTypes.shape({\r\n actionButton: PropTypes.string,\r\n }).isRequired,\r\n hideTitle: PropTypes.bool,\r\n};\r\n\r\nUnStyledSmartBusinessHoursView.defaultProps = {\r\n hideTitle: false,\r\n};\r\n\r\nexport const SmartBusinessHoursView = withDefaultStyles(\r\n UnStyledSmartBusinessHoursView,\r\n getStyles\r\n);\r\n","import _ from 'underscore';\r\nimport {\r\n getComponentById,\r\n DATA_SOURCE_KEY_MAPPING,\r\n getDataSourceByKey,\r\n getDefaultHoursConfig,\r\n} from '@bingads-webui-campaign-react/smart-component-util';\r\n\r\n// to support saved siteConfig with hours in dataSource\r\n// read component config for businessHours first\r\n// then fallback to read from dataSource key\r\n// then fallback to default hours\r\nexport const proxyReadHoursConfig = (siteConfig, id) => {\r\n const componentConfig = getComponentById(siteConfig, id);\r\n const defaultHours = getDefaultHoursConfig();\r\n const cmpHours = _.propertyOf(componentConfig)(DATA_SOURCE_KEY_MAPPING.BusinessHours);\r\n const dsHours = getDataSourceByKey(siteConfig, DATA_SOURCE_KEY_MAPPING.BusinessHours);\r\n\r\n let hours = defaultHours;\r\n if (!_.isEmpty(cmpHours)) {\r\n hours = cmpHours;\r\n } else if (!_.isEmpty(dsHours)) {\r\n hours = dsHours;\r\n }\r\n\r\n return {\r\n fromDs: !_.isEmpty(dsHours),\r\n hours,\r\n };\r\n};\r\n","import React, { useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { SiteConfigContext } from '@bingads-webui-campaign-react/smart-page-context';\r\nimport { SmartBusinessHoursView } from './smart-hours-view';\r\nimport { proxyReadHoursConfig } from './proxy-read-hours-config';\r\n\r\nexport const SmartBusinessHoursConnector = ({\r\n id,\r\n hideTitle,\r\n}) => {\r\n const { siteConfig } = useContext(SiteConfigContext);\r\n const i18n = useContext(I18nContext);\r\n const { hours } = proxyReadHoursConfig(siteConfig, id);\r\n\r\n return (\r\n \r\n {i18n.getString(_TL_('Business hours'))}\r\n
\r\n }\r\n \r\n {rows}\r\n
\r\n \r\n {\r\n timeSlots.map(timeSlot => (\r\n 1}\r\n index={timeSlot.index}\r\n open={{ hour: timeSlot.openHour, minute: timeSlot.openMinute }}\r\n close={{ hour: timeSlot.closeHour, minute: timeSlot.closeMinute }}\r\n onChange={onTimeSlotChange}\r\n onRemove={onRemove}\r\n currentDay={currentDayLabel}\r\n isCheckAllDay={isCheckAllDay}\r\n timeSpan={timeSpan}\r\n />\r\n ))\r\n }\r\n {\r\n showError && (\r\n
\r\n ), [\r\n classes.error, classes.timeRangeList, currentDayLabel, i18n,\r\n isCheckAllDay, isDisabled, onRemove, onTimeSlotChange, showError,\r\n timeSlots, value.day, timeSpan,\r\n ]);\r\n\r\n if (mode === Mode.INLINE) {\r\n return (\r\n \r\n {i18n.getString(_TL_('Invalid time ranges'))}\r\n
\r\n )\r\n }\r\n \r\n {timeRangeEditorList}\r\n {!isDisabled && isOpen && openAllDayElement}\r\n
\r\n {\r\n !isDisabled && isOpen && (\r\n \r\n {addTimeRange}\r\n
\r\n )\r\n }\r\n \r\n );\r\n }\r\n\r\n return (\r\n \r\n {addTimeRange}\r\n {openAllDayElement}\r\n
\r\n )\r\n }\r\n \r\n );\r\n};\r\n\r\nUnStyledSmartDayEditor.propTypes = {\r\n classes: PropTypes.shape({\r\n container: PropTypes.string.isRequired,\r\n error: PropTypes.string.isRequired,\r\n addButton: PropTypes.string.isRequired,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n isDisabled: PropTypes.bool.isRequired,\r\n value: PropTypes.shape({\r\n day: PropTypes.string.isRequired,\r\n timeSlots: PropTypes.arrayOf(PropTypes.object),\r\n isValid: PropTypes.bool.isRequired,\r\n }).isRequired,\r\n onChange: PropTypes.func.isRequired,\r\n mode: PropTypes.string.isRequired,\r\n timeSpan: PropTypes.number.isRequired,\r\n};\r\n\r\nexport const SmartDayEditor = withDefaultStyles(\r\n UnStyledSmartDayEditor,\r\n getStyles\r\n);\r\n","import _ from 'underscore';\r\nimport React, { useCallback, useMemo, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { Toggle } from '@fluentui/react/lib/Toggle';\r\n\r\nimport { useDefaultEditorStyle } from '@bingads-webui-campaign-react/smart-component-util';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nimport { TIMESPANS } from './time-utils';\r\nimport { SmartDayEditor } from './smart-day-editor';\r\n\r\nconst getStyles = () => ({\r\n hoursTitle: {\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n marginTop: 20,\r\n },\r\n hourEditorsContainer: {\r\n margin: 0,\r\n },\r\n});\r\n\r\nexport const UnStyledSmartHoursEditor = ({\r\n classes,\r\n i18n,\r\n id,\r\n // Header Toggle related Props\r\n // 1. Whether show header toggle\r\n showHeaderToggle,\r\n // 2. Default value for header toggle\r\n headerToggleChecked,\r\n // 3. Callback for header toggle change\r\n onHeaderToggleChange,\r\n // 4. Toggle label\r\n headerToggleLabel,\r\n // time values\r\n time,\r\n // Callback for time changing\r\n onTimeChange,\r\n // Style mode\r\n mode,\r\n // how long between two adjacent timeoptions,\r\n timeSpan,\r\n}) => {\r\n const toggleText = i18n.getString(_TL_('Display on website'));\r\n const {\r\n sectionTitleClassName,\r\n } = useDefaultEditorStyle();\r\n\r\n const [isEditable, setEditable] = useState(showHeaderToggle ? headerToggleChecked : true);\r\n\r\n // Update a certain day and change siteConfig\r\n const onDayChange = useCallback(({\r\n day,\r\n timeSlots,\r\n isValid,\r\n isOpenAllDay,\r\n }) => {\r\n const updatedDays = _.map(time, d => (\r\n d.day === day ? {\r\n day,\r\n timeSlots,\r\n isValid,\r\n isOpenAllDay,\r\n } : d\r\n ));\r\n\r\n onTimeChange(updatedDays);\r\n }, [onTimeChange, time]);\r\n\r\n // Render each day's timeslots\r\n const days = useMemo(() => time.map(day => (\r\n \r\n {\r\n showHeaderToggle\r\n && {toggleLabel}\r\n }\r\n className={classNames(classes.hoursTitle, 'hours-toggle')}\r\n inlineLabel\r\n onText={toggleText}\r\n offText={toggleText}\r\n defaultChecked={isEditable}\r\n onChange={editableChange}\r\n />\r\n }\r\n
\r\n );\r\n};\r\n\r\nUnStyledSmartHoursEditor.propTypes = {\r\n classes: PropTypes.shape({\r\n hoursTitle: PropTypes.string.isRequired,\r\n hourEditorsContainer: PropTypes.string.isRequired,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n id: PropTypes.string.isRequired,\r\n showHeaderToggle: PropTypes.bool,\r\n headerToggleLabel: PropTypes.string,\r\n headerToggleChecked: PropTypes.bool,\r\n onHeaderToggleChange: PropTypes.func,\r\n time: PropTypes.arrayOf(PropTypes.shape({\r\n day: PropTypes.string,\r\n isValid: PropTypes.bool,\r\n timeSlots: PropTypes.array,\r\n })).isRequired,\r\n onTimeChange: PropTypes.func.isRequired,\r\n mode: PropTypes.string.isRequired,\r\n timeSpan: PropTypes.number,\r\n};\r\n\r\nUnStyledSmartHoursEditor.defaultProps = {\r\n showHeaderToggle: false,\r\n headerToggleLabel: '',\r\n headerToggleChecked: true,\r\n onHeaderToggleChange: _.noop,\r\n timeSpan: TIMESPANS.QUARTER,\r\n};\r\n\r\nexport const SmartHoursEditor = withDefaultStyles(\r\n UnStyledSmartHoursEditor,\r\n getStyles\r\n);\r\n","import _ from 'underscore';\r\nimport React, { useState, useCallback, useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { SiteConfigContext } from '@bingads-webui-campaign-react/smart-page-context';\r\nimport {\r\n getComponentById,\r\n getComponentByType,\r\n DATA_SOURCE_KEY_MAPPING,\r\n COMPONENT_TYPE_MAPPING,\r\n useDefaultEditorStyle,\r\n} from '@bingads-webui-campaign-react/smart-component-util';\r\n\r\nimport { Mode } from './data-config';\r\nimport { SmartHoursEditor } from './smart-hours-editor';\r\nimport { proxyReadHoursConfig } from './proxy-read-hours-config';\r\n\r\nexport const SmartBusinessHoursEditorWrapper = ({\r\n i18n,\r\n componentId,\r\n isInContact,\r\n showHeaderToggle,\r\n headerToggleChecked,\r\n onHeaderToggleChange,\r\n mode,\r\n}) => {\r\n const {\r\n titleClassName,\r\n descriptionClassName,\r\n editorContentClassName,\r\n } = useDefaultEditorStyle();\r\n const {\r\n siteConfig,\r\n dispatchSiteConfig,\r\n } = useContext(SiteConfigContext);\r\n const [dataSourceCleaned, setDataSourceCleaned] = useState(false);\r\n\r\n const { hours, fromDs } = proxyReadHoursConfig(siteConfig, componentId);\r\n\r\n // Update date change into SiteConfig\r\n const onTimeChange = useCallback((updatedHours) => {\r\n const componentConfig = getComponentById(siteConfig, componentId);\r\n\r\n const update = {\r\n [DATA_SOURCE_KEY_MAPPING.BusinessHours]: updatedHours,\r\n };\r\n\r\n // Update Business Hours in SiteConfig\r\n dispatchSiteConfig({\r\n type: 'UPDATE_COMPONENT_BY_ID',\r\n payload: {\r\n ...componentConfig,\r\n ...update,\r\n },\r\n });\r\n\r\n // When importing from FB, the business hours data is stored in Datasource,\r\n // need to remove this after it's been stored in SiteConfig\r\n if (fromDs && !dataSourceCleaned) {\r\n dispatchSiteConfig({\r\n type: 'UPDATE_DATASOURCE_BY_NAME',\r\n payload: {\r\n name: DATA_SOURCE_KEY_MAPPING.BusinessHours,\r\n value: null,\r\n },\r\n });\r\n setDataSourceCleaned(true);\r\n }\r\n\r\n // If this component is renderred inside the independent Business Hours component,\r\n // make sure the update is also patched into Contact Component.\r\n // TODO: After GA, remove this logic\r\n if (!isInContact) {\r\n const contactComponentConfig = getComponentByType(siteConfig, COMPONENT_TYPE_MAPPING.Contact);\r\n dispatchSiteConfig({\r\n type: 'UPDATE_COMPONENT_BY_ID',\r\n payload: {\r\n ...contactComponentConfig,\r\n ...update,\r\n showHours: true,\r\n },\r\n });\r\n }\r\n }, [dataSourceCleaned, dispatchSiteConfig, fromDs, componentId, isInContact, siteConfig]);\r\n\r\n const businessHoursEditor = (\r\n \r\n { days }\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nSmartBusinessHoursEditorWrapper.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n componentId: PropTypes.string.isRequired,\r\n isInContact: PropTypes.bool,\r\n showHeaderToggle: PropTypes.bool,\r\n headerToggleChecked: PropTypes.bool,\r\n onHeaderToggleChange: PropTypes.func,\r\n mode: PropTypes.string,\r\n};\r\n\r\nSmartBusinessHoursEditorWrapper.defaultProps = {\r\n isInContact: false,\r\n showHeaderToggle: false,\r\n headerToggleChecked: true,\r\n onHeaderToggleChange: _.noop,\r\n mode: Mode.VERTICAL,\r\n};\r\n","import React, { useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\n\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { useIsBusinessHourSectionEnabled } from '@bingads-webui-campaign-react/smart-page-context';\r\nimport { withErrorView } from '@bingads-webui-campaign-react/smart-page-error-boundary';\r\n\r\nimport { SmartBusinessHoursConnector } from './smart-hours-connector';\r\n\r\nconst getStyles = components => ({\r\n container: {\r\n ...components.section,\r\n marginLeft: '13%',\r\n marginRight: '13%',\r\n },\r\n title: {\r\n ...components.sectionTitle,\r\n },\r\n businessHoursContainer: {\r\n display: 'flex',\r\n justifyContent: 'center',\r\n },\r\n});\r\n\r\nexport const UnStyledSmartBusinesHoursViewWrapper = ({\r\n classes,\r\n id,\r\n}) => {\r\n const i18n = useContext(I18nContext);\r\n const isBusinessHourSectionEnabled = useIsBusinessHourSectionEnabled();\r\n\r\n if (!isBusinessHourSectionEnabled) {\r\n return null;\r\n }\r\n\r\n return (\r\n \r\n {i18n.getString(_TL_('Business hours'))}\r\n
\r\n\r\n {i18n.getString(_TL_('Set your business hours to let potential customers know when you\\'re open.'))}\r\n
\r\n \r\n {businessHoursEditor}\r\n
\r\n \r\n {i18n.getString(_TL_('Business Hours'))}\r\n
\r\n\r\n
\r\n \r\n );\r\n};\r\n\r\nUnStyledSmartBusinesHoursViewWrapper.propTypes = {\r\n classes: PropTypes.shape({\r\n title: PropTypes.string.isRequired,\r\n container: PropTypes.string.isRequired,\r\n businessHoursContainer: PropTypes.string.isRequired,\r\n }).isRequired,\r\n id: PropTypes.string.isRequired,\r\n};\r\n\r\nexport const SmartBusinessHoursViewWrapper = withErrorView(withDefaultStyles(\r\n UnStyledSmartBusinesHoursViewWrapper,\r\n getStyles\r\n), 'componentMode');\r\n","import _ from 'underscore';\r\nimport { usePilotsValue } from '@bingads-webui-campaign-react/basic-context-utils';\r\nimport { useMediaQuery } from '@bingads-webui-campaign-react/common-hooks';\r\n\r\n// Define all pilots used in Smart Page over here.\r\nexport const PILOTS = {\r\n isESCMsanEnabled: 'isESCMsanEnabled',\r\n isSubscriptionSignupEnabled: 'IsSubscriptionSignupEnabled',\r\n isUnifiedProductSubscriptionEnabled: 'IsUnifiedProductSubscriptionEnabled',\r\n isSmartPageBusinessHourSectionEnabled: 'isSmartPageBusinessHourSectionEnabled',\r\n isSmartPageImageTextSuggestionEnabled: 'IsSmartPageImageTextSuggestionEnabled',\r\n isSmartPageM365StockImageEnabled: 'IsSmartPageM365StockImageEnabled',\r\n isSmartPageVideoSectionEnabled: 'isSmartPageVideoSectionEnabled',\r\n isSmartPageM365StockImageGalleryEnabled: 'isSmartPageM365StockImageGalleryEnabled',\r\n isSmartPageMapEnabled: 'isSmartPageMapEnabled',\r\n isSmartPageCustomizedUpdateEnabled: 'IsSmartPageCustomizedUpdateEnabled',\r\n isSmartPageM365PremiumFeatureEnabled: 'IsSmartPageM365PremiumFeatureEnabled',\r\n isSmartPageM365BannerEnabled: 'isSmartPageM365BannerEnabled',\r\n isSmartPageDarkModeEnabled: 'isSmartPageDarkModeEnabled',\r\n isM365PremiumUser: 'IsM365PremiumUser', // account level pilot\r\n isSmartPageProfessionalServicesEnabled: 'isSmartPageProfessionalServicesEnabled',\r\n isSmartPageBookAppointmentEnabled: 'isSmartPageBookAppointmentEnabled',\r\n isSmartPageEditorNavigationImprovementEnabled: 'isSmartPageEditorNavigationImprovementEnabled',\r\n isSmartPageTemplateSuggestionEnabled: 'isSmartPageTemplateSuggestionEnabled',\r\n isSmartPageImprovedReviewsEnabled: 'isSmartPageImprovedReviewsEnabled',\r\n isSmartPageSectionReorderingEnabled: 'isSmartPageSectionReorderingEnabled',\r\n isSmartPageEditorItemsReorderingEnabled: 'isSmartPageEditorItemsReorderingEnabled',\r\n isSmartPagePreviewItemsReorderingEnabled: 'isSmartPagePreviewItemsReorderingEnabled',\r\n isSmartPagePrivacyPolicyEnabled: 'isSmartPagePrivacyPolicyEnabled',\r\n isSmartPageCustomDomainEnabled: 'isSmartPageCustomDomainEnabled',\r\n isSmartPageCustomDomainPreflightEnabled: 'isSmartPageCustomDomainPreflightEnabled',\r\n isSmartPageCustomDomainPreflightPostSignupEnabled: 'isSmartPageCustomDomainPreflightPostSignupEnabled',\r\n isSmartPageRuntimePageLocalizationEnabled: 'isSmartPageRuntimePageLocalizationEnabled',\r\n isSmartPageRuntimePageWcpConsentEnabled: 'isSmartPageRuntimePageWcpConsentEnabled',\r\n isSmartPageAttributesToWSDMigrationEnabled: 'isSmartPageAttributesToWSDMigrationEnabled',\r\n};\r\n\r\n// Get pilot value from ServerContext\r\nexport const getPilotValue = (serverContext = {}, key) => {\r\n const cmuiPilotKey = key && key.replace(/^is/, 'Is');\r\n const ccuiPilotKey = key && key.replace(/^Is/, 'is');\r\n const uflPilotKey = key && key.replace(/^(is|Is)/, '').replace(/Enabled$/, ''); // ufl stands for Unified Feature Library\r\n\r\n const cmuiPilotValue = _.result(serverContext.Permissions, cmuiPilotKey, false);\r\n const ccuiPilotValue = _.result(serverContext.CCUIPilots, ccuiPilotKey, false);\r\n const uflPilotValue = _.result(serverContext.DynamicPermissions, uflPilotKey, false);\r\n\r\n return cmuiPilotValue || ccuiPilotValue || uflPilotValue;\r\n};\r\n\r\n// Below pilots are based on ServerContext instead of DataServiceContext\r\n\r\n// We don't plan to support custom domain in Mobile\r\n// This pilot is to control the basic feature and open the edit free website flow\r\nexport const useIsSmartPageCustomDomainPreflightEnabled = () => {\r\n const isPilotEnabled = usePilotsValue('isSmartPageCustomDomainPreflightEnabled');\r\n const { isMobile } = useMediaQuery();\r\n\r\n return isPilotEnabled && !isMobile;\r\n};\r\n\r\nexport const useIsSmartPageCustomDomainPreflightPostSignupEnabled =\r\n () => usePilotsValue('isSmartPageCustomDomainPreflightPostSignupEnabled');\r\n\r\n// This pilot is to control M365 domain option, the main custom domain logic\r\nexport const useIsSmartPageCustomDomainEnabled = (isSignUp) => {\r\n const isPilotEnabled = usePilotsValue('isSmartPageCustomDomainEnabled');\r\n const isSmartPageCustomDomainPreflightEnabled = useIsSmartPageCustomDomainPreflightEnabled();\r\n const isSmartPageCustomDomainPreflightPostSignupEnabled = useIsSmartPageCustomDomainPreflightPostSignupEnabled();\r\n\r\n return (isSignUp && isSmartPageCustomDomainPreflightEnabled && isPilotEnabled)\r\n || (!isSignUp && isSmartPageCustomDomainPreflightPostSignupEnabled && isPilotEnabled);\r\n};\r\n\r\nexport const useIsSmartPageCustomEventTrackingEnabled =\r\n () => usePilotsValue('isSmartPageCustomEventTrackingEnabled');\r\n","export const DATA_SOURCE_KEY_MAPPING = {\r\n BusinessName: 'businessName',\r\n BusinessDescription: 'businessDescription',\r\n BusinessCategories: 'businessCategories',\r\n BusinessHours: 'businessHours',\r\n PhoneNumber: 'phoneNumber',\r\n Emails: 'emails',\r\n LocationInfo: 'locationInfo',\r\n LogoImageId: 'logoImageId',\r\n CoverImage: 'coverImage',\r\n Photos: 'photos',\r\n FacebookId: 'facebookId',\r\n Posts: 'posts',\r\n Reviews: 'reviews',\r\n BusinessSummary: 'businessSummary',\r\n CallToActions: 'callToActions',\r\n};\r\n\r\nexport const COMPONENT_TYPE_MAPPING = {\r\n Gallery: 'gallery',\r\n CoverImage: 'coverImage',\r\n Update: 'update',\r\n Review: 'review',\r\n Summary: 'summary',\r\n SocialLinks: 'socialLinks',\r\n Contact: 'contact',\r\n BusinessHours: 'businessHours',\r\n Introduction: 'introduction',\r\n CallToAction: 'callToAction',\r\n Footer: 'footer',\r\n};\r\n\r\nexport const DATA_SOURCE_TO_COMPONENT_TYPE_MAPPING = {\r\n coverImage: 'coverImage',\r\n photos: 'gallery',\r\n posts: 'update',\r\n reviews: 'review',\r\n businessDescription: 'summary',\r\n businessSummary: 'summary',\r\n businessHours: 'businessHours',\r\n};\r\n\r\nexport const WEBSITE_SOURCE_DATA_KEY_MAPPING = {\r\n BusinessName: 'BusinessName',\r\n Description: 'Description',\r\n Categories: 'Categories',\r\n SingleLineAddress: 'SingleLineAddress',\r\n PhoneNumber: 'PhoneNumber',\r\n CoverImageUrl: 'CoverImageUrl',\r\n CoverImageId: 'CoverImageId',\r\n Logo: 'Logo',\r\n LogoImageId: 'LogoImageId',\r\n LogoImageUrl: 'LogoImageUrl',\r\n GalleryImages: 'GalleryImages',\r\n GalleryImageIds: 'GalleryImageIds',\r\n Introduction: 'Introduction',\r\n Subdomain: 'Subdomain',\r\n Email: 'Email',\r\n SocialUrls: 'SocialUrls',\r\n BusinessHours: 'BusinessHours',\r\n EmbeddedVideos: 'EmbeddedVideos',\r\n CallToActions: 'CallToActions',\r\n Locations: 'Locations',\r\n Theme: 'Theme',\r\n Services: 'Services',\r\n Appointment: 'Appointment',\r\n Reviews: 'Reviews',\r\n TimeZoneId: 'TimeZoneId',\r\n PrivacyPolicy: 'PrivacyPolicy',\r\n Localization: 'Localization',\r\n};\r\n\r\nexport const WEBSITE_SOURCE_DATA_THEME_KEY_MAPPING = {\r\n Mode: 'Mode',\r\n AccentColor: 'AccentColor',\r\n};\r\n\r\nexport const COMPONENT_TYPE_MIGRATION_STATUS_KEY_MAPPING = {\r\n Introduction: 'IsIntroductionMigrated',\r\n};\r\n\r\nexport const DATA_SOURCE_TO_WEBSITE_SOURCE_DATA_MAPPING = {\r\n businessName: WEBSITE_SOURCE_DATA_KEY_MAPPING.BusinessName,\r\n businessDescription: WEBSITE_SOURCE_DATA_KEY_MAPPING.Description,\r\n businessCategories: WEBSITE_SOURCE_DATA_KEY_MAPPING.Categories,\r\n phoneNumber: WEBSITE_SOURCE_DATA_KEY_MAPPING.PhoneNumber,\r\n locationInfo: WEBSITE_SOURCE_DATA_KEY_MAPPING.SingleLineAddress,\r\n // Note: emails: array, Email: string, the conversion needs to be handled specifically\r\n emails: WEBSITE_SOURCE_DATA_KEY_MAPPING.Email,\r\n callToActions: WEBSITE_SOURCE_DATA_KEY_MAPPING.CallToActions,\r\n logoImageId: WEBSITE_SOURCE_DATA_KEY_MAPPING.LogoImageId,\r\n businessHours: WEBSITE_SOURCE_DATA_KEY_MAPPING.BusinessHours,\r\n};\r\n\r\nexport const COMPONENT_TO_WEBSITE_SOURCE_DATA_MAPPING = {\r\n video: WEBSITE_SOURCE_DATA_KEY_MAPPING.EmbeddedVideos,\r\n professionalService: WEBSITE_SOURCE_DATA_KEY_MAPPING.Services,\r\n};\r\n","import _ from 'underscore';\r\n\r\nimport { PILOTS } from './pilot-utils';\r\nimport { WEBSITE_SOURCE_DATA_KEY_MAPPING } from './site-config-structure';\r\n\r\nconst config = {\r\n header: {\r\n required: true,\r\n order: 0,\r\n },\r\n introduction: {\r\n required: true,\r\n order: 1,\r\n },\r\n callToAction: {\r\n required: true,\r\n order: 2,\r\n },\r\n coverImage: {\r\n required: true,\r\n order: 3,\r\n },\r\n summary: {\r\n required: false,\r\n navTitle: _TL_('About Us'),\r\n order: 4,\r\n },\r\n professionalService: {\r\n required: false,\r\n navTitle: _TL_('Services'),\r\n order: 5,\r\n hideNavWhenEmpty: true,\r\n hideContainerWhenEmpty: true,\r\n pilot: PILOTS.isSmartPageProfessionalServicesEnabled,\r\n wsdKey: WEBSITE_SOURCE_DATA_KEY_MAPPING.Services,\r\n },\r\n video: {\r\n required: false,\r\n order: 6,\r\n pilot: PILOTS.isSmartPageVideoSectionEnabled,\r\n },\r\n update: {\r\n required: false,\r\n navTitle: _TL_('Updates'),\r\n order: 7,\r\n hideNavWhenEmpty: true,\r\n hideContainerWhenEmpty: true,\r\n dataProp: 'updates',\r\n },\r\n review: {\r\n required: false,\r\n navTitle: _TL_('Testimonials'),\r\n order: 8,\r\n hideNavWhenEmpty: true,\r\n hideContainerWhenEmpty: true,\r\n dataProp: 'reviews',\r\n },\r\n gallery: {\r\n required: false,\r\n navTitle: _TL_('Gallery'),\r\n order: 9,\r\n hideNavWhenEmpty: true,\r\n hideContainerWhenEmpty: true,\r\n dataProp: 'photos',\r\n },\r\n contact: {\r\n required: true,\r\n navTitle: _TL_('Contact Us'),\r\n order: 10,\r\n },\r\n businessHours: {\r\n required: false,\r\n // For temp solution, do not show this in menu\r\n // navTitle: _TL_('Business Hours'),\r\n order: 11,\r\n pilot: PILOTS.isSmartPageBusinessHourSectionEnabled,\r\n },\r\n socialLinks: {\r\n required: false,\r\n hideContainerWhenEmpty: true,\r\n order: 12,\r\n },\r\n footer: {\r\n required: true,\r\n order: 13,\r\n },\r\n};\r\n\r\n// Complete components config\r\nexport const componentsConfig = _.mapObject(config, (val, key) => ({\r\n ...val,\r\n type: key,\r\n required: !!val.required,\r\n}));\r\n","import _ from 'underscore';\r\n\r\nimport { cloneDeep } from '@bingads-webui-universal/primitive-utilities';\r\n\r\nimport { WEBSITE_SOURCE_DATA_KEY_MAPPING } from './site-config-structure';\r\n\r\nexport const getPageIndexById = (siteConfig, id) => (\r\n _.chain(siteConfig.pages)\r\n .findIndex({ id })\r\n .value()\r\n);\r\n\r\nexport const getComponentById = (siteConfig, id) => (\r\n _.chain(siteConfig.pages)\r\n .pluck('components')\r\n .flatten()\r\n .findWhere({ id })\r\n .value() || {}\r\n);\r\n\r\nexport const getComponentByTypeFromPageComponents = (components, type) => {\r\n const index = _.findIndex(components, cmp => cmp.type === type);\r\n return index >= 0 ?\r\n _.extend(components[index], { index }) :\r\n undefined;\r\n};\r\n\r\nexport const getComponentByType = (siteConfig, type) => (\r\n _.chain(siteConfig.pages)\r\n .pluck('components')\r\n .flatten()\r\n .findWhere({ type })\r\n .value()\r\n);\r\n\r\nexport const getComponentByTypes = (siteConfig, types) => _.map(\r\n types,\r\n type => getComponentByType(siteConfig, type)\r\n);\r\n\r\nexport const getDataSourceByKey = (siteConfig, key, fallback, allowNull = true) => {\r\n if (key) {\r\n const actualValue = _.propertyOf(siteConfig.dataSource)(key);\r\n const fallbackConditions = [\r\n actualValue === undefined,\r\n !allowNull && actualValue === null,\r\n ];\r\n\r\n return _.some(fallbackConditions) ? fallback : actualValue;\r\n }\r\n return fallback;\r\n};\r\n\r\nexport const getDataSourceByKeys = (siteConfig, keys, defaultVals) => _.map(\r\n keys,\r\n (key, index) => getDataSourceByKey(siteConfig, key, defaultVals && defaultVals[index])\r\n);\r\n\r\nconst keyName = {\r\n siteInfoData: 'dataSource',\r\n sitePages: 'pages',\r\n theme: 'theme',\r\n siteContextInfo: 'siteContextInfo',\r\n images: 'images',\r\n orderedComponentsInPages: 'orderedComponentsInPages',\r\n smartPageDataContext: 'smartPageDataContext',\r\n websiteSourceData: 'websiteSourceData',\r\n migrationContext: 'migrationContext',\r\n};\r\n\r\nexport const getAttributesFromSiteConfig = (siteConfig) => {\r\n if (!siteConfig) {\r\n return [];\r\n }\r\n\r\n let { siteContextInfo } = siteConfig;\r\n\r\n if (siteContextInfo) {\r\n const {\r\n protocol,\r\n host,\r\n pathname,\r\n } = window.location;\r\n\r\n siteContextInfo = {\r\n ...siteContextInfo,\r\n sourceUrl: `${protocol}//${host}${pathname}`,\r\n };\r\n }\r\n\r\n return _.compact([\r\n siteConfig.dataSource ? {\r\n Key: keyName.siteInfoData,\r\n Value: JSON.stringify(siteConfig.dataSource),\r\n } : null,\r\n siteConfig.pages ? {\r\n Key: keyName.sitePages,\r\n Value: JSON.stringify(siteConfig.pages),\r\n } : null,\r\n siteConfig.theme ? {\r\n Key: keyName.theme,\r\n Value: JSON.stringify(siteConfig.theme),\r\n } : null,\r\n siteConfig.siteContextInfo ? {\r\n Key: keyName.siteContextInfo,\r\n Value: JSON.stringify(siteContextInfo),\r\n } : null,\r\n ]);\r\n};\r\n\r\n// Snapshot is a partial object of siteConfig\r\nexport const getAttributesFromSnapshot = (snapshot) => {\r\n if (!snapshot) {\r\n return [];\r\n }\r\n\r\n return _.compact([\r\n ...getAttributesFromSiteConfig(snapshot),\r\n snapshot.images ? {\r\n Key: keyName.images,\r\n Value: JSON.stringify(snapshot.images),\r\n } : null,\r\n snapshot.orderedComponentsInPages ? {\r\n Key: keyName.orderedComponentsInPages,\r\n Value: JSON.stringify(snapshot.orderedComponentsInPages),\r\n } : null,\r\n snapshot.smartPageDataContext ? {\r\n Key: keyName.smartPageDataContext,\r\n Value: JSON.stringify(snapshot.smartPageDataContext),\r\n } : null,\r\n snapshot.websiteSourceData ? {\r\n Key: keyName.websiteSourceData,\r\n Value: JSON.stringify(snapshot.websiteSourceData),\r\n } : null,\r\n snapshot.migrationContext ? {\r\n Key: keyName.migrationContext,\r\n Value: JSON.stringify(snapshot.migrationContext),\r\n } : null,\r\n ]);\r\n};\r\n\r\nexport const createSnapshot = siteConfig => cloneDeep(_.pick(siteConfig, _.values(keyName)));\r\n\r\nexport const getWebsiteSourceDataByKey = (siteConfig = {}, key) => {\r\n const websiteSourceData = (siteConfig && siteConfig.websiteSourceData) || {};\r\n\r\n return websiteSourceData[key];\r\n};\r\n\r\nexport const getWebsiteSourceDataByKeys = (siteConfig, keys) => _.map(\r\n keys,\r\n key => getWebsiteSourceDataByKey(siteConfig, key)\r\n);\r\n\r\nexport const isMigratedToWSD = (siteConfig, key) => _.get(siteConfig, ['migrationContext', key], false);\r\n\r\n/**\r\n * Proxy read timezoneId.\r\n * Timezone Id is stored in ServerContext in main bundle, while in Signup it's stored in the WSD\r\n * @param {Object} serverContext ServerContext\r\n * @param {Object} siteConfig Site Config\r\n * @returns {number} Timezone Id\r\n */\r\nexport const getTimeZoneId = (serverContext, siteConfig) => (\r\n (serverContext.CurrentAccount && serverContext.CurrentAccount.TimeZone)\r\n || getWebsiteSourceDataByKey(siteConfig, WEBSITE_SOURCE_DATA_KEY_MAPPING.TimeZoneId)\r\n || 71\r\n);\r\n","const PaddingTop = 24;\r\nconst PaddingBottom = 16;\r\nconst PaddingLeft = 16;\r\nconst PaddingRight = 16;\r\n\r\nexport const getDialogFullBorder = (_, { palette = {} }) => ({\r\n marginTop: 24,\r\n position: 'relative',\r\n\r\n '&:before': {\r\n content: '\"\"',\r\n position: 'absolute',\r\n top: '-24px',\r\n left: `-${PaddingLeft}px`,\r\n right: `-${PaddingRight}px`,\r\n borderTop: `1px solid ${palette.neutralLight}`,\r\n },\r\n});\r\n\r\nexport const getDialogStyle = (_, { palette = {} }) => ({\r\n '& .ms-Dialog-title': {\r\n padding: `${PaddingTop}px ${PaddingRight}px 12px ${PaddingLeft}px`,\r\n },\r\n '& .ms-Dialog-inner': {\r\n padding: `0 ${PaddingRight}px ${PaddingBottom}px ${PaddingLeft}px`,\r\n '& .ms-Dialog-subText': {\r\n padding: 0,\r\n margin: 0,\r\n },\r\n '& .ms-Dialog-actions': {\r\n ...getDialogFullBorder(_, { palette }),\r\n },\r\n },\r\n});\r\n","import classnames from 'classnames';\r\n\r\nimport { mobileDevice } from '@bingads-webui-campaign-react/common-hooks';\r\nimport { useDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\n\r\nimport { getDialogFullBorder, getDialogStyle } from './dialog-style';\r\n\r\nexport const sectionTitleStyles = {\r\n fontWeight: 'bold',\r\n fontSize: 14,\r\n lineHeight: '16px',\r\n marginTop: 5,\r\n marginBottom: 5,\r\n};\r\n\r\nconst getStyles = (_, { palette = {} }) => ({\r\n title: {\r\n fontStyle: 'normal',\r\n fontWeight: 'bold',\r\n fontSize: 20,\r\n lineHeight: '20px',\r\n margin: '16px 20px 12px 20px',\r\n },\r\n description: {\r\n fontStyle: 'normal',\r\n fontWeight: 'normal',\r\n fontSize: 14,\r\n lineHeight: '20px',\r\n marginTop: 16,\r\n marginBottom: 16,\r\n margin: '16px 20px',\r\n },\r\n editorContent: {\r\n margin: '0 40px 0 20px',\r\n [mobileDevice]: {\r\n margin: '0 20px',\r\n },\r\n },\r\n editorImgsContent: {\r\n marginLeft: '16px',\r\n },\r\n sectionTitle: sectionTitleStyles,\r\n dialogFullBorder: {\r\n ...getDialogFullBorder(_, { palette }),\r\n },\r\n dialog: {\r\n ...getDialogStyle(_, { palette }),\r\n },\r\n infoMessageBar: {\r\n '& .ms-MessageBar-content': {\r\n background: palette.themeLighterAlt,\r\n },\r\n '@media (forced-colors: active)': {\r\n 'forced-color-adjust': 'auto',\r\n },\r\n },\r\n choiceGroup: {\r\n marginLeft: 8,\r\n },\r\n editorPivotStyleContent: {\r\n margin: '5px 0 15px 10px',\r\n paddingBottom: '10px',\r\n },\r\n uploadButton: {\r\n marginLeft: 0,\r\n },\r\n});\r\n\r\nexport const useDefaultEditorStyle = () => {\r\n const {\r\n title,\r\n description,\r\n sectionTitle,\r\n dialog,\r\n dialogFullBorder,\r\n editorContent,\r\n editorImgsContent,\r\n infoMessageBar,\r\n choiceGroup,\r\n editorPivotStyleContent,\r\n uploadButton,\r\n } = useDefaultStyles(getStyles);\r\n\r\n return {\r\n titleClassName: classnames(title, 'smart-page-component-editor-title'),\r\n descriptionClassName: classnames(description, 'smart-page-component-editor-description'),\r\n sectionTitleClassName: sectionTitle,\r\n dialogClassName: dialog,\r\n dialogFullBorderClassName: dialogFullBorder,\r\n editorContentClassName: editorContent,\r\n editorImgsContentClassName: editorImgsContent,\r\n infoMessageBarClassName: infoMessageBar,\r\n choiceGroupClassName: choiceGroup,\r\n editorPivotStyleContentClassName: editorPivotStyleContent,\r\n uploadButtonClassName: uploadButton,\r\n };\r\n};\r\n","import { mobileDevice } from '@bingads-webui-campaign-react/common-hooks';\r\n\r\nexport const getFloatingBannerStyle = () => ({\r\n floatingBanner: {\r\n position: 'fixed',\r\n bottom: '10%',\r\n left: '50%',\r\n transform: 'translate(-50%, 0)',\r\n background: '#fff',\r\n width: 650,\r\n zIndex: 10000000,\r\n [mobileDevice]: {\r\n width: '100%',\r\n },\r\n },\r\n});\r\n","import { findWhere, where, invert, first } from 'underscore';\r\nimport { getSmartPageDefaultSiteTheme } from '@bingads-webui-campaign-react/smart-page-site-theme';\r\n\r\nimport { WEBSITE_SOURCE_DATA_THEME_KEY_MAPPING, WEBSITE_SOURCE_DATA_KEY_MAPPING } from './site-config-structure';\r\n\r\nexport const THEME_MODE_KEY = {\r\n Light: 'Light',\r\n Dark: 'Dark',\r\n};\r\n\r\nexport const THEME_MODE_KEY_MAPPING = {\r\n Light: 'mode_light',\r\n Dark: 'mode_dark',\r\n};\r\n\r\nexport const THEME_MODE_KEY_MAPPING_MT = invert(THEME_MODE_KEY_MAPPING);\r\n\r\nexport const THEME_ACCENT_COLOR_KEY_MAPPING = {\r\n Default: 'accent_color_default',\r\n Yellow: 'accent_color_yellow',\r\n Green: 'accent_color_green',\r\n};\r\n\r\nexport const THEME_ACCENT_COLOR_KEY_MAPPING_MT = invert(THEME_ACCENT_COLOR_KEY_MAPPING);\r\n\r\nexport const smartPageThemeModeConfigList = [\r\n {\r\n id: 'mode_light',\r\n label: 'Light',\r\n color: '#FFFFFF',\r\n },\r\n {\r\n id: 'mode_dark',\r\n label: 'Dark',\r\n color: '#000000',\r\n },\r\n];\r\n\r\nexport const smartPageAccentColorConfigList = [\r\n {\r\n id: 'accent_color_default',\r\n mode: 'mode_light',\r\n color: '#000000',\r\n label: 'Black',\r\n },\r\n {\r\n id: 'accent_color_default',\r\n mode: 'mode_dark',\r\n color: '#ffffff',\r\n label: 'White',\r\n },\r\n {\r\n id: 'accent_color_yellow',\r\n mode: 'mode_dark',\r\n color: '#fff500',\r\n label: 'Yellow',\r\n },\r\n {\r\n id: 'accent_color_green',\r\n mode: 'mode_dark',\r\n color: '#c4ffa8',\r\n label: 'Green',\r\n },\r\n];\r\n\r\nexport const smartPageThemePaletteList = [\r\n {\r\n id: 'theme_light_default',\r\n mode: 'mode_light',\r\n accentColor: 'accent_color_default',\r\n primaryText: '#000000',\r\n secondaryText: '#000000',\r\n tertiaryText: '#605e5c',\r\n linkText: '#000000',\r\n primaryBackground: '#ffffff',\r\n secondaryBackground: '#f3f2f1',\r\n cardBackground: '#ffffff',\r\n outerBackground: '#edebe9',\r\n buttonText: '#ffffff',\r\n buttonBackground: '#323130',\r\n outline: '#000000',\r\n pageControl: '#605e5c',\r\n pageSelect: '#0078d4',\r\n footer: '#3e3e3e',\r\n elevation: 'rgba(0, 0, 0, 0.25)',\r\n },\r\n {\r\n id: 'theme_dark_default',\r\n mode: 'mode_dark',\r\n accentColor: 'accent_color_default',\r\n primaryText: '#ffffff',\r\n secondaryText: '#ffffff',\r\n tertiaryText: '#ffffff',\r\n linkText: '#ffffff',\r\n primaryBackground: '#323130',\r\n secondaryBackground: '#464646',\r\n cardBackground: '#464646',\r\n outerBackground: '#4c4c4c',\r\n buttonText: '#000000',\r\n buttonBackground: '#ffffff',\r\n outline: '#ffffff',\r\n pageControl: '#ffffff',\r\n pageSelect: '#ffffff',\r\n footer: '#ffffff',\r\n elevation: 'rgba(255, 255, 255, 0.25)',\r\n },\r\n {\r\n id: 'theme_dark_yellow',\r\n mode: 'mode_dark',\r\n accentColor: 'accent_color_yellow',\r\n primaryText: '#fff500',\r\n secondaryText: '#ffffff',\r\n tertiaryText: '#ffffff',\r\n linkText: '#ffffff',\r\n primaryBackground: '#323130',\r\n secondaryBackground: '#464646',\r\n cardBackground: '#464646',\r\n outerBackground: '#4c4c4c',\r\n buttonText: '#000000',\r\n buttonBackground: '#fff500',\r\n outline: '#ffffff',\r\n pageControl: '#ffffff',\r\n pageSelect: '#ffffff',\r\n footer: '#ffffff',\r\n elevation: 'rgba(255, 255, 255, 0.25)',\r\n },\r\n {\r\n id: 'theme_dark_green',\r\n mode: 'mode_dark',\r\n accentColor: 'accent_color_green',\r\n primaryText: '#c4ffa8',\r\n secondaryText: '#ffffff',\r\n tertiaryText: '#ffffff',\r\n linkText: '#ffffff',\r\n primaryBackground: '#323130',\r\n secondaryBackground: '#464646',\r\n cardBackground: '#464646',\r\n outerBackground: '#4c4c4c',\r\n buttonText: '#000000',\r\n buttonBackground: '#c4ffa8',\r\n outline: '#ffffff',\r\n pageControl: '#ffffff',\r\n pageSelect: '#ffffff',\r\n footer: '#ffffff',\r\n elevation: 'rgba(255, 255, 255, 0.25)',\r\n },\r\n];\r\n\r\nexport function getSmartPageAccentColorConfigList(mode) {\r\n return where(smartPageAccentColorConfigList, { mode });\r\n}\r\n\r\nexport const getThemePalette = (theme) => {\r\n if (theme) {\r\n const modeMT = theme[WEBSITE_SOURCE_DATA_THEME_KEY_MAPPING.Mode];\r\n const accentColorMT = theme[WEBSITE_SOURCE_DATA_THEME_KEY_MAPPING.AccentColor];\r\n if (modeMT && accentColorMT) {\r\n const mode = THEME_MODE_KEY_MAPPING[modeMT];\r\n const accentColor = THEME_ACCENT_COLOR_KEY_MAPPING[accentColorMT];\r\n const palette = findWhere(smartPageThemePaletteList, { mode, accentColor });\r\n if (palette) {\r\n return palette;\r\n }\r\n }\r\n }\r\n\r\n return first(smartPageThemePaletteList);\r\n};\r\n\r\nexport const mapWebsiteSourceDataTheme = (siteConfig) => {\r\n if (siteConfig && siteConfig.websiteSourceData\r\n && siteConfig.websiteSourceData[WEBSITE_SOURCE_DATA_KEY_MAPPING.Theme]) {\r\n const theme = siteConfig.websiteSourceData[WEBSITE_SOURCE_DATA_KEY_MAPPING.Theme];\r\n\r\n const mode = theme.Mode ? THEME_MODE_KEY_MAPPING[theme.Mode] : undefined;\r\n const accentColor = theme.AccentColor ?\r\n THEME_ACCENT_COLOR_KEY_MAPPING[theme.AccentColor] : undefined;\r\n if (mode && accentColor) {\r\n return { mode, accentColor };\r\n }\r\n }\r\n\r\n const defaultThemePalette = first(smartPageThemePaletteList);\r\n return {\r\n mode: defaultThemePalette.mode,\r\n accentColor: defaultThemePalette.accentColor,\r\n };\r\n};\r\n\r\nexport const getDefaultWebsiteSourceDataTheme = () => ({\r\n [WEBSITE_SOURCE_DATA_THEME_KEY_MAPPING.Mode]: THEME_MODE_KEY_MAPPING_MT.mode_light,\r\n [WEBSITE_SOURCE_DATA_THEME_KEY_MAPPING.AccentColor]:\r\n THEME_ACCENT_COLOR_KEY_MAPPING_MT.accent_color_default,\r\n});\r\n\r\nexport const mapThemeToWebsiteSourceData = (mode, accentColor) => {\r\n if (mode && accentColor) {\r\n const modeMT = THEME_MODE_KEY_MAPPING_MT[mode];\r\n const accentColorMT = THEME_ACCENT_COLOR_KEY_MAPPING_MT[accentColor];\r\n\r\n if (modeMT && accentColorMT) {\r\n return {\r\n [WEBSITE_SOURCE_DATA_THEME_KEY_MAPPING.Mode]: modeMT,\r\n [WEBSITE_SOURCE_DATA_THEME_KEY_MAPPING.AccentColor]: accentColorMT,\r\n };\r\n }\r\n }\r\n\r\n return undefined;\r\n};\r\n\r\nexport const getCurrentTheme = ({\r\n themeConfig,\r\n disableEvents = false,\r\n isMobile = false,\r\n}) => {\r\n const currentPalette = getThemePalette(themeConfig);\r\n\r\n return getSmartPageDefaultSiteTheme(currentPalette, disableEvents, isMobile);\r\n};\r\n\r\nexport const getThemeConfigFromWSD = wsd => (\r\n wsd\r\n ? wsd[WEBSITE_SOURCE_DATA_KEY_MAPPING.Theme]\r\n : undefined\r\n);\r\n\r\nexport const getIsDarkMode = (siteConfig) => {\r\n if (siteConfig\r\n && siteConfig.websiteSourceData\r\n && siteConfig.websiteSourceData[WEBSITE_SOURCE_DATA_KEY_MAPPING.Theme]) {\r\n const theme = siteConfig.websiteSourceData[WEBSITE_SOURCE_DATA_KEY_MAPPING.Theme];\r\n const modeMT = theme[WEBSITE_SOURCE_DATA_THEME_KEY_MAPPING.Mode];\r\n return modeMT === THEME_MODE_KEY.Dark;\r\n }\r\n\r\n return false;\r\n};\r\n","import _ from 'underscore';\r\n\r\nconst dayNames = [\r\n 'mon',\r\n 'tue',\r\n 'wed',\r\n 'thu',\r\n 'fri',\r\n 'sat',\r\n 'sun',\r\n 'holiday',\r\n];\r\n\r\nconst safeParse = (json, fallback) => {\r\n try {\r\n return JSON.parse(json);\r\n } catch (e) {\r\n return fallback;\r\n }\r\n};\r\n\r\nconst parseKey = (key) => {\r\n const reKey = /^(\\w+)_(\\d)_(\\w+)$/i;\r\n const match = key.match(reKey);\r\n if (match && match.length > 3) {\r\n return {\r\n day: match[1].toLowerCase(),\r\n index: Number(match[2]),\r\n isOpen: match[3].toLowerCase() === 'open',\r\n };\r\n }\r\n return null;\r\n};\r\n\r\nexport const isHourValid = (hour, is12Hr) => (\r\n is12Hr ? (hour >= 0 && hour <= 12) : (hour >= 0 && hour < 24)\r\n);\r\n\r\nexport const isMinuteValid = minute => (\r\n minute >= 0 && minute < 60\r\n);\r\n\r\nconst getTimeSlotsOfDay = (day, timesArray) => {\r\n const openTimes = _.chain(timesArray)\r\n .filter(item => item.day === day && item.isOpen)\r\n .sortBy('index')\r\n .value();\r\n const closeTimes = _.chain(timesArray)\r\n .filter(item => item.day === day && !item.isOpen)\r\n .sortBy('index')\r\n .value();\r\n\r\n if (_.isEmpty(openTimes) || _.isEmpty(closeTimes) ||\r\n openTimes.length !== closeTimes.length) {\r\n return [];\r\n }\r\n\r\n const timeSlots = [];\r\n for (let i = 0; i < openTimes.length; i += 1) {\r\n timeSlots.push({\r\n index: i,\r\n openHour: openTimes[i].hour,\r\n openMinute: openTimes[i].minute,\r\n closeHour: closeTimes[i].hour,\r\n closeMinute: closeTimes[i].minute,\r\n });\r\n }\r\n\r\n return timeSlots;\r\n};\r\n\r\n// try parse a string like 9 AM or 9:00 PM\r\n// if parse fail, return null\r\nexport const tryParseTimeString = (timeString) => {\r\n if (typeof (timeString) !== 'string') {\r\n return null;\r\n }\r\n\r\n const reShort = /^(\\d{1,2})\\s*(AM|PM)?$/i; // 9 pm\r\n const reLong = /^(\\d{1,2}):(\\d{2})\\s*(AM|PM)?$/i; // 9:00 pm\r\n const is12Hr = /AM|PM/i.test(timeString);\r\n const isPM = /PM/i.test(timeString);\r\n let match;\r\n let hour;\r\n let minute;\r\n\r\n if (reShort.test(timeString)) {\r\n match = timeString.match(reShort);\r\n if (match.length < 2) {\r\n return null;\r\n }\r\n hour = Number(match[1]);\r\n minute = 0;\r\n } else if (reLong.test(timeString)) {\r\n match = timeString.match(reLong);\r\n if (match.length < 3) {\r\n return null;\r\n }\r\n hour = Number(match[1]);\r\n minute = Number(match[2]);\r\n }\r\n\r\n if (isHourValid(hour, is12Hr) && isMinuteValid(minute)) {\r\n // 12 AM should be saved as 0 for 24-hours\r\n if (is12Hr && !isPM && hour === 12) {\r\n return {\r\n hour: 0,\r\n minute,\r\n };\r\n }\r\n return {\r\n hour: isPM && hour < 12 ? hour + 12 : hour,\r\n minute,\r\n };\r\n }\r\n\r\n return null;\r\n};\r\n\r\nexport const mapFbHours = (fbHoursJson) => {\r\n const fbHours = safeParse(fbHoursJson, []);\r\n const arr = _.map(fbHours, (value, key) => {\r\n const parsedKey = parseKey(key);\r\n const parsedTime = tryParseTimeString(value);\r\n return {\r\n ...parsedKey,\r\n ...parsedTime,\r\n };\r\n });\r\n\r\n const hoursConfig = _.map(dayNames, day => ({\r\n day,\r\n timeSlots: getTimeSlotsOfDay(day, arr),\r\n isValid: true,\r\n }), this);\r\n\r\n return hoursConfig;\r\n};\r\n\r\n// Retrieve hour and minute from Bing Places hours\r\n// Bing places hour format: 09:00:00 AM/PM\r\n// Retrive hour and minute like:\r\n// {hour: 9, minute: 0}\r\nconst parseBPHour = (hour) => {\r\n if (typeof hour !== 'string') {\r\n return null;\r\n }\r\n\r\n const temp = hour.split(/\\s+/);\r\n temp[0] = temp[0].split(':').slice(0, 2).join(':');\r\n const formattedStr = temp.join(' ');\r\n\r\n return tryParseTimeString(formattedStr);\r\n};\r\n\r\n// Map Bing Places hours to business hours used in Editor.\r\nexport const mapBPTime = (BPHours = []) => {\r\n const timeSlots = [];\r\n for (let index = 0; index < BPHours.length; index += 1) {\r\n const BPHour = BPHours[index];\r\n const { StartTime, EndTime } = BPHour;\r\n const formattedStartTime = parseBPHour(StartTime);\r\n const formattedEndTime = parseBPHour(EndTime);\r\n\r\n if (!formattedStartTime || !formattedEndTime) {\r\n return [];\r\n }\r\n\r\n const { hour: openHour, minute: openMinute } = formattedStartTime;\r\n const { hour: closeHour, minute: closeMinute } = formattedEndTime;\r\n timeSlots.push({\r\n openHour,\r\n openMinute,\r\n index,\r\n isValid: true,\r\n closeHour,\r\n closeMinute,\r\n });\r\n }\r\n\r\n return timeSlots;\r\n};\r\n","import { generateGuid } from '@bingads-webui-universal/primitive-utilities';\r\n\r\nexport const generateId = prefix => `${prefix}-${generateGuid().substr(0, 8)}`;\r\n\r\nexport const generateSectionWithComponent = ({\r\n componentType,\r\n sectionIndex,\r\n}) => {\r\n const sectionId = generateId('sec');\r\n const groupId = generateId('grp');\r\n const componentId = generateId('cmp');\r\n\r\n return [\r\n {\r\n type: 'section',\r\n id: sectionId,\r\n order: sectionIndex,\r\n }, {\r\n type: 'group',\r\n id: groupId,\r\n parentId: sectionId,\r\n order: 0,\r\n }, {\r\n type: componentType,\r\n id: componentId,\r\n parentId: groupId,\r\n order: 0,\r\n },\r\n ];\r\n};\r\n","import _ from 'underscore';\r\n\r\nimport { mapBPTime } from './business-hours-mapping';\r\n\r\nexport const businessDays = {\r\n mon: _TL_('Monday'),\r\n tue: _TL_('Tuesday'),\r\n wed: _TL_('Wednesday'),\r\n thu: _TL_('Thursday'),\r\n fri: _TL_('Friday'),\r\n sat: _TL_('Saturday'),\r\n sun: _TL_('Sunday'),\r\n holiday: _TL_('Holidays'),\r\n};\r\n\r\nexport const getDayName = (day, i18n) => i18n.getString(businessDays[day]);\r\n\r\nexport const getDefaultDayHours = isHoliday => (\r\n isHoliday ? [] : [{\r\n index: 0,\r\n openHour: 9,\r\n openMinute: 0,\r\n closeHour: 17,\r\n closeMinute: 0,\r\n }]\r\n);\r\n\r\nexport const getDefaultHoursConfig = () => {\r\n const days = _.keys(businessDays);\r\n return _.map(days, (day) => {\r\n const isHoliday = (day === 'sat' || day === 'sun' || day === 'holiday');\r\n return {\r\n day,\r\n isOpenAllDay: false,\r\n timeSlots: getDefaultDayHours(isHoliday),\r\n isValid: true,\r\n };\r\n });\r\n};\r\n\r\nexport const paddingZero = number => (\r\n number > 9 ? number.toString() : `0${number}`\r\n);\r\n\r\n// 0:10 => 12:10 AM\r\n// 12:10 => 12:10 PM\r\nexport const timeToString = (time, format = 'h:mm') => {\r\n if (!time || time.hour === null || time.minute === null ||\r\n time.hour === undefined || time.minute === undefined) {\r\n return '';\r\n }\r\n\r\n const { hour, minute = 0, second = 0 } = time;\r\n const h12 = hour > 12 ? hour - 12 : hour;\r\n const formatHour = hour === 0 ? 12 : hour;\r\n\r\n switch (format) {\r\n case 'h':\r\n return hour >= 12 ? `${h12} PM` : `${formatHour} AM`;\r\n case 'h:mm':\r\n return hour >= 12 ?\r\n `${h12}:${paddingZero(minute)} PM` :\r\n `${formatHour}:${paddingZero(minute)} AM`;\r\n case 'hh':\r\n return hour >= 12 ? `${paddingZero(h12)} PM` : `${paddingZero(formatHour)} AM`;\r\n case 'hh:mm':\r\n return hour >= 12 ?\r\n `${paddingZero(h12)}:${paddingZero(minute)} PM` :\r\n `${paddingZero(formatHour)}:${paddingZero(minute)} AM`;\r\n case 'HH':\r\n return `${paddingZero(hour)}`;\r\n case 'hh:mm:ss':\r\n return hour >= 12 ?\r\n `${paddingZero(h12)}:${paddingZero(minute)}:${paddingZero(second)} PM` :\r\n `${paddingZero(formatHour)}:${paddingZero(minute)}:${paddingZero(second)} AM`;\r\n case 'HH:mm':\r\n default:\r\n return `${paddingZero(hour)}:${paddingZero(minute)}`;\r\n }\r\n};\r\n\r\nexport const getIsOpenAllDay = (day = {}) => {\r\n const { isOpenAllDay, timeSlots } = day;\r\n\r\n if (isOpenAllDay) {\r\n return true;\r\n }\r\n // For those not including isOpenAllDay field, judge on timeslots.\r\n // 12:00 AM - 11:59 PM will be regarded as all day.\r\n if (\r\n timeSlots.length === 1 && timeSlots[0]\r\n && timeSlots[0].openHour === 0 && timeSlots[0].openMinute === 0\r\n && timeSlots[0].closeHour === 23 && timeSlots[0].closeMinute === 59\r\n ) {\r\n return true;\r\n }\r\n\r\n return false;\r\n};\r\n\r\n/**\r\n * Change UI hours to WSD desired format.\r\n * @param {Array} hours Hours stored in UI side.\r\n * @returns {Array} Hours format in WSD\r\n */\r\nexport const mapHoursToWSDFormat = (hours = []) => _.map(hours, (item) => {\r\n const { day, timeSlots } = item;\r\n\r\n const formattedDay = businessDays[day];\r\n const formattedHours = _.map(timeSlots, (slot) => {\r\n const startTime = timeToString({ hour: slot.openHour, minute: slot.openMinute }, 'hh:mm:ss');\r\n const endTime = timeToString({ hour: slot.closeHour, minute: slot.closeMinute }, 'hh:mm:ss');\r\n return {\r\n StartTime: startTime,\r\n EndTime: endTime,\r\n };\r\n });\r\n\r\n return {\r\n Day: formattedDay,\r\n IsClosed: _.isEmpty(timeSlots),\r\n IsOpenAllDay: getIsOpenAllDay(item),\r\n OperationHours: formattedHours,\r\n };\r\n});\r\n\r\n/**\r\n * Change hours stored in WSD to UI format\r\n * @param {Array} hours Hours stored in WebsiteSourceData\r\n * @returns {Array} Hours in UI desired format.\r\n */\r\nexport const mapWSDHoursToHours = (hours = []) => _.map(\r\n hours,\r\n (item) => {\r\n const {\r\n Day,\r\n IsClosed,\r\n OperationHours,\r\n IsOpenAllDay,\r\n } = item;\r\n let formattedDay = Day;\r\n if (typeof Day === 'string' && Day !== 'Holidays') {\r\n formattedDay = Day.slice(0, 3).toLowerCase();\r\n } else {\r\n formattedDay = 'holiday';\r\n }\r\n\r\n const formattedTimeSlots = IsClosed ? [] : mapBPTime(OperationHours);\r\n return {\r\n day: formattedDay,\r\n isValid: true,\r\n isOpenAllDay: IsOpenAllDay,\r\n timeSlots: formattedTimeSlots,\r\n };\r\n }\r\n);\r\n","/**\r\n * @file Component Config related utility functions\r\n */\r\nimport _ from 'underscore';\r\nimport { cloneDeep } from '@bingads-webui-universal/primitive-utilities';\r\n\r\nimport { componentsConfig } from './component-config';\r\nimport { generateSectionWithComponent } from './generate-section-with-component';\r\nimport { getPilotValue } from './pilot-utils';\r\nimport { mapWSDHoursToHours } from './time-util';\r\nimport {\r\n COMPONENT_TYPE_MAPPING,\r\n COMPONENT_TO_WEBSITE_SOURCE_DATA_MAPPING,\r\n} from './site-config-structure';\r\n\r\n/**\r\n * Filter components config by pilot value.\r\n * @param {Object} serverContext Server Context\r\n * @returns {Object} All enabled components config.\r\n */\r\nexport const getEnabledComponentsConfig = (serverContext = {}) => _.pick(\r\n componentsConfig,\r\n (item) => {\r\n if (item.pilot) {\r\n return getPilotValue(serverContext, item.pilot);\r\n }\r\n return true;\r\n }\r\n);\r\n\r\n/**\r\n * Filter optional enabled components config.\r\n * @param {Object} serverContext Server Context\r\n * @returns {Object} All optional enabled components config.\r\n */\r\nexport const getOptionalEnabledComponentsConfig = (serverContext = {}) =>\r\n _.pick(getEnabledComponentsConfig(serverContext), item => !item.required);\r\n\r\n/**\r\n * Get component name => pilot value mapping.\r\n * @param {Object} serverContext Server Context\r\n * @returns {Object} component name => pilot value mapping.\r\n */\r\nexport const getComponentsPilotMapping = (serverContext = {}) => _.mapObject(\r\n componentsConfig,\r\n (item) => {\r\n if (item.pilot) {\r\n return getPilotValue(serverContext, item.pilot);\r\n }\r\n return true;\r\n }\r\n);\r\n\r\n\r\n/**\r\n * Group the components by component type.\r\n * @param {Array} components All components\r\n * @returns {object} An Object like this:\r\n * {\r\n * businessHours: {\r\n * index: componentIndex,\r\n * group: groupIndex,\r\n * section: sectionIndex,\r\n * all: [componentIndex, groupIndex, sectionIndex]\r\n * },\r\n * contact: {}\r\n * }\r\n */\r\nexport const getGroupedComponentsIndexes = (components = []) => {\r\n const id2Index = {};\r\n const componentIndexesMapping = {};\r\n\r\n _.each(components, (item, index) => {\r\n id2Index[item.id] = index;\r\n });\r\n\r\n _.each(components, (item, index) => {\r\n // Only deal with component\r\n if (item.type !== 'section' && item.type !== 'group') {\r\n const groupIndex = id2Index[item.parentId];\r\n const groupConfig = components[groupIndex];\r\n const sectionIndex = id2Index[groupConfig.parentId];\r\n\r\n if (!componentIndexesMapping[item.type]) {\r\n componentIndexesMapping[item.type] = {\r\n index,\r\n groupIndex,\r\n sectionIndex,\r\n sibilings: [],\r\n all: [sectionIndex, groupIndex, index],\r\n };\r\n } else if (groupIndex === componentIndexesMapping[item.type].groupIndex) {\r\n // sibiling node\r\n componentIndexesMapping[item.type].sibilings.push(index);\r\n componentIndexesMapping[item.type].all.push(index);\r\n }\r\n }\r\n });\r\n\r\n return componentIndexesMapping;\r\n};\r\n\r\n/**\r\n * Note: Update this function if there is any new logic after insert or delete component.\r\n * Make the components orders are correct because of new introduced component:\r\n * The new introduced component order may occupy the previous one, and thus it could cause\r\n * order collision.\r\n * @param {Array} components Current component configs.\r\n * @returns {Array} New component configs.\r\n */\r\nexport const refreshComponents = (components = []) => {\r\n const newComponents = [...components];\r\n const groupedComponentsIndexes = getGroupedComponentsIndexes(components);\r\n\r\n _.keys(groupedComponentsIndexes).forEach((key) => {\r\n const expectedOrder = componentsConfig[key].order;\r\n const { sectionIndex } = groupedComponentsIndexes[key];\r\n newComponents[sectionIndex].order = expectedOrder;\r\n });\r\n\r\n return newComponents;\r\n};\r\n\r\n/**\r\n * Insert a new component to current components.\r\n * @param {Array} components Current component configs.\r\n * @param {String} type New component type.\r\n * @returns {Object} New component configs with componentId and isExisting flag.\r\n */\r\nexport const insertNewComponent = (components = [], type = '') => {\r\n const newComponentConfig = componentsConfig[type];\r\n const existedComponent = _.findWhere(components, { type });\r\n\r\n if (_.isEmpty(newComponentConfig)) {\r\n return {\r\n components,\r\n cmpId: null,\r\n isExisting: false,\r\n };\r\n }\r\n\r\n if (!_.isEmpty(existedComponent)) {\r\n return {\r\n components,\r\n cmpId: existedComponent.id,\r\n isExisting: true,\r\n };\r\n }\r\n\r\n const { type: componentType, order } = newComponentConfig;\r\n const newSection = generateSectionWithComponent({\r\n componentType,\r\n sectionIndex: order,\r\n });\r\n const componentId = _.propertyOf(_.find(newSection, item => (item.type === type)))('id');\r\n let newComponents = [...components, ...newSection];\r\n newComponents = refreshComponents(newComponents);\r\n\r\n return {\r\n components: newComponents,\r\n cmpId: componentId,\r\n isExisting: false,\r\n };\r\n};\r\n\r\n/**\r\n * Insert a new components to current components.\r\n * @param {Array} components Current component configs.\r\n * @param {String} types New component types.\r\n * @returns {Array} A new components configs.\r\n */\r\nexport const insertNewComponents = (components = [], types = []) => {\r\n if (_.isEmpty(types)) {\r\n return components;\r\n }\r\n\r\n return _.reduce(\r\n types,\r\n (memoComponents, type) => insertNewComponent(memoComponents, type).components, components\r\n );\r\n};\r\n\r\n/**\r\n * Remove specific components in current components.\r\n * @param {Array} components Current components configs.\r\n * @param {Array} types A string array of component types.\r\n * @returns {Array} A new components configs.\r\n */\r\nexport const removeComponents = (components = [], types = []) => {\r\n if (_.isEmpty(types)) {\r\n return components;\r\n }\r\n\r\n const grouppedComponentsIndexes = getGroupedComponentsIndexes(components);\r\n\r\n const removedIndexes = [];\r\n _.each(types, (type) => {\r\n if (grouppedComponentsIndexes[type]) {\r\n removedIndexes.push(...(grouppedComponentsIndexes[type].all));\r\n }\r\n });\r\n\r\n let newComponents = _.reduce(components, (memo, value, index) => {\r\n if (!_.contains(removedIndexes, index)) {\r\n memo.push(value);\r\n }\r\n return memo;\r\n }, []);\r\n newComponents = refreshComponents(newComponents);\r\n\r\n return newComponents;\r\n};\r\n\r\n/**\r\n * Remove specific components data in current websiteSourcedData.\r\n * @param {Object} websiteSourceData website related data\r\n * @param {Array} types A string array of component types.\r\n * @returns {Object} A new websiteSourceData.\r\n */\r\nexport const removeComponentsDataInWebsiteSourceData = (websiteSourceData = {}, types = []) => {\r\n if (_.isEmpty(types)) {\r\n return websiteSourceData;\r\n }\r\n\r\n const newWebsiteSourceData = {\r\n ...websiteSourceData,\r\n };\r\n _.each(types, (type) => {\r\n const componentKeyInWSD = COMPONENT_TO_WEBSITE_SOURCE_DATA_MAPPING[type];\r\n if (componentKeyInWSD) {\r\n delete newWebsiteSourceData[componentKeyInWSD];\r\n }\r\n });\r\n\r\n return newWebsiteSourceData;\r\n};\r\n\r\n/**\r\n * Get all used component types.\r\n * @param {Array} components Current component configs.\r\n * @returns {Array} A string array of types.\r\n */\r\nexport const getUsedComponentTypes = (components = []) => _.chain(components)\r\n .filter(item => item.type !== 'section' && item.type !== 'group')\r\n .pluck('type')\r\n .value();\r\n\r\n/**\r\n* Get all used optional component types.\r\n* @param {Array} components Current component configs.\r\n* @returns {Array} A string array of types.\r\n*/\r\nexport const getUsedOptionalComponentTypes = (components = []) => {\r\n const usedCompTypes = getUsedComponentTypes(components);\r\n return _.filter(usedCompTypes, type => !componentsConfig[type].required);\r\n};\r\n\r\nconst getBusinessHoursFromWebsiteSourceData = (websiteSourceData = {}) => {\r\n if (!_.isEmpty(websiteSourceData.BusinessHours)) {\r\n return mapWSDHoursToHours(websiteSourceData.BusinessHours);\r\n }\r\n\r\n return null;\r\n};\r\n\r\n/**\r\n * Some components config needs to be expanded based on the websiteSourceData.\r\n * For those not in here, default values would be used.\r\n * Note: This method always return a complete mapping, the hidden logic of a certain\r\n * component leave inside relative component!\r\n * @param {Object} websiteSourceData website related data\r\n * @param {Object} serverContext Server Context\r\n * @returns {Object} Overrided components configs\r\n * {\r\n * introduction: {*},\r\n * header: {*}\r\n * }\r\n */\r\nexport const getOverrideCompConfigMapping = (websiteSourceData = {}) => {\r\n const componentsMapping = {\r\n introduction: {\r\n headline: websiteSourceData.BusinessName,\r\n description: websiteSourceData.Description,\r\n },\r\n coverImage: {\r\n imageId: websiteSourceData.CoverImageId,\r\n imageName: websiteSourceData.CoverImageId ? null : 'consultant.jpg',\r\n imageWidth: null,\r\n imageHeight: null,\r\n },\r\n contact: {\r\n businessHours: getBusinessHoursFromWebsiteSourceData(websiteSourceData),\r\n showEmail: !_.isEmpty(websiteSourceData.Email),\r\n showPhone: !_.isEmpty(websiteSourceData.PhoneNumber),\r\n showLocation: !_.isEmpty(websiteSourceData.SingleLineAddress),\r\n showHours: !_.isEmpty(websiteSourceData.BusinessHours),\r\n },\r\n businessHours: {\r\n businessHours: getBusinessHoursFromWebsiteSourceData(websiteSourceData),\r\n },\r\n };\r\n\r\n // Do not add optional section if data is empty.\r\n if (!_.isEmpty(websiteSourceData.GalleryImageIds)) {\r\n componentsMapping.gallery = {\r\n photos: _.map(websiteSourceData.GalleryImageIds, imageId => ({ imageId })),\r\n };\r\n }\r\n\r\n if (!_.isEmpty(websiteSourceData.SocialUrls)) {\r\n componentsMapping.socialLinks = _.keys(websiteSourceData.SocialUrls).reduce((obj, key) => {\r\n const value = websiteSourceData.SocialUrls[key];\r\n const keyName = `${key.toLowerCase()}Link`;\r\n\r\n return {\r\n ...obj,\r\n [keyName]: {\r\n isDisplay: !!value,\r\n value,\r\n },\r\n };\r\n }, {});\r\n }\r\n\r\n if (!_.isEmpty(websiteSourceData.Description)) {\r\n componentsMapping.summary = {\r\n businessSummary: websiteSourceData.Description,\r\n };\r\n }\r\n\r\n return componentsMapping;\r\n};\r\n\r\n/**\r\n * If a pilot for components is off, remove related component configs in Pages.\r\n * @param {Array} components Current complete components config\r\n * @param {Object} enabledComponentsConfig Enabled component configs\r\n * @returns {Array} New components config after removing disabled components\r\n */\r\nexport const removeDisabledComponents = (components = [], enabledComponentsConfig = {}) => {\r\n const allUsedComponentTypes = getUsedComponentTypes(components);\r\n\r\n // Pick component types that had been created but not available now because of close pilot.\r\n const removedComponentTypes = _.difference(\r\n allUsedComponentTypes,\r\n _.keys(enabledComponentsConfig)\r\n );\r\n const newComponents = removeComponents(components, removedComponentTypes);\r\n\r\n return newComponents;\r\n};\r\n\r\n\r\n/**\r\n * In some smart page, there are multiple components for the same type in the site config.\r\n * Not sure how it is generated, but for now every component should only be showed once.\r\n * https://msasg.visualstudio.com/Bing_Ads/_workitems/edit/4234631\r\n *\r\n * @param {Array} components Current component configs.\r\n * @returns {Array} New component configs.\r\n */\r\nexport const removeDuplicatedComponents = (components) => {\r\n const newComponents = [...components];\r\n const groupedComponentsIndexes = getGroupedComponentsIndexes(components);\r\n const usedType = {};\r\n\r\n const cmpTypes = getUsedComponentTypes(components);\r\n\r\n _.each(cmpTypes, (type) => {\r\n if (usedType[type] && _.isEmpty(groupedComponentsIndexes[type].sibilings)) {\r\n const { all } = groupedComponentsIndexes[type];\r\n\r\n _.each(all, (index) => {\r\n newComponents[index] = null;\r\n });\r\n } else {\r\n usedType[type] = true;\r\n }\r\n });\r\n\r\n return _.compact(newComponents);\r\n};\r\n\r\n/**\r\n * If add new component type, using this function to generate new component configs from\r\n * existing smart page data.\r\n * Example: If a user does not have a Independent Business Hours Component, generate a new one\r\n * from existing Contact Component.\r\n *\r\n * If there are more new components, consider to create a transform config file.\r\n * @param {Array} components Current complete component configs\r\n * @param {Object} enabledComponentsConfig Enabled component configs\r\n * @returns {Array} New components config after generate new components.\r\n */\r\nexport const generateNewCmpsFromExistingData = (components = [], enabledComponentsConfig = {}) => {\r\n let newComponents = [...components];\r\n\r\n // Independent Business Hours section\r\n const isBusinessHoursEnabled = !!enabledComponentsConfig[COMPONENT_TYPE_MAPPING.BusinessHours];\r\n\r\n if (isBusinessHoursEnabled) {\r\n const contactComponentConfig = _.find(\r\n newComponents,\r\n item => item.type === COMPONENT_TYPE_MAPPING.Contact\r\n );\r\n\r\n // Handle \"showHours\" logic:\r\n // According to current logic, if the showHours is true or undefined,\r\n // they both mean the user is using Business hours. The explicit false value means\r\n // the user closed the business hours.\r\n if (contactComponentConfig.showHours === false) {\r\n newComponents = removeComponents(newComponents, [COMPONENT_TYPE_MAPPING.BusinessHours]);\r\n } else {\r\n // whether the Business Hour Section exists is handled inside the insertNewComponent function.\r\n newComponents = insertNewComponent(\r\n components,\r\n COMPONENT_TYPE_MAPPING.BusinessHours\r\n ).components;\r\n\r\n const businessHoursComponentIndex = _.findIndex(\r\n newComponents,\r\n { type: COMPONENT_TYPE_MAPPING.BusinessHours }\r\n );\r\n newComponents[businessHoursComponentIndex].businessHours = _.map(\r\n contactComponentConfig.businessHours,\r\n day => cloneDeep(day)\r\n );\r\n }\r\n }\r\n\r\n return newComponents;\r\n};\r\n","export const linkNameToModel = {\r\n facebookLink: 'Facebook',\r\n instagramLink: 'Instagram',\r\n twitterLink: 'Twitter',\r\n linkedinLink: 'LinkedIn',\r\n youtubeLink: 'Youtube',\r\n pinterestLink: 'Pinterest',\r\n};\r\n","import _ from 'underscore';\r\n\r\nimport { DATA_SOURCE_KEY_MAPPING } from '../site-config-structure';\r\nimport { componentsConfig } from '../component-config';\r\nimport { getDataSourceByKey, getComponentByTypes } from '../site-config-reader';\r\n\r\n/**\r\n * Get all image ids in component config\r\n * We have logo from header, cover image, gallery, updates and reviews\r\n * id collision for Smart Page image id\r\n * @param {object} siteConfig smart page config\r\n * @returns {object} image id list map for each type\r\n */\r\nexport const getAllImageIdsWithType = (siteConfig) => {\r\n const logoImageId = getDataSourceByKey(siteConfig, DATA_SOURCE_KEY_MAPPING.LogoImageId);\r\n const [\r\n photoConfig,\r\n coverImageConfig,\r\n updateConfig,\r\n reviewConfig,\r\n ] = getComponentByTypes(siteConfig, [\r\n componentsConfig.gallery.type,\r\n componentsConfig.coverImage.type,\r\n componentsConfig.update.type,\r\n componentsConfig.review.type,\r\n ]);\r\n\r\n const { photos } = photoConfig || {};\r\n const { imageId: coverImageId } = coverImageConfig || {};\r\n const { updates } = updateConfig || {};\r\n const { reviews } = reviewConfig || {};\r\n\r\n // Don't do distinct imageId, we need each usage of an image\r\n return {\r\n logo: logoImageId ? [logoImageId] : [],\r\n gallery: !_.isEmpty(photos) ? _.compact(_.map(photos, photo => photo.imageId)) : [],\r\n update: !_.isEmpty(updates) ? _.compact(_.map(updates, update => update.imageId)) : [],\r\n reviewer: !_.isEmpty(reviews) ? _.compact(_.map(\r\n reviews,\r\n review => review.reviewer && review.reviewer.imageId\r\n )) : [],\r\n coverImage: coverImageId ? [coverImageId] : [],\r\n };\r\n};\r\n\r\nexport const filterImageIdsToRemove = (siteConfig, imageIdsToRemove) => {\r\n if (_.isEmpty(imageIdsToRemove) || !_.isArray(imageIdsToRemove)) {\r\n return [];\r\n }\r\n\r\n const allImageIds = _.flatten(Object.values(getAllImageIdsWithType(siteConfig)));\r\n\r\n const finalImageIdsToRemove = [];\r\n\r\n imageIdsToRemove.forEach((imageId) => {\r\n const count = allImageIds.filter(id => imageId === id).length;\r\n\r\n // Save to remove the image if it was used only once\r\n if (count <= 1) {\r\n finalImageIdsToRemove.push(imageId);\r\n }\r\n });\r\n\r\n return finalImageIdsToRemove;\r\n};\r\n\r\nexport const getImageMetaById = (siteConfig, imageId) => {\r\n if (!imageId) return {};\r\n\r\n const image = _.find(siteConfig.images, ({\r\n IdString,\r\n }) => (imageId === IdString));\r\n\r\n return image || {};\r\n};\r\n\r\nexport const getImageUrlById = (siteConfig, imageId) => {\r\n const image = getImageMetaById(siteConfig, imageId);\r\n\r\n return image && image.ImageUrl;\r\n};\r\n","/* eslint-disable no-param-reassign */\r\nimport _ from 'underscore';\r\n\r\nimport { generateGuid, cloneDeep } from '@bingads-webui-universal/primitive-utilities';\r\n\r\nimport {\r\n getComponentByType,\r\n getDataSourceByKeys,\r\n getDataSourceByKey,\r\n getWebsiteSourceDataByKey,\r\n} from './site-config-reader';\r\nimport {\r\n DATA_SOURCE_KEY_MAPPING,\r\n COMPONENT_TYPE_MAPPING,\r\n WEBSITE_SOURCE_DATA_KEY_MAPPING,\r\n DATA_SOURCE_TO_WEBSITE_SOURCE_DATA_MAPPING,\r\n} from './site-config-structure';\r\nimport { mapHoursToWSDFormat, getDefaultHoursConfig } from './time-util';\r\nimport { linkNameToModel } from './social-link-util';\r\nimport { getImageUrlById } from './image/site-config-image-reader';\r\nimport { getComponentsPilotMapping } from './component-utils';\r\n\r\nexport const convertCallToActionId = (callToActions) => {\r\n _.each(callToActions, (action) => {\r\n action.CallToActionId = action.CallToActionId || action.Id;\r\n delete action.Id;\r\n });\r\n};\r\n\r\nexport const updateWebsiteSourceDataWithBasicData = (siteConfig, smartPageData, key, overwrite) => {\r\n const wsdKey = DATA_SOURCE_TO_WEBSITE_SOURCE_DATA_MAPPING[key];\r\n\r\n if (!wsdKey || _.isEmpty(siteConfig) || _.isEmpty(smartPageData)) {\r\n return;\r\n }\r\n\r\n siteConfig.websiteSourceData = siteConfig.websiteSourceData || {};\r\n\r\n const shouldSetValue = overwrite ||\r\n (!overwrite && _.isEmpty(siteConfig.websiteSourceData[wsdKey]));\r\n\r\n if (shouldSetValue) {\r\n if (wsdKey === WEBSITE_SOURCE_DATA_KEY_MAPPING.Email && !_.isEmpty(smartPageData[key])) {\r\n [siteConfig.websiteSourceData[wsdKey]] = smartPageData[key];\r\n\r\n return;\r\n }\r\n\r\n siteConfig.websiteSourceData[wsdKey] = smartPageData[key];\r\n\r\n if (wsdKey === WEBSITE_SOURCE_DATA_KEY_MAPPING.CallToActions) {\r\n siteConfig.websiteSourceData.CallToActions =\r\n cloneDeep(siteConfig.websiteSourceData.CallToActions);\r\n convertCallToActionId(siteConfig.websiteSourceData.CallToActions);\r\n }\r\n }\r\n};\r\n\r\n// Enrich this config as need\r\nconst WSDFieldConfig = {\r\n BusinessName: {\r\n getter: siteConfig => getDataSourceByKey(siteConfig, DATA_SOURCE_KEY_MAPPING.BusinessName),\r\n },\r\n Description: {\r\n getter: (siteConfig) => {\r\n const [businessDescription, businessCategories] = getDataSourceByKeys(siteConfig, [\r\n DATA_SOURCE_KEY_MAPPING.BusinessDescription,\r\n DATA_SOURCE_KEY_MAPPING.BusinessCategories,\r\n ]);\r\n const descriptionFromCategory = businessCategories && businessCategories.join(', ');\r\n\r\n return businessDescription || descriptionFromCategory || '';\r\n },\r\n },\r\n Introduction: {\r\n getter: siteConfig => getWebsiteSourceDataByKey(\r\n siteConfig,\r\n WEBSITE_SOURCE_DATA_KEY_MAPPING.Introduction\r\n ),\r\n },\r\n Categories: {\r\n getter: siteConfig => getDataSourceByKey(\r\n siteConfig,\r\n DATA_SOURCE_KEY_MAPPING.BusinessCategories\r\n ),\r\n },\r\n SingleLineAddress: {\r\n getter: siteConfig => getDataSourceByKey(\r\n siteConfig,\r\n DATA_SOURCE_KEY_MAPPING.LocationInfo\r\n ),\r\n },\r\n PhoneNumber: {\r\n getter: siteConfig => getDataSourceByKey(\r\n siteConfig,\r\n DATA_SOURCE_KEY_MAPPING.PhoneNumber\r\n ),\r\n },\r\n CoverImageUrl: {\r\n getter: (siteConfig) => {\r\n const coverImageInfo = getComponentByType(siteConfig, DATA_SOURCE_KEY_MAPPING.CoverImage);\r\n\r\n return (coverImageInfo && coverImageInfo.imageId)\r\n ? getImageUrlById(siteConfig, coverImageInfo.imageId)\r\n : siteConfig.localImageUrl;\r\n },\r\n },\r\n CoverImageId: {\r\n getter: (siteConfig) => {\r\n const coverImageInfo = getComponentByType(siteConfig, DATA_SOURCE_KEY_MAPPING.CoverImage);\r\n\r\n return coverImageInfo && coverImageInfo.imageId;\r\n },\r\n },\r\n LogoImageId: {\r\n getter: siteConfig => getDataSourceByKey(\r\n siteConfig,\r\n DATA_SOURCE_KEY_MAPPING.LogoImageId\r\n ),\r\n },\r\n LogoImageUrl: {\r\n getter: (siteConfig) => {\r\n const logoImageId = getDataSourceByKey(\r\n siteConfig,\r\n DATA_SOURCE_KEY_MAPPING.LogoImageId\r\n );\r\n\r\n return getImageUrlById(siteConfig, logoImageId);\r\n },\r\n },\r\n GalleryImages: {\r\n getter: (siteConfig) => {\r\n const galleryImageInfo = getComponentByType(siteConfig, COMPONENT_TYPE_MAPPING.Gallery);\r\n const galleryPhotos = galleryImageInfo ? galleryImageInfo.photos : [];\r\n const galleryImageIds = _.map(galleryPhotos, photo => photo.imageId);\r\n\r\n return _.chain(galleryImageIds)\r\n .map(imageId => getImageUrlById(siteConfig, imageId))\r\n .filter(item => !!item)\r\n .value();\r\n },\r\n },\r\n GalleryImageIds: {\r\n getter: (siteConfig) => {\r\n const galleryImageInfo = getComponentByType(siteConfig, COMPONENT_TYPE_MAPPING.Gallery);\r\n const galleryPhotos = galleryImageInfo ? galleryImageInfo.photos : [];\r\n\r\n return _.map(galleryPhotos, photo => photo.imageId);\r\n },\r\n },\r\n Subdomain: {\r\n getter: siteConfig => (siteConfig.subDomain || generateGuid()),\r\n },\r\n Email: {\r\n getter: (siteConfig) => {\r\n const emails = getDataSourceByKey(\r\n siteConfig,\r\n DATA_SOURCE_KEY_MAPPING.Emails\r\n );\r\n\r\n return emails && emails[0];\r\n },\r\n },\r\n SocialUrls: {\r\n getter: (siteConfig) => {\r\n const socialLinksInfo = getComponentByType(siteConfig, COMPONENT_TYPE_MAPPING.SocialLinks);\r\n const socialLinks = _.keys(socialLinksInfo).reduce((acc, key) => {\r\n if (linkNameToModel[key] && socialLinksInfo[key].isDisplay) {\r\n const linkName = linkNameToModel[key];\r\n acc[linkName] = socialLinksInfo[key].value;\r\n }\r\n return acc;\r\n }, {});\r\n\r\n return socialLinks;\r\n },\r\n },\r\n BusinessHours: {\r\n getter: (siteConfig, pilots) => {\r\n // When business hours componment is available, read data from it,\r\n // otherwise read data from Contact.\r\n const businessHoursSourceInfo = getComponentByType(\r\n siteConfig,\r\n pilots[COMPONENT_TYPE_MAPPING.BusinessHours]\r\n ? COMPONENT_TYPE_MAPPING.BusinessHours\r\n : COMPONENT_TYPE_MAPPING.Contact\r\n );\r\n const businessHoursInfo = businessHoursSourceInfo\r\n ? businessHoursSourceInfo.businessHours\r\n : [];\r\n\r\n return mapHoursToWSDFormat(businessHoursInfo);\r\n },\r\n },\r\n CallToActions: {\r\n getter: (siteConfig) => {\r\n const callToActions = getDataSourceByKey(\r\n siteConfig,\r\n DATA_SOURCE_KEY_MAPPING.CallToActions,\r\n [],\r\n false\r\n );\r\n // OData model uses Id, so we have to convert Id to CallToActionId.\r\n convertCallToActionId(callToActions);\r\n\r\n return callToActions;\r\n },\r\n },\r\n EmbeddedVideos: {\r\n defaultValue: [],\r\n getter: siteConfig => getWebsiteSourceDataByKey(\r\n siteConfig,\r\n WEBSITE_SOURCE_DATA_KEY_MAPPING.EmbeddedVideos\r\n ),\r\n },\r\n Locations: {\r\n defaultValue: [],\r\n getter: siteConfig => getWebsiteSourceDataByKey(\r\n siteConfig,\r\n WEBSITE_SOURCE_DATA_KEY_MAPPING.Locations\r\n ),\r\n },\r\n Theme: {\r\n defaultValue: {\r\n Mode: 'Light',\r\n AccentColor: 'Default',\r\n },\r\n getter: siteConfig => getWebsiteSourceDataByKey(\r\n siteConfig,\r\n WEBSITE_SOURCE_DATA_KEY_MAPPING.Theme\r\n ),\r\n },\r\n Services: {\r\n defaultValue: [],\r\n getter: siteConfig => getWebsiteSourceDataByKey(\r\n siteConfig,\r\n WEBSITE_SOURCE_DATA_KEY_MAPPING.Services\r\n ),\r\n },\r\n Appointment: {\r\n defaultValue: {},\r\n getter: (siteConfig) => {\r\n const appointment = getWebsiteSourceDataByKey(\r\n siteConfig,\r\n WEBSITE_SOURCE_DATA_KEY_MAPPING.Appointment\r\n ) || {};\r\n const CTAConfig = getComponentByType(\r\n siteConfig,\r\n COMPONENT_TYPE_MAPPING.CallToAction\r\n ) || {};\r\n\r\n if (\r\n CTAConfig.actionType === 'BookAppointment'\r\n && CTAConfig.isExternalLink === false\r\n && _.isEmpty(appointment.AppointmentHours)\r\n ) {\r\n // Business Hours may store in two places: Business Hours Component and Contact Component.\r\n const bizHourConfig = getComponentByType(siteConfig, COMPONENT_TYPE_MAPPING.BusinessHours);\r\n const contactConfig = getComponentByType(siteConfig, COMPONENT_TYPE_MAPPING.Contact);\r\n let businessHours = _.propertyOf(bizHourConfig)(DATA_SOURCE_KEY_MAPPING.BusinessHours);\r\n if (_.isEmpty(bizHourConfig)) {\r\n businessHours = _.propertyOf(contactConfig)(DATA_SOURCE_KEY_MAPPING.BusinessHours);\r\n }\r\n\r\n let fallbackHours = getDefaultHoursConfig();\r\n if (!_.isEmpty(businessHours)) {\r\n fallbackHours = businessHours;\r\n }\r\n\r\n // Filter out \"Holidays\", not support holidays now.\r\n fallbackHours = _.filter(fallbackHours, item => item.day !== 'holiday');\r\n\r\n return {\r\n AppointmentHours: mapHoursToWSDFormat(fallbackHours),\r\n Services: [],\r\n };\r\n }\r\n\r\n return appointment;\r\n },\r\n },\r\n Reviews: {\r\n defaultValue: [],\r\n getter: siteConfig => getWebsiteSourceDataByKey(\r\n siteConfig,\r\n WEBSITE_SOURCE_DATA_KEY_MAPPING.Reviews\r\n ),\r\n },\r\n TimeZoneId: {\r\n defaultValue: 71,\r\n getter: siteConfig => getWebsiteSourceDataByKey(\r\n siteConfig,\r\n WEBSITE_SOURCE_DATA_KEY_MAPPING.TimeZoneId\r\n ),\r\n },\r\n PrivacyPolicy: {\r\n defaultValue: '',\r\n getter: siteConfig => getWebsiteSourceDataByKey(\r\n siteConfig,\r\n WEBSITE_SOURCE_DATA_KEY_MAPPING.PrivacyPolicy\r\n ),\r\n },\r\n Localization: {\r\n defaultValue: '',\r\n getter: siteConfig => getWebsiteSourceDataByKey(\r\n siteConfig,\r\n WEBSITE_SOURCE_DATA_KEY_MAPPING.Localization\r\n ),\r\n },\r\n};\r\n\r\nexport const createWebsiteSourceData = (siteConfig, serverContext = {}) => {\r\n const componentsPilotMapping = getComponentsPilotMapping(serverContext);\r\n\r\n return _.mapObject(WSDFieldConfig, (val) => {\r\n // The third parameter can treat as \"this\", in case we want to reuse some calculation logic\r\n // inside the \"getter\", like using \"businessHours\" inside the \"appointments\".\r\n const value = val.getter(siteConfig, componentsPilotMapping, WSDFieldConfig);\r\n return value || val.defaultValue;\r\n });\r\n};\r\n","import _ from 'underscore';\r\n\r\nimport { mapFbHours } from './business-hours-mapping';\r\nimport { generateSectionWithComponent, generateId } from './generate-section-with-component';\r\nimport {\r\n generateNewCmpsFromExistingData,\r\n getEnabledComponentsConfig,\r\n getOverrideCompConfigMapping,\r\n removeDuplicatedComponents,\r\n} from './component-utils';\r\nimport { createWebsiteSourceData } from './website-source-data-util';\r\nimport { getTimeZoneId } from './site-config-reader';\r\nimport { WEBSITE_SOURCE_DATA_KEY_MAPPING } from './site-config-structure';\r\n\r\nconst fbRelatedComponents = [\r\n 'review',\r\n 'update',\r\n];\r\n\r\n/**\r\n * Generate attributes from websiteSourceData\r\n * @param {Object} websiteSourceData website related data\r\n * @param {Object} serverContext server context\r\n * @returns {Array} A generated attributes\r\n */\r\nconst websiteSourceDataToAttributes = (websiteSourceData = {}, serverContext) => {\r\n const overridedCompConfigMapping = getOverrideCompConfigMapping(websiteSourceData);\r\n // Map website source data to pages\r\n const pages = [{\r\n id: generateId('pge'),\r\n components: [],\r\n }];\r\n\r\n const enabledComponentsConfig = getEnabledComponentsConfig(serverContext);\r\n\r\n _.each(enabledComponentsConfig, (comp) => {\r\n const { type, order } = comp;\r\n\r\n if (!fbRelatedComponents.includes(type)) {\r\n const sectionConfig = generateSectionWithComponent({\r\n componentType: type,\r\n sectionIndex: order,\r\n });\r\n\r\n // Will always has return\r\n const config = _.find(sectionConfig, item => item.type === type);\r\n\r\n // We take what are provided and what are required.\r\n if (overridedCompConfigMapping[type]) {\r\n _.extend(config, overridedCompConfigMapping[type]);\r\n pages[0].components.push(...sectionConfig);\r\n } else if (comp.required) {\r\n pages[0].components.push(...sectionConfig);\r\n }\r\n }\r\n });\r\n\r\n // Map website source data to dataSource\r\n const dataSource = {\r\n businessCategories: websiteSourceData.Categories,\r\n businessDescription: websiteSourceData.Description,\r\n businessName: websiteSourceData.BusinessName,\r\n emails: [websiteSourceData.Email],\r\n locationInfo: websiteSourceData.SingleLineAddress,\r\n logoImageId: websiteSourceData.LogoImageId,\r\n phoneNumber: websiteSourceData.PhoneNumber,\r\n };\r\n\r\n // BP user navigate to main page directly, so entry wizard will not be shown again\r\n const siteContextInfo = {\r\n hasEntryWizardShown: true,\r\n hasQualtricsPopupShown: false,\r\n };\r\n\r\n return [\r\n {\r\n Key: 'dataSource',\r\n Value: JSON.stringify(dataSource),\r\n },\r\n {\r\n Key: 'pages',\r\n Value: JSON.stringify(pages),\r\n },\r\n {\r\n Key: 'theme',\r\n Value: JSON.stringify({ themeId: 'theme_gray' }),\r\n },\r\n {\r\n Key: 'siteContextInfo',\r\n Value: JSON.stringify(siteContextInfo),\r\n },\r\n ];\r\n};\r\n\r\n/**\r\n * Update config based on existing config and serverContext when pilot is turn ON and OFF\r\n * @param {Object} siteConfig The complete data for a smart page\r\n * @param {Object} serverContext Server Context\r\n * @returns {Array} The updated components.\r\n */\r\nconst updateComponents = (siteConfig, serverContext) => {\r\n let allComponents = (siteConfig.pages && siteConfig.pages[0]\r\n && siteConfig.pages[0].components) || [];\r\n\r\n if (_.isEmpty(allComponents)) {\r\n return siteConfig;\r\n }\r\n\r\n const newSiteConfig = { ...siteConfig };\r\n const enabledComponentsConfig = getEnabledComponentsConfig(serverContext);\r\n\r\n allComponents = removeDuplicatedComponents(allComponents);\r\n newSiteConfig.pages[0].components = generateNewCmpsFromExistingData(\r\n allComponents,\r\n enabledComponentsConfig\r\n );\r\n\r\n return newSiteConfig;\r\n};\r\n\r\n/**\r\n * Create new websiteSourceData if it doesn't exist, then update it with serverContext\r\n * @param {Object} siteConfig Complete data for Smart Page\r\n * @param {Object} serverContext ServerContext\r\n * @returns {Object} newWebsiteSourceData\r\n */\r\nconst updateWebsiteSourceData = (siteConfig, serverContext) => {\r\n const {\r\n websiteSourceData,\r\n dataSource,\r\n pages,\r\n } = siteConfig;\r\n let newWebsiteSourceData = websiteSourceData || {};\r\n\r\n if (_.isEmpty(websiteSourceData) && !_.isEmpty(dataSource) && !_.isEmpty(pages)) {\r\n newWebsiteSourceData = createWebsiteSourceData(siteConfig, serverContext);\r\n }\r\n\r\n newWebsiteSourceData[WEBSITE_SOURCE_DATA_KEY_MAPPING.TimeZoneId] = getTimeZoneId(\r\n serverContext,\r\n siteConfig\r\n );\r\n\r\n return newWebsiteSourceData;\r\n};\r\n\r\n/**\r\n * Convert model used in MT to Siteconfig in UI side.\r\n * @param {Object} model A complete data get from MT call\r\n * @param {Object} serverContext Server context\r\n * @returns {Object} Site config used in UI side\r\n */\r\nexport const modelToSiteConfig = (model, serverContext = {}) => {\r\n const siteConfig = {\r\n id: model.Id,\r\n name: model.Name,\r\n status: model.Status,\r\n subDomain: model.SubDomain,\r\n siteSuffix: model.SiteSuffix,\r\n uetTagId: model.UetTagId,\r\n isMTagMigrated: model.IsMTagMigrated,\r\n associations: model.Associations,\r\n isEditorialRejected: model.IsEditorialRejected,\r\n smartPageDataContext: model.SmartPageDataContext,\r\n domainDetail: model.DomainDetail,\r\n websiteSourceData: model.WebsiteSourceData,\r\n migrationContext: model.WSDMigrationContext,\r\n previewId: model.PreviewId,\r\n images: model.Images,\r\n localImageUrl: '',\r\n snapshots: {},\r\n };\r\n\r\n // Bing Places created website may not have Attributes property,\r\n // creating the Attributes with WebsiteSourceData will be needed.\r\n const attrs = !_.isEmpty(model.Attributes)\r\n ? model.Attributes\r\n : websiteSourceDataToAttributes(model.WebsiteSourceData);\r\n _.each(attrs, (attr) => {\r\n siteConfig[attr.Key] = JSON.parse(attr.Value);\r\n });\r\n\r\n const snapshotsAttrs = model.Snapshots;\r\n _.each(snapshotsAttrs, (snapshotAttr) => {\r\n siteConfig.snapshots[snapshotAttr.Key] = JSON.parse(snapshotAttr.Value);\r\n });\r\n\r\n // Existing smart pages won't have migrationContext\r\n // Setting a default value allows to revert the migration status\r\n // of a component successfully.\r\n siteConfig.snapshots.migrationContext = siteConfig.snapshots.migrationContext || {};\r\n\r\n const newSiteConfig = updateComponents(siteConfig, serverContext);\r\n newSiteConfig.websiteSourceData = updateWebsiteSourceData(newSiteConfig, serverContext);\r\n\r\n return newSiteConfig;\r\n};\r\n\r\n/**\r\n * Convert Facebook page data to Siteconfig.\r\n * @param {*} fbPage Facebook page related data\r\n * @returns {Object} A new site config used in UI side.\r\n */\r\nexport const facebookPageToSiteConfig = (fbPage) => {\r\n const siteInfoData = {\r\n facebookId: fbPage.Id,\r\n facebookUserId: fbPage.FbUserId,\r\n businessName: fbPage.Name || '',\r\n businessCategories: _.pluck(fbPage.CategoryList, 'Name') || [],\r\n businessDescription: fbPage.About || '',\r\n businessHours: mapFbHours(fbPage.Hours),\r\n phoneNumber: fbPage.Phone,\r\n locationInfo: fbPage.SingleLineAddress,\r\n callToActions: fbPage.CallToActions,\r\n profilePicture: fbPage.Picture && fbPage.Picture.Url,\r\n posts: _.isEmpty(fbPage.Posts) ? []\r\n : fbPage.Posts.filter(post => post.FullPicture || post.Message),\r\n reviews: fbPage.Ratings,\r\n coverImage: fbPage.Cover && fbPage.Cover.Source,\r\n emails: fbPage.Emails,\r\n photos: fbPage.Photos,\r\n fbErrors: fbPage.FbErrors,\r\n };\r\n\r\n return siteInfoData;\r\n};\r\n","import _ from 'underscore';\r\nimport { getComponentByTypeFromPageComponents } from './site-config-reader';\r\nimport { generateId } from './generate-section-with-component';\r\n\r\nconst fbAction2ComponentConfig = (action) => {\r\n const component = {\r\n type: 'callToAction',\r\n };\r\n\r\n switch (action.Type) {\r\n case 'CALL_NOW':\r\n return _.extend(component, { actionType: 'CallNow', 'data-source-name': 'phoneNumber' });\r\n case 'EMAIL':\r\n return _.extend(component, { actionType: 'SendMail', 'data-source-name': 'email' });\r\n case 'GET_DIRECTIONS':\r\n return _.extend(component, { actionType: 'GetDirections', 'data-source-name': 'locationInfo' });\r\n case 'REQUEST_QUOTE':\r\n return _.extend(component, { actionType: 'GetQuote' });\r\n case 'CONTACT_US':\r\n return _.extend(component, { actionType: 'ContactUs' });\r\n case 'BOOK_APPOINTMENT':\r\n return _.extend(component, { actionType: 'BookAppointment', linkUrl: action.WebUrl });\r\n // TODO(Nickyang): Disable following actionTypes as we don't support them now\r\n // case 'SHOP_NOW':\r\n // return _.extend(component, { actionType: 'ShopNow', linkUrl: action.WebUrl });\r\n // case 'SIGN_UP':\r\n // return _.extend(component, { actionType: 'SignUp', linkUrl: action.WebUrl });\r\n // case 'ORDER_FOOD':\r\n // return _.extend(component, { actionType: 'OrderFood', linkUrl: action.WebUrl });\r\n // case 'PURCHASE_GIFT_CARDS':\r\n // return _.extend(component, { actionType: 'PurchaseGiftCard', linkUrl: action.WebUrl });\r\n default:\r\n return null;\r\n }\r\n};\r\n\r\nexport const fbActions2SmartActionButtons = (fbDataSource) => {\r\n const actionComponents = _.chain(fbDataSource.callToActions)\r\n .map(fbAction2ComponentConfig)\r\n .compact()\r\n .value();\r\n return _.filter(actionComponents, cmp => _.has(cmp, 'linkUrl'));\r\n};\r\n\r\nexport const appendActions2Components = (components, actionCmps) => {\r\n const callToActionCmp = getComponentByTypeFromPageComponents(components, 'callToAction');\r\n\r\n if (!_.isEmpty(actionCmps) && callToActionCmp !== undefined) {\r\n _.map(actionCmps, (cmp) => {\r\n _.extend(cmp, {\r\n id: generateId('cmp'),\r\n parentId: callToActionCmp.parentId,\r\n });\r\n });\r\n components.splice(callToActionCmp.index + 1, 0, ...actionCmps);\r\n }\r\n};\r\n","export const truncateString = (string, limit) => {\r\n if (!string) {\r\n return '';\r\n }\r\n\r\n return string.substring(0, limit);\r\n};\r\n\r\nexport const promiseLogWrapper = (promise, logger, actionName = 'Promise', domainName = 'Editor') => (args) => {\r\n logger.logTrace(`${actionName}Start|${domainName}`);\r\n return promise(args)\r\n .catch((err) => {\r\n logger.logError(`${actionName}Error|${domainName}`, err);\r\n throw err;\r\n })\r\n .finally(() => {\r\n logger.logTrace(`${actionName}End|${domainName}`);\r\n });\r\n};\r\n\r\nexport const isStringEndWithEmoji = (string) => {\r\n const regex = /.*(\\u00a9|\\u00ae|[\\u2000-\\u3300]|\\ud83c[\\ud000-\\udfff]|\\ud83d[\\ud000-\\udfff]|\\ud83e[\\ud000-\\udfff])$/;\r\n return regex.test(string);\r\n};\r\n\r\nexport const truncateStringEndWithEmoji = (string, limit) => {\r\n if (!string) {\r\n return '';\r\n }\r\n\r\n if (string.length <= limit) {\r\n return string;\r\n }\r\n\r\n // 1 emoji = 2 chars\r\n if (isStringEndWithEmoji(string.substring(0, limit + 1))) {\r\n return string.substring(0, limit - 1);\r\n }\r\n\r\n return string.substring(0, limit);\r\n};\r\n\r\nexport const removeStringEmoji = (string) => {\r\n const regex = /(\\u00a9|\\u00ae|[\\u2000-\\u3300]|\\ud83c[\\ud000-\\udfff]|\\ud83d[\\ud000-\\udfff]|\\ud83e[\\ud000-\\udfff])/g;\r\n return string.replace(regex, '');\r\n};\r\n","import _ from 'underscore';\r\n\r\nimport { cloneDeep } from '@bingads-webui-universal/primitive-utilities';\r\n\r\nimport {\r\n fbActions2SmartActionButtons,\r\n appendActions2Components,\r\n} from './action-button-mapping';\r\nimport { truncateString } from './common-util';\r\nimport { updateWebsiteSourceDataWithBasicData } from './website-source-data-util';\r\n\r\nexport const businessNameMaxLength = 25;\r\n\r\n// TODO: confirm with Jie for callToActions and hours\r\nconst validAttrs = [\r\n 'businessDescription',\r\n 'businessCategories',\r\n 'businessName',\r\n 'callToActions',\r\n 'emails',\r\n 'locationInfo',\r\n 'logoImageId',\r\n 'phoneNumber',\r\n 'businessHours',\r\n];\r\n\r\nconst fbDataSourceFilter = (originDataSource) => {\r\n const dataSource = _.pick(originDataSource, ...validAttrs);\r\n dataSource.businessName = truncateString(dataSource.businessName, businessNameMaxLength);\r\n\r\n return dataSource;\r\n};\r\n\r\nexport const importConfigFromFbDataSource = (siteConfig, fbDataSource) => {\r\n const pageIndex = 0;\r\n const filteredFbDataSource = fbDataSourceFilter(fbDataSource);\r\n\r\n _.each(validAttrs, attr =>\r\n updateWebsiteSourceDataWithBasicData(siteConfig, filteredFbDataSource, attr, true));\r\n\r\n const newSiteConfig = {\r\n // Make sure the later update below L44 for pages is not touching the orignial obj......\r\n // Which makes the siteConfigReducer compares the same value in some cases.\r\n ...cloneDeep(siteConfig),\r\n dataSource: filteredFbDataSource,\r\n siteContextInfo: {\r\n facebookPageName: filteredFbDataSource.businessName,\r\n },\r\n };\r\n\r\n // TODO(Nickyang): We don't support multiple CTA now and this part of logic should\r\n // be changed as replace rather than insert.\r\n // map fbDataSource.callToActions to SmartActionButton component config and insert in siteConfig\r\n const standaloneActionCmps = fbActions2SmartActionButtons(fbDataSource);\r\n appendActions2Components(newSiteConfig.pages[pageIndex].components, standaloneActionCmps);\r\n\r\n return newSiteConfig;\r\n};\r\n","export const hostSystemScenario = {\r\n DMC: 'DMC',\r\n EXPERT: 'Expert',\r\n};\r\n\r\n","import { useState, useEffect } from 'react';\r\n\r\nconst mobileMaxWidth = 640;\r\nconst smallDesktopMaxWidth = 1024;\r\nconst mediumDesktopMaxWidth = 1366;\r\n\r\nexport const ResponsiveMode = {\r\n Mobile: 'mobile',\r\n SmallDesktop: 'small-desktop',\r\n MediumDesktop: 'medium-desktop',\r\n LargeDesktop: 'large-desktop',\r\n};\r\n\r\nexport const useResponsiveMode = (element) => {\r\n const [isMobile, setIsMobile] = useState(false);\r\n const [responsiveMode, setResponsiveMode] = useState(ResponsiveMode.LargeDesktop);\r\n\r\n useEffect(() => {\r\n const getWidth = () => element.offsetWidth;\r\n\r\n const setResponsiveValues = () => {\r\n const currentWidth = getWidth();\r\n if (currentWidth < mobileMaxWidth) {\r\n setIsMobile(true);\r\n setResponsiveMode(ResponsiveMode.Mobile);\r\n\r\n return;\r\n }\r\n\r\n if (currentWidth < smallDesktopMaxWidth) {\r\n setIsMobile(false);\r\n setResponsiveMode(ResponsiveMode.SmallDesktop);\r\n\r\n return;\r\n }\r\n\r\n if (currentWidth < mediumDesktopMaxWidth) {\r\n setIsMobile(false);\r\n setResponsiveMode(ResponsiveMode.MediumDesktop);\r\n\r\n return;\r\n }\r\n\r\n setIsMobile(false);\r\n setResponsiveMode(ResponsiveMode.LargeDesktop);\r\n };\r\n\r\n const handleResize = () => {\r\n if (element) {\r\n setResponsiveValues();\r\n }\r\n };\r\n\r\n if (element) {\r\n setResponsiveValues();\r\n }\r\n\r\n window.addEventListener('resize', handleResize);\r\n\r\n return () => {\r\n window.removeEventListener('resize', handleResize);\r\n };\r\n }, [element]);\r\n\r\n return { isMobile, responsiveMode };\r\n};\r\n","import moment from 'moment-timezone';\r\n\r\nimport {\r\n toIANATimeZone,\r\n fromLegacyTimeZone,\r\n} from '@bingads-webui-universal/time-zone-converter';\r\n\r\nexport const transformDateForEditMode = (time) => {\r\n if (!time) {\r\n return '';\r\n }\r\n\r\n const timeString = moment(time).format('ddd M/D/YY h:mmA');\r\n\r\n return timeString;\r\n};\r\n\r\n// using moment(time).format to get a localization format of time string has a bug:\r\n// need to import moment/min/locales.min first before using moment(time).format\r\n// see https://momentjs.com/docs/#/use-it/browserify/\r\n// so using native method to transform date with locale\r\nexport const TransformDateOption = {\r\n weekday: 'short',\r\n year: '2-digit',\r\n month: 'numeric',\r\n day: 'numeric',\r\n hour12: true,\r\n hour: 'numeric',\r\n minute: 'numeric',\r\n};\r\n\r\nexport const transformDateWithLocaleForEditMode = (time, locale = 'en-us') => {\r\n if (!time) {\r\n return '';\r\n }\r\n\r\n const timeString = new Date(time).toLocaleString(locale, TransformDateOption);\r\n\r\n return timeString;\r\n};\r\n\r\n// Keep the time string of customized update to be consistent with FB\r\n// Return time string format: 2021-11-15T17:47:56-08:00\r\nexport const getISOTimeStringWithTimeZone = (time) => {\r\n if (!time) {\r\n return '';\r\n }\r\n\r\n const timeString = moment(time).format('YYYY-MM-DDTHH:mm:ss');\r\n\r\n // Try to extract the timezone offset(+0800) from time string like\r\n // 'Fri Jan 21 2022 19:25:30 GMT+0800 (China Standard Time)'\r\n let offsetString = time.toString().match(/([-+][0-9]+)\\s/)[1];\r\n\r\n offsetString = `${offsetString.slice(0, 3)}:${offsetString.slice(3)}`;\r\n\r\n return `${timeString}${offsetString}`;\r\n};\r\n\r\n/**\r\n * Get the IANA region name based on timeZoneId\r\n * @param {number} timeZoneId TimeZone Id stored in the serverContext\r\n * @returns {string} IANA region name\r\n */\r\nexport const getTimeZoneName = timeZoneId => toIANATimeZone(fromLegacyTimeZone(timeZoneId));\r\n\r\n/**\r\n * Get offset for certain timezone\r\n * @param {Object} timeZoneInfo {\r\n * timeZoneName: IANA region name,\r\n * timeZoneId: Timezone Id\r\n * }\r\n * @returns {number} offset compared the UTC time\r\n */\r\nexport const getTimeZoneOffset = ({ timeZoneName, timeZoneId }) => {\r\n const timeZone = timeZoneName || getTimeZoneName(timeZoneId);\r\n\r\n return moment.tz(timeZone).utcOffset();\r\n};\r\n\r\n/**\r\n * Transform time to the format in a specific timezone\r\n * @param {Object} timeParams {\r\n * timeString: time string,\r\n * timeZone: timeZone in IANA format\r\n * timeZoneId: timeZoneId stored in the serverContext\r\n * }\r\n * @returns {string} timeString in specific timezone\r\n */\r\nexport const getTimeInCertainTimeZone = ({\r\n timeString,\r\n timeZone,\r\n timeZoneId = 71,\r\n}) => {\r\n const utcTimeString = moment.utc(timeString).format();\r\n const targetTimeZone = timeZone || getTimeZoneName(timeZoneId);\r\n\r\n return moment(utcTimeString).tz(targetTimeZone).format();\r\n};\r\n","import _, { isEmpty } from 'underscore';\r\n\r\nexport const YOUTUBE_REGEX = /^(?:https?:\\/\\/)?(?:www\\.|m\\.)?(?:youtu\\.be\\/|youtube(?:-nocookie)?\\.com\\/(?:embed\\/|v\\/|watch\\/|watch\\?v=|watch\\?.+&v=))((\\w|-){11})/;\r\nexport const YOUTUBE_NOT_SUPPORT_TYPE_REGEX = /^(?:https?:\\/\\/)?(?:www\\.|m\\.)?(?:youtube\\.com\\/playlist\\?list=|youtube\\.com\\/user\\/)/;\r\nexport const VIMEO_REGEX = /^(?:https?:\\/\\/)?(?:www\\.|m\\.)?vimeo\\.com\\/.+/;\r\n\r\nexport const validateEmailAddress = (email) => {\r\n const re = /^(([^<>()[\\]\\\\.,;:\\s@\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\r\n const isLengthValidated = (email && email.length <= 100);\r\n return re.test(email) && isLengthValidated;\r\n};\r\n\r\nexport const prependProtocolToUrl = (url) => {\r\n if (!url) {\r\n return '';\r\n }\r\n\r\n const urlToCheck = url.toLowerCase();\r\n let prefix = '';\r\n\r\n if (!(urlToCheck.startsWith('https://') || urlToCheck.startsWith('http://'))) {\r\n prefix = 'https://'; // Default to https\r\n }\r\n\r\n return prefix + url;\r\n};\r\n\r\n// We prepend the protocol before validating\r\nexport const isValidUrl = (str) => {\r\n try {\r\n const strToConvert = prependProtocolToUrl(str);\r\n const url = new URL(strToConvert);\r\n\r\n return !_.isEmpty(url.host);\r\n } catch (ex) {\r\n return false;\r\n }\r\n};\r\n\r\nexport const getYoutubeVideoId = (url) => {\r\n const videoUrl = prependProtocolToUrl(url);\r\n\r\n if (YOUTUBE_REGEX.test(videoUrl)) {\r\n return videoUrl.match(YOUTUBE_REGEX)[1];\r\n }\r\n\r\n return '';\r\n};\r\n\r\n// Check if url is smart page support url, currently only support youtube or vimeo\r\nexport const isSmartPageSupportVideo = (url) => {\r\n const videoWebsiteWhitelist = [\r\n YOUTUBE_REGEX,\r\n YOUTUBE_NOT_SUPPORT_TYPE_REGEX,\r\n VIMEO_REGEX,\r\n ];\r\n\r\n for (let i = 0; i < videoWebsiteWhitelist.length; i += 1) {\r\n if (videoWebsiteWhitelist[i].test(url)) {\r\n return true;\r\n }\r\n }\r\n\r\n return false;\r\n};\r\n\r\n/* running through validators and generate first error message for name.\r\nexample arr\r\n[\r\n {\r\n name: 'a',\r\n value: 'test value',\r\n validators: [{\r\n validateWhenTrue: () => true ,\r\n validator: (value) => false,\r\n errorMessage: 'error message',\r\n }]\r\n }\r\n]\r\n\r\nexample return value:\r\n{\r\n a: 'error message',\r\n}\r\n*/\r\nexport const validate = (arr) => {\r\n const errors = {};\r\n\r\n _.each(arr, ({\r\n name,\r\n value,\r\n validators,\r\n }) => {\r\n for (let i = 0; i < validators.length; i += 1) {\r\n const { validateWhenTrue, validator, errorMessage } = validators[i];\r\n if (validateWhenTrue) {\r\n if (!validator(value)) {\r\n errors[name] = errorMessage;\r\n break;\r\n }\r\n }\r\n }\r\n });\r\n\r\n return errors;\r\n};\r\n\r\nexport const getPathFromUrl = (url) => {\r\n if (isEmpty(url)) {\r\n return '';\r\n }\r\n\r\n return url.split('?')[0];\r\n};\r\n","/* istanbul ignore file */\r\nimport { Constants } from '@bingads-webui-clientcenter/entity-utils';\r\n\r\nexport const phoneFormats = [{\r\n name: 'US',\r\n mask: '(999) 999-9999',\r\n countryCode: '1',\r\n get validate() {\r\n const self = this;\r\n\r\n return (input, allowEmpty = false) => {\r\n let isvalid = false;\r\n\r\n if (input) {\r\n // stripping off country code, 1 or +1\r\n const preprocessed = input.replace(/^(\\+)?1/, '');\r\n isvalid = (preprocessed.match(/\\d/g) || []).length === 10;\r\n }\r\n if (allowEmpty) {\r\n if (!input) {\r\n return true;\r\n }\r\n return isvalid || (new RegExp(`^${self.countryCode}[-|(|)|#|\\\\s]*`).test(input));\r\n }\r\n return isvalid;\r\n };\r\n },\r\n}, {\r\n name: 'General',\r\n mask: '',\r\n countryCode: '',\r\n get validate() {\r\n return (input, allowEmpty = false) => {\r\n if (!input || !input.trim()) {\r\n return allowEmpty;\r\n }\r\n\r\n const { PhoneNumberRegExp } = Constants;\r\n const re = new RegExp(PhoneNumberRegExp);\r\n const validRegExp = re.test(input);\r\n\r\n // At least 1 countryCalling code + 7 number digits and smaller than 17 number digits\r\n const digitLength = (input.match(/\\d/g) || []).length;\r\n const validDigit = digitLength > 7 && digitLength < 18;\r\n const validLength = input.length < 30;\r\n\r\n return validRegExp && validDigit && validLength;\r\n };\r\n },\r\n}];\r\n","import _ from 'underscore';\r\nimport parsePhoneNumber from 'libphonenumber-js';\r\nimport { phoneFormats } from './phone-format';\r\n\r\nexport const validatePhone = (phone, allowEmpty = false) => {\r\n if (!phone) {\r\n return allowEmpty;\r\n }\r\n\r\n return phoneFormats[1].validate(phone, allowEmpty);\r\n};\r\n\r\nconst USCountryId = 191;\r\n\r\nexport const getCallingCodeDisplayByCountry = (country = {}) => {\r\n const callingCodeString = _.isEmpty(country.CountryCallingCode) ? '' : ` (+${country.CountryCallingCode})`;\r\n return `${country.Name || ''}${callingCodeString}`;\r\n};\r\n\r\n// FB imported phone number is in format of +12345678890, and there is no dash after the area code\r\nexport const matchCountryAndCallingCode = (fullPhoneNumber, location, countries) =>\r\n _.find(countries, country =>\r\n fullPhoneNumber.indexOf(`+${country.CountryCallingCode}`) === 0 &&\r\n location.includes(country.Name));\r\n\r\nexport const getCountryIdByRegionCode = (regionCode, countries) => {\r\n const country = _.find(countries, c => c.Code === regionCode);\r\n\r\n if (country) {\r\n return country.Id;\r\n }\r\n\r\n return '';\r\n};\r\n\r\nexport const parseInitialPhoneNumber = (fullPhoneNumber, initialCountryCode, countries, location = '') => {\r\n if (fullPhoneNumber) {\r\n if (/^\\+(\\d+)/.test(fullPhoneNumber)) {\r\n const matchedCountry = matchCountryAndCallingCode(fullPhoneNumber, location, countries);\r\n\r\n if (matchedCountry) {\r\n return {\r\n initialPhoneNumber: fullPhoneNumber.replace(`+${matchedCountry.CountryCallingCode}`, ''),\r\n initialCountryId: matchedCountry.Id,\r\n initialCallingCode: matchedCountry.CountryCallingCode,\r\n };\r\n } else if (validatePhone(fullPhoneNumber)) {\r\n let parsedPhoneNumber = null;\r\n\r\n try {\r\n parsedPhoneNumber = parsePhoneNumber(fullPhoneNumber, initialCountryCode);\r\n } catch (e) {} // eslint-disable-line no-empty\r\n\r\n if (parsedPhoneNumber) {\r\n const initialCallingCode = parsedPhoneNumber.countryCallingCode;\r\n const initialPhoneNumber = fullPhoneNumber.replace(`+${initialCallingCode}`, '');\r\n const regionCode = parsedPhoneNumber.country;\r\n const initialCountryId = getCountryIdByRegionCode(regionCode, countries);\r\n\r\n return {\r\n initialPhoneNumber,\r\n initialCountryId,\r\n initialCallingCode,\r\n };\r\n }\r\n }\r\n } else {\r\n const matches = fullPhoneNumber.match(/^(\\d+)\\s?-\\s?(.*$)/);\r\n if (matches) {\r\n const fromCallingCode =\r\n _.findWhere(countries, { CountryCallingCode: matches[1] });\r\n const fromCountryCode =\r\n _.findWhere(countries, { Code: initialCountryCode });\r\n\r\n let initialCountry = fromCallingCode;\r\n\r\n // This is a tricky fix here that Canada has the same calling code as US.\r\n // If it can find the country from the address, use that one first.\r\n if (fromCallingCode &&\r\n fromCountryCode &&\r\n fromCallingCode.CountryCallingCode === fromCountryCode.CountryCallingCode) {\r\n initialCountry = fromCountryCode;\r\n }\r\n\r\n if (initialCountry) {\r\n return {\r\n initialPhoneNumber: matches[2],\r\n initialCountryId: initialCountry.Id,\r\n initialCallingCode: initialCountry.CountryCallingCode,\r\n };\r\n }\r\n }\r\n }\r\n } else if (initialCountryCode) {\r\n const initialCountry = _.findWhere(countries, { Code: initialCountryCode });\r\n if (initialCountry) {\r\n return {\r\n initialPhoneNumber: '',\r\n initialCountryId: initialCountry.Id,\r\n initialCallingCode: initialCountry.CountryCallingCode,\r\n };\r\n }\r\n }\r\n\r\n return {\r\n initialPhoneNumber: fullPhoneNumber,\r\n initialCountryId: USCountryId,\r\n initialCallingCode: '1',\r\n };\r\n};\r\n\r\nexport const composePhoneNumber = (callingCode, phoneNumber) => `${callingCode}-${phoneNumber}`;\r\n","import { useCallback } from 'react';\r\n\r\nimport { MessageBarType } from '@fluentui/react/lib/MessageBar';\r\n\r\nexport function useFloatingBannerMessage(dispatch) {\r\n const showError = useCallback((msg) => {\r\n dispatch({\r\n type: 'SET_FLOATING_BANNER',\r\n payload: {\r\n isShow: true,\r\n msgInfo: msg,\r\n msgType: MessageBarType.error,\r\n },\r\n });\r\n }, [dispatch]);\r\n\r\n const showInfo = useCallback((msg) => {\r\n dispatch({\r\n type: 'SET_FLOATING_BANNER',\r\n payload: {\r\n isShow: true,\r\n msgInfo: msg,\r\n msgType: MessageBarType.success,\r\n },\r\n });\r\n }, [dispatch]);\r\n\r\n const showWarning = useCallback((msg) => {\r\n dispatch({\r\n type: 'SET_FLOATING_BANNER',\r\n payload: {\r\n isShow: true,\r\n msgInfo: msg,\r\n msgType: MessageBarType.warning,\r\n },\r\n });\r\n }, [dispatch]);\r\n\r\n const hideFloatingBanner = useCallback(() => {\r\n dispatch({\r\n type: 'SET_FLOATING_BANNER',\r\n payload: {\r\n isShow: false,\r\n msgInfo: '',\r\n msgType: MessageBarType.warning,\r\n },\r\n });\r\n }, [dispatch]);\r\n\r\n return {\r\n showError,\r\n showInfo,\r\n showWarning,\r\n hideFloatingBanner,\r\n };\r\n}\r\n","import { useEffect } from 'react';\r\n\r\nexport function useElementViewed(logger, elementScope) {\r\n useEffect(() => {\r\n logger.logTrace(`${elementScope}|displayed`);\r\n return () => logger.logTrace(`${elementScope}|hidden`);\r\n }, [logger, elementScope]);\r\n}\r\n","export const sendAnalyticsData = (actionType) => {\r\n if (typeof actionType !== 'string') {\r\n return;\r\n }\r\n window.uetq_sp = window.uetq_sp || [];\r\n window.uetq_sp.push('event', 'Click', {\r\n // 'contactUs' => 'contact US'\r\n event_label: actionType,\r\n });\r\n};\r\n","export const sendLeadsTrackingData = () => {\r\n window.mtagq = window.mtagq || [];\r\n window.mtagq.push(\r\n 'event',\r\n 'Smart Page Leads Tracking',\r\n {}\r\n );\r\n\r\n window.uetq = window.uetq || [];\r\n window.uetq.push(\r\n 'event',\r\n 'Smart Page Leads Tracking',\r\n {}\r\n );\r\n};\r\n","const resetComponentConfig = {\r\n cropSettings: null,\r\n imageWidth: null,\r\n imageHeight: null,\r\n imageId: null,\r\n imageName: null,\r\n fileName: null,\r\n editWithCropper: null,\r\n externalSrc: null,\r\n};\r\n\r\nexport const updateImageByExternal = (originalComponentConfig, externalSrc) => ({\r\n ...originalComponentConfig,\r\n ...resetComponentConfig,\r\n externalSrc,\r\n});\r\n\r\nexport const updateImageByMeta = (originalComponentConfig, imageMeta, fileObj, externalSrc) => {\r\n const {\r\n IdString: imageId,\r\n Width: imageWidth,\r\n Height: imageHeight,\r\n CropSettings: cropSettings,\r\n FileName: metaFileName,\r\n } = imageMeta;\r\n\r\n return {\r\n ...originalComponentConfig,\r\n ...resetComponentConfig,\r\n imageId,\r\n imageWidth,\r\n imageHeight,\r\n cropSettings,\r\n fileName: metaFileName || (fileObj ? fileObj.name : null),\r\n externalSrc,\r\n };\r\n};\r\n\r\nexport const updateImageByName = (originalComponentConfig, imageName) => ({\r\n ...originalComponentConfig,\r\n ...resetComponentConfig,\r\n imageName,\r\n});\r\n","export const leftIcon = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxMCAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguNzgyNDcgMTUuODA0N0w5LjcyNzc4IDE0Ljg1OTRMMi44Njg0MSA4TDkuNzI3NzggMS4xNDA2Mkw4Ljc4MjQ3IDAuMTk1MzEyTDAuOTc3NzgzIDhMOC43ODI0NyAxNS44MDQ3WiIgZmlsbD0iIzAwNzhENCIvPgo8L3N2Zz4K';\r\nexport const rightIcon = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDkgMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xLjE0MDYyIDE1LjgwNDdMMC4xOTUzMTIgMTQuODU5NEw3LjA1NDY5IDhMMC4xOTUzMTIgMS4xNDA2MkwxLjE0MDYyIDAuMTk1MzEyTDguOTQ1MzEgOEwxLjE0MDYyIDE1LjgwNDdaIiBmaWxsPSIjMDA3OEQ0Ii8+Cjwvc3ZnPgo=';\r\nexport const mailIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDQ4IDIwNDgiIGNsYXNzPSJzdmdfNTM3YzJlYmQiPjxwYXRoIGQ9Ik0yMDQ4IDM4NHYxMjgwSDBWMzg0aDIwNDh6TTE0MyA1MTJsODgxIDQ0MSA4ODEtNDQxSDE0M3ptMTc3NyAxMDI0VjY0OGwtODk2IDQ0Ny04OTYtNDQ3djg4OGgxNzkyeiI+PC9wYXRoPjwvc3ZnPg==';\r\nexport const mapPinIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDQ4IDIwNDgiIGNsYXNzPSJzdmdfNTM3YzJlYmQiPjxwYXRoIGQ9Ik0xOTIwIDIwNDhIMEwzODQgODk2aDUxMlY2MzRxLTU2LTEyLTEwMy00MXQtODEtNzAtNTMtOTQtMTktMTA5cTAtNjYgMjUtMTI0dDY4LTEwMSAxMDItNjlUOTYwIDBxNjYgMCAxMjQgMjV0MTAxIDY5IDY5IDEwMiAyNiAxMjRxMCA1Ny0xOSAxMDl0LTUzIDkzLTgxIDcxLTEwMyA0MXYyNjJoNTEybDM4NCAxMTUyek03NjggMzIwcTAgNDAgMTUgNzV0NDEgNjEgNjEgNDEgNzUgMTVxNDAgMCA3NS0xNXQ2MS00MSA0MS02MSAxNS03NXEwLTQwLTE1LTc1dC00MS02MS02MS00MS03NS0xNXEtNDAgMC03NSAxNXQtNjEgNDEtNDEgNjEtMTUgNzV6TTE3OCAxOTIwaDE1NjRsLTI5OC04OTZoLTQyMHY0ODBxMCA5LTcgMTV0LTE4IDEwLTIxIDUtMTggMnEtNyAwLTE3LTF0LTIxLTUtMTgtMTAtOC0xNnYtNDgwSDQ3NmwtMjk4IDg5NnoiPjwvcGF0aD48L3N2Zz4=';\r\nexport const phoneIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDQ4IDIwNDgiIGNsYXNzPSJzdmdfNTM3YzJlYmQiPjxwYXRoIGQ9Ik0xNjA3IDEyMTNxNDQgMCA4NCAxNnQ3MiA0OGwyMjAgMjIwcTMxIDMxIDQ3IDcxdDE3IDg1cTAgNDQtMTYgODR0LTQ4IDcybC0xNCAxNHEtNTQgNTQtOTkgOTZ0LTk0IDcwLTEwOSA0NC0xNDMgMTVxLTEyNSAwLTI1Ny0zOXQtMjYyLTEwOC0yNTYtMTY0LTIzNy0yMDctMjA2LTIzOC0xNjItMjU2VDM4IDc3NSAwIDUyM3EwLTgzIDE0LTE0MnQ0My0xMDggNzAtOTMgOTYtOTlsMTYtMTZxMzEtMzEgNzEtNDh0ODUtMTdxNDQgMCA4NCAxN3Q3MiA0OGwyMjAgMjIwcTMxIDMxIDQ3IDcxdDE3IDg1cTAgNDQtMTUgNzh0LTM3IDYzLTQ4IDUxLTQ5IDQ1LTM3IDQ0LTE1IDQ5cTAgMzggMjcgNjVsNTUxIDU1MXEyNyAyNyA2NSAyNyAyNiAwIDQ4LTE1dDQ1LTM3IDQ1LTQ4IDUxLTQ5IDYyLTM3IDc5LTE1em0tODMgNzA3cTcyIDAgMTIwLTEzdDg4LTM5IDc2LTY0IDg1LTg2cTI3LTI3IDI3LTY1IDAtMTgtMTQtNDJ0LTM4LTUyLTUxLTU1LTU2LTU0LTUxLTQ3LTM3LTM1cS0yNy0yNy02Ni0yNy0yNiAwLTQ4IDE1dC00NCAzNy00NSA0OC01MiA0OS02MiAzNy03OSAxNXEtNDQgMC04NC0xNnQtNzItNDhMNTcwIDkyN3EtMzEtMzEtNDctNzF0LTE3LTg1cTAtNDQgMTUtNzh0MzctNjMgNDgtNTEgNDktNDYgMzctNDQgMTUtNDhxMC0zOS0yNy02Ni0xMy0xMy0zNC0zNnQtNDctNTEtNTQtNTYtNTYtNTItNTEtMzctNDMtMTVxLTM4IDAtNjUgMjdsLTg1IDg1cS0zNyAzNy02NCA3NnQtNDAgODctMTQgMTIwcTAgMTEyIDM2IDIzMXQxMDEgMjM4IDE1MyAyMzQgMTkyIDIxOSAyMTkgMTkwIDIzNCAxNTAgMjM2IDk5IDIyNiAzNnoiPjwvcGF0aD48L3N2Zz4=';\r\nexport const closeIcon = 'data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjMxMXB0IiB2aWV3Qm94PSIwIDAgMzExIDMxMS4wNzczMyIgd2lkdGg9IjMxMXB0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0xNi4wMzUxNTYgMzExLjA3ODEyNWMtNC4wOTc2NTYgMC04LjE5NTMxMi0xLjU1ODU5NC0xMS4zMDg1OTQtNC42OTUzMTMtNi4yNS02LjI1LTYuMjUtMTYuMzgyODEyIDAtMjIuNjMyODEybDI3OS4wNjI1LTI3OS4wNjI1YzYuMjUtNi4yNSAxNi4zODI4MTMtNi4yNSAyMi42MzI4MTMgMHM2LjI1IDE2LjM4MjgxMiAwIDIyLjYzNjcxOWwtMjc5LjA1ODU5NCAyNzkuMDU4NTkzYy0zLjEzNjcxOSAzLjExNzE4OC03LjIzNDM3NSA0LjY5NTMxMy0xMS4zMjgxMjUgNC42OTUzMTN6bTAgMCIvPjxwYXRoIGQ9Im0yOTUuMTE3MTg4IDMxMS4wNzgxMjVjLTQuMDk3NjU3IDAtOC4xOTE0MDctMS41NTg1OTQtMTEuMzA4NTk0LTQuNjk1MzEzbC0yNzkuMDgyMDMyLTI3OS4wNTg1OTNjLTYuMjUtNi4yNTM5MDctNi4yNS0xNi4zODY3MTkgMC0yMi42MzY3MTlzMTYuMzgyODEzLTYuMjUgMjIuNjM2NzE5IDBsMjc5LjA1ODU5NCAyNzkuMDYyNWM2LjI1IDYuMjUgNi4yNSAxNi4zODI4MTIgMCAyMi42MzI4MTItMy4xMzY3MTkgMy4xMTcxODgtNy4yMzA0NjkgNC42OTUzMTMtMTEuMzA0Njg3IDQuNjk1MzEzem0wIDAiLz48L3N2Zz4=';\r\n","const IDEAL_WIDTH = 1080;\r\nconst IDEAL_HEIGHT = 608;\r\n\r\nexport const IDEAL_ASPECT_RATIO = IDEAL_HEIGHT / IDEAL_WIDTH;\r\nexport const IDEAL_ASPECT_RATIO_PERCENTAGE = 100 * IDEAL_ASPECT_RATIO;\r\n","import { IDEAL_ASPECT_RATIO } from './cropper-const';\r\n\r\nexport const withInitialCropData = (imageMetaData) => {\r\n const {\r\n Width,\r\n Height,\r\n } = imageMetaData;\r\n\r\n return {\r\n ...imageMetaData,\r\n CropSettings: {\r\n cropX: 0,\r\n cropY: 0,\r\n cropWidth: Width,\r\n cropHeight: Math.min(Height, IDEAL_ASPECT_RATIO * Width),\r\n },\r\n };\r\n};\r\n","import { filter, contains, some } from 'underscore';\r\n\r\nexport const getUpdateImages = (images, snapshotImages, imageIdsToRemove, imagesToAdd = []) => {\r\n const imageIdsToRemoveNotInSnapshot = filter(imageIdsToRemove, id => !some(snapshotImages, ({\r\n IdString,\r\n }) => IdString === id));\r\n\r\n const newImages = filter(images, ({\r\n IdString,\r\n }) => !contains(imageIdsToRemoveNotInSnapshot, IdString)) || [];\r\n\r\n newImages.push(...imagesToAdd);\r\n\r\n return newImages;\r\n};\r\n","import { map, contains, omit, chain, isEmpty } from 'underscore';\r\n\r\nimport { getPathFromUrl } from '../address-util';\r\n\r\n// this is used to show facebook photos in select dialog\r\nexport const getThumbnailUrlForFacebookPhoto = facebookPhoto => facebookPhoto.Picture;\r\n\r\nexport const getUrlFromStockImage = stockImage => stockImage.externalSrc;\r\n\r\nexport const getLocalImageData = image => image.imageData;\r\n\r\nexport const getUniqueFacebookPhotos = (photos) => {\r\n if (isEmpty(photos)) {\r\n return [];\r\n }\r\n\r\n const addedPicture = [];\r\n const finalPhoto = [];\r\n\r\n photos.forEach((photo) => {\r\n const photoPath = getPathFromUrl(photo.Picture);\r\n if (addedPicture.indexOf(photoPath) === -1) {\r\n finalPhoto.push(photo);\r\n addedPicture.push(photoPath);\r\n }\r\n });\r\n\r\n return finalPhoto;\r\n};\r\n\r\nexport const StockImageSourceType = {\r\n M365: 'M365TextAnalysis',\r\n TemplateAds: 'Template',\r\n};\r\n\r\nexport const getStockImageThumbnailUrl = (image) => {\r\n let url = image.externalSrc;\r\n\r\n if (image.source === StockImageSourceType.M365) {\r\n url = url.replace('.jpg', '');\r\n return `${url}_thumbnail.jpg`;\r\n }\r\n\r\n return url;\r\n};\r\n\r\nexport const getStockImageOriginalUrl = (image) => {\r\n if (image.source === StockImageSourceType.M365) {\r\n return image.externalSrc.replace('_thumbnail', '');\r\n }\r\n return image.externalSrc;\r\n};\r\n\r\n// when uploading, use high resolution one\r\nexport const getFacebookPhotoUrlToUpload = (photo) => {\r\n if (photo.Images && photo.Images[0]) {\r\n return photo.Images[0].Url;\r\n }\r\n return '';\r\n};\r\n\r\n// Used to get small version image src from pivot image editor, including local image\r\nexport const getImageThumbnailSrcFromImage = (image) => {\r\n const externalUrl = getStockImageThumbnailUrl(image);\r\n const fbUrl = getThumbnailUrlForFacebookPhoto(image);\r\n const localSrc = getLocalImageData(image);\r\n\r\n return externalUrl || fbUrl || localSrc;\r\n};\r\n\r\nexport const getUploadUrlFromImage = (image) => {\r\n const externalUrl = getUrlFromStockImage(image);\r\n const fbUrl = getFacebookPhotoUrlToUpload(image);\r\n\r\n return externalUrl || fbUrl || '';\r\n};\r\n\r\nexport const ImageSource = {\r\n Local: 'Local',\r\n Facebook: 'Facebook',\r\n StockImage: 'StockImage',\r\n};\r\n\r\n/**\r\n * @param {object} image\r\n * image item that contains info of itself including url to upload or image data\r\n * @return {object} {\r\n * url: for external link,\r\n * imageData: for local image file,\r\n * source: where this image comes from\r\n * }\r\n */\r\nexport const getUploadDetailFromImage = (image) => {\r\n if (image.file) {\r\n return {\r\n imageData: image.imageData,\r\n source: ImageSource.Local,\r\n };\r\n }\r\n\r\n let url = getUrlFromStockImage(image);\r\n let source = ImageSource.StockImage;\r\n\r\n if (getFacebookPhotoUrlToUpload(image)) {\r\n url = getFacebookPhotoUrlToUpload(image);\r\n source = ImageSource.Facebook;\r\n }\r\n\r\n return {\r\n url,\r\n source,\r\n };\r\n};\r\n\r\n// after uploading\r\nexport const formatUploadedFacebookPhoto =\r\n (uploadedResult, originalFacebookPhoto) => ({\r\n ...uploadedResult,\r\n fbImageUrl: getThumbnailUrlForFacebookPhoto(originalFacebookPhoto),\r\n });\r\n\r\nexport const formatUploadedStockImage =\r\n (uploadedResult, originalStockImage) => ({\r\n ...uploadedResult,\r\n externalSrc: originalStockImage.externalSrc,\r\n });\r\n\r\nexport const formateUploadedPhoto =\r\n (uploadedResult, originalImage) => (\r\n originalImage.externalSrc\r\n ? formatUploadedStockImage(uploadedResult, originalImage)\r\n : formatUploadedFacebookPhoto(uploadedResult, originalImage)\r\n );\r\n\r\nconst getUrlHelpersByType = (type) => {\r\n let urlPropertyName = 'fbImageUrl';\r\n let getUrlFromImage = getThumbnailUrlForFacebookPhoto;\r\n\r\n if (type === ImageSource.StockImage) {\r\n urlPropertyName = 'externalSrc';\r\n getUrlFromImage = getUrlFromStockImage;\r\n }\r\n\r\n return {\r\n urlPropertyName,\r\n getUrlFromImage,\r\n };\r\n};\r\n\r\nexport const filterImportedImages = (images, addedImages, type) => {\r\n const { urlPropertyName, getUrlFromImage } = getUrlHelpersByType(type);\r\n\r\n const imported = chain(addedImages)\r\n .pluck(urlPropertyName)\r\n .map(getPathFromUrl)\r\n .value();\r\n\r\n return images.filter((image) => {\r\n const url = getPathFromUrl(getUrlFromImage(image));\r\n return !contains(imported, url);\r\n });\r\n};\r\n\r\nexport const disableImportedImages = (images, addedImages, type) => {\r\n const { urlPropertyName, getUrlFromImage } = getUrlHelpersByType(type);\r\n\r\n const imported = chain(addedImages)\r\n .pluck(urlPropertyName)\r\n .map(getPathFromUrl)\r\n .value();\r\n\r\n return images.map((image) => {\r\n const url = getPathFromUrl(getUrlFromImage(image));\r\n return {\r\n ...image,\r\n isDisabled: contains(imported, url),\r\n };\r\n });\r\n};\r\n\r\nexport const formatImagesToSiteConfigImages = images => map(\r\n images,\r\n image => omit(image, 'fbImageUrl', 'externalSrc')\r\n);\r\n\r\nexport const formatImagesToSiteConfigComponentConfig = images => map(images, ({\r\n IdString,\r\n fbImageUrl,\r\n externalSrc,\r\n}) => (\r\n fbImageUrl\r\n ? { imageId: IdString, fbImageUrl }\r\n : { imageId: IdString, externalSrc }\r\n));\r\n","import { cloneDeep } from '@bingads-webui-universal/primitive-utilities';\r\n\r\nexport const getUpdatedPages = (pages, componentConfig) => {\r\n const newPages = [...pages];\r\n\r\n newPages.forEach((page) => {\r\n const { components } = page;\r\n const newComponents = [];\r\n\r\n components.forEach((cmp) => {\r\n if (cmp.id === componentConfig.id) {\r\n newComponents.push(cloneDeep(componentConfig));\r\n } else {\r\n newComponents.push(cmp);\r\n }\r\n });\r\n\r\n page.components = newComponents; // eslint-disable-line no-param-reassign\r\n });\r\n\r\n return newPages;\r\n};\r\n","export const SMART_PAGE_DEFAULT_VALUES = {\r\n BUSINESS_NAME: _TL_('Business Name'),\r\n DESCRIPTION: _TL_('Briefly describe what your business offers. It\\'s best to include keywords customers might use to find your products or services.'),\r\n};\r\n","import { oneOf } from 'prop-types';\r\n\r\nexport const INTEGRATE_ENV_TYPE = {\r\n MCA: 'MCA',\r\n UP: 'UP',\r\n STANDALONE: 'StandAlone',\r\n UP_WIZARD: 'UpWizard',\r\n SUB_ADS_WIZARD: 'SubAdsWizard',\r\n SUB_ADS_WIZARD2: 'SubAdsWizard2',\r\n STREAMLINED_WIZARD: 'StreamlinedWizard',\r\n PMAX_LITE_WIZARD: 'PmaxLiteWizard',\r\n NOT_STANDALONE: 'NotStandalone',\r\n};\r\n\r\nexport const envPropTypes = oneOf([\r\n INTEGRATE_ENV_TYPE.MCA,\r\n INTEGRATE_ENV_TYPE.UP,\r\n INTEGRATE_ENV_TYPE.STANDALONE,\r\n INTEGRATE_ENV_TYPE.UP_WIZARD,\r\n INTEGRATE_ENV_TYPE.SUB_ADS_WIZARD,\r\n INTEGRATE_ENV_TYPE.SUB_ADS_WIZARD2,\r\n INTEGRATE_ENV_TYPE.STREAMLINED_WIZARD,\r\n INTEGRATE_ENV_TYPE.PMAX_LITE_WIZARD,\r\n INTEGRATE_ENV_TYPE.NOT_STANDALONE,\r\n]);\r\n","import Promise from 'bluebird';\r\n\r\n/**\r\n * Append a