\n \n \n \n {props.resources.clickToConfigure}\n
\n \n );\n }, [props]);\n};\n\nexport const PlaceholderForContainerPreviewComponent = PlaceholderForContainerPreview;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport classnames from 'classnames';\nimport * as React from 'react';\n\n/**\n * Configuration for the empty placeholder image.\n */\nexport interface IEmptyPlaceholderImageProps {\n /**\n * The html class name to use for the html element. Will be used along with the default classes.\n */\n className?: string;\n}\n\n/**\n * React component responsible for rendering an empty placeholder image\n * which should be used to be displayed when main image is unaccessible or broken.\n *\n * The element is an empty div element by default. Use css styles for the class in order to specify the image for the component.\n */\nexport class EmptyPlaceholderImage extends React.PureComponent {\n /**\n * The default class for empty image component.\n */\n private static _emptyImageClassName: string = 'msc-empty_image';\n\n /**\n * Initializes instance with the given props.\n * @param {IEmptyPlaceholderImageProps} props - Configuration for the empty placeholder image.\n */\n public constructor(props: IEmptyPlaceholderImageProps) {\n super(props);\n }\n\n /**\n * Renders empty placeholder image.\n *\n * The element is an empty div element by default. Use css styles for the class in order to specify the image for the component.\n */\n public render(): React.ReactNode {\n return ;\n }\n}\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport classnames from 'classnames';\nimport * as React from 'react';\n\n/**\n * Configuration for the loading placeholder image.\n */\nexport interface ILoadingPlaceholderImageProps {\n /**\n * The html class name to use for the html element. Will be used along with the default classes.\n */\n className?: string;\n}\n\n/**\n * React component responsible for rendering a loading placeholder image\n * which should be used to be displayed when main image is downloading on the client and is not yet ready to be displayed.\n *\n * The element is an empty div element by default. Use css styles for the class in order to specify the image for the component.\n */\nexport class LoadingPlaceholderImage extends React.PureComponent {\n /**\n * The default class for loading image component.\n */\n private static _loadingImageClassName: string = 'msc-loading_image';\n\n /**\n * Initializes instance with the given props.\n * @param {ILoadingPlaceholderImageProps} props - Configuration for the loading placeholder image.\n */\n public constructor(props: ILoadingPlaceholderImageProps) {\n super(props);\n }\n\n /**\n * Renders loading placeholder image.\n *\n * The element is an empty div element by default. Use css styles for the class in order to specify the image for the component.\n */\n public render(): React.ReactNode {\n return ;\n }\n}\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { IInternalTelemetry, InternalTelemetryLogOptions, ITelemetry, LogLevel } from '@msdyn365-commerce/telemetry-internal';\nimport { getCurrency } from 'locale-currency';\nimport { IRequestContext } from '../interfaces';\nimport msdyn365Commerce from '../msdyn365-commerce';\n\nexport interface IContentEditableInitEvent {\n type: string;\n}\n\n// Helper function for parsing/normalizing json, exported\nexport const parsePayload = (content: string) => {\n try {\n return content.constructor === String ? JSON.parse(content) : content;\n } catch (error) {\n throw new Error(`JSON Parsing fails for content -- ${content}`);\n }\n};\n\nexport const isEmptyOrNullObject = (obj: object | undefined | null): boolean => {\n return !obj || Object.keys(obj).length <= 0;\n};\n\nexport const returnEmptyPromise = (): Promise<{}> => {\n return new Promise((resolve: (value?: {} | PromiseLike<{}> | undefined) => void) => resolve());\n};\n\nconst UNSAFE_CHARS_REGEXP = /[<>\\/\\u2028\\u2029]/g;\nconst ESCAPED_CHARS: { [unsafechar: string]: string } = {\n '<': '\\\\u003C',\n '>': '\\\\u003E',\n '/': '\\\\u002F',\n '\\u2028': '\\\\u2028',\n '\\u2029': '\\\\u2029'\n};\nconst escapeUnsafeChars = (unsafeChar: string): string => {\n return ESCAPED_CHARS[unsafeChar];\n};\n\nexport const sanitizeForXss = (str: string): string => {\n return str.replace(UNSAFE_CHARS_REGEXP, escapeUnsafeChars);\n};\n\nexport const removeInstanceCache = (_key: string, value: { instance: string }): undefined | unknown => {\n if (value && value.instance === 'instance') {\n return undefined;\n }\n return value;\n};\n\nexport const isAuthoringEditEnabled = (context: IRequestContext | undefined): boolean => {\n if (context) {\n if (context.features && context.features.authoring_inline_edit && context.params && !!context.params.isEditor) {\n return true;\n }\n }\n\n return false;\n};\n\n/**\n * Tries to parse a string value into an number and reurns this value. If the string is undefined\n * or if the string does not represent a valid number, undefined is returned\n *\n * @param value The string representing the number to be parsed\n */\nexport const tryParseInt = (value: string | undefined): number | undefined => {\n if (value) {\n const parsedValue = parseInt(value, 10);\n return isNaN(parsedValue) ? undefined : parsedValue;\n }\n return undefined;\n};\n\n/**\n * Name of internal component fragment, must be all lower case\n */\nexport const SDK_FRAGMENT_NAME = 'platform.saferendermodule';\n\n/**\n * Regex constant for capturing the internal fragment name with data-reactroot that is occasionally emitted\n */\nexport const SDK_FRAGMENT_NAME_REGEX = /<[/]?platform\\.saferendermodule( data-reactroot=[\"].*[\"])?>/gi;\n\n/**\n * Hepler function to build a URL to get the asset\n * @param assetPath the path to the asset\n */\nexport const getAsset = (assetPath: string, context: IRequestContext) => {\n let assetUrl: string = '';\n if (context.url.staticCdnUrl) {\n assetUrl += context.url.staticCdnUrl;\n }\n if (assetPath.length > 0 && assetPath.charAt(0) === '/') {\n assetPath = assetPath.substr(1);\n }\n const submissionId = msdyn365Commerce.getEnvironmentVariable('SUBMISSIONID');\n if (!submissionId || submissionId === 'undefined') {\n return `${assetUrl}${`${assetPath}`.replace(/\\/+/g, '/')}`;\n } else {\n return `${assetUrl}${`${submissionId}/${assetPath}`.replace(/\\/+/g, '/')}`;\n }\n};\n\nexport const CurrencyCodeIdentifier = 'cc';\nexport const getCurrencyCodeFromContext = (requestContext: IRequestContext) => {\n return (\n (requestContext && requestContext.query && requestContext.query[CurrencyCodeIdentifier]) ||\n (requestContext.cookies && requestContext.cookies.get(CurrencyCodeIdentifier).value) ||\n (requestContext.channel && requestContext.channel.Currency) ||\n getCurrency(requestContext.locale)\n );\n};\n\nexport const isNonceEnabled = (requestContext: IRequestContext) => {\n const contentSecurityPolicy = requestContext.app && requestContext.app.contentSecurityPolicy;\n const nonceToken = contentSecurityPolicy && contentSecurityPolicy.nonceToken;\n return contentSecurityPolicy && !contentSecurityPolicy.disableContentSecurityPolicy && contentSecurityPolicy.enableNonce && nonceToken;\n};\n\nexport const verboseLogger = (\n context: IRequestContext,\n telemetry: IInternalTelemetry | ITelemetry,\n messageTemplate: string,\n logOptions?: InternalTelemetryLogOptions | undefined,\n logLevel: LogLevel = LogLevel.Information\n) => {\n if (context && context.features && !!context.features.enable_verbose_logs) {\n telemetry.log(logLevel, messageTemplate, logOptions);\n }\n};\n\nexport const isVerboseLogEnabled = (context: IRequestContext): boolean => {\n return context && context.features && !!context.features.enable_verbose_logs;\n};\n\nexport const checkVersionForFeature = (feature: string): boolean => {\n if (msdyn365Commerce.getVersionDependentFeatureInfo && msdyn365Commerce.getVersionDependentFeatureInfo[feature]) {\n return msdyn365Commerce.getVersionDependentFeatureInfo[feature];\n }\n return false;\n};\n\nexport const skipConsoleWarn = () => {\n const originalConsole = { ...console };\n let showDebug = true;\n if (process.env.NODE_ENV !== 'development') {\n showDebug = false;\n }\n console.warn = (message: string) => {\n if (showDebug) {\n originalConsole.warn(message);\n }\n };\n};\n\nexport const skipConsoleInfo = () => {\n const originalConsole = { ...console };\n let showDebug = true;\n if (process.env.NODE_ENV !== 'development') {\n showDebug = false;\n }\n // eslint-disable-next-line no-console\n console.info = (message: string) => {\n if (showDebug) {\n originalConsole.info(message);\n }\n };\n};\n\n/**\n * Returns true if the given string matches an URL pattern\n *\n * @param source The string to check against\n */\nexport const isAbsoluteUrl = (source: string): boolean => {\n return /^(http|https):\\/\\/(\\w+:{0,1}\\w*@)?(\\S+)(:[0-9]+)?(\\/|\\/([\\w#!:.?+=&%@!\\-\\/]))?$/.test(source);\n};\n\n// isOBORequest representing whether current user is on behalf of or not\nexport const isOboRequest = (requestContext: IRequestContext): boolean => {\n const { user } = requestContext;\n return user.isOBORequest || false;\n};\n\n// get customer account number\nexport const getCustomerAccountNumber = (requestContext: IRequestContext): object => {\n const accountSelectionCookie = requestContext?.cookies?.getAccountSelectionCookie();\n const isOBORequest = isOboRequest(requestContext);\n if (!isEmptyOrWhitespace(accountSelectionCookie) && isOBORequest) {\n const accountSelectionCookieValue = accountSelectionCookie;\n const accountSelectionCustomerIdParts: string[] = accountSelectionCookieValue.split(':');\n return { can: accountSelectionCustomerIdParts[1], isObo: true };\n }\n return { can: undefined, isObo: false };\n};\n\n// get customer account number for both B2B and B2C.\nexport const getCustomerAccountNumberForAllChannelType = (requestContext: IRequestContext): string | undefined => {\n if (isChannelTypeB2B(requestContext)) {\n const customerAccountNumber = getCustomerAccountNumber(requestContext) as { can: string; isObo: boolean };\n return customerAccountNumber.isObo ? customerAccountNumber.can : requestContext.user.customerAccountNumber;\n }\n return requestContext.user.customerAccountNumber;\n};\n\n/**\n * Verifies whether the string is empty or whitespace, but not null.\n *\n * @param {string} string The string.\n * @return {boolean} True if the string is empty or whitespace, false otherwise.\n */\nconst isEmptyOrWhitespace = (str: string): boolean => {\n if (str && typeof str !== 'string') {\n // Tracer.Error(\"StringExtensions.isEmptyOrWhitespace() has received input parameter not of type string.\");\n }\n if (str) {\n // Make sure type string\n str = str.toString();\n\n return typeof str.trim === 'function' && (str.trim() || '').length === 0;\n }\n return false;\n};\n\n/**\n * Verifies whether the current channel is of type b2b.\n *\n * @param requestContext Current request context.\n * @return {boolean} True if the channel type is b2b.\n */\nexport const isChannelTypeB2B = (requestContext: IRequestContext): boolean => {\n return requestContext.apiSettings?.channelCustomerType?.toLowerCase() === 'b2b';\n};\n\n/**\n * Verifies whether the current context is of b2b.\n *\n * @param requestContext Current request context.\n * @return {boolean} True if either its oboRequest or user type is b2b.\n */\nexport const isUserTypeB2B = (requestContext: IRequestContext): boolean => {\n return requestContext.user?.isB2b || false || requestContext.user?.isOBORequest || false;\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\n/**\n * Error class for wysiwyg inline edits\n */\nexport class EditError extends Error {\n public static readonly Name: string = 'EditError';\n\n public error?: unknown;\n\n public required?: boolean;\n\n /**\n * Edit Errors\n * @param error Original Error\n */\n constructor(error: string | Error, name?: string, required?: boolean) {\n super();\n this.name = name || PROPERTY_DISABLED;\n if (error instanceof Error) {\n this.message = error.message;\n this.error = error;\n }\n\n this.required = required;\n\n // As of Typescript 2.1 if we extend the Error object the prototype must be set explicitly\n // See: https://github.com/Microsoft/TypeScript-wiki/blob/master/Breaking-Changes.md#extending-built-ins-like-error-array-and-map-may-no-longer-work\n Object.setPrototypeOf(this, EditError.prototype);\n }\n}\n\nexport const PROPERTY_DISABLED = '_MSDYN365_PROPERTY_DISABLED_';\n\nexport const PROPERTY_INIT = '_MSDYN365_PROPERTY_INIT_';\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { IRequestContext } from '../../interfaces';\nimport { isAuthoringEditEnabled } from '../helper';\n\nconst EDITABLE_FIELD_CLASS = 'ms-editable-field';\n\nexport const getEditableFieldClassName = (disabled?: boolean, className?: string, requestContext?: IRequestContext) => {\n if (!!disabled) {\n return isAuthoringEditEnabled(requestContext) ? `${EDITABLE_FIELD_CLASS} ${className || ''}` : className;\n } else {\n return isAuthoringEditEnabled(requestContext) ? `${EDITABLE_FIELD_CLASS} enabled ${className || ''}` : className;\n }\n};\n\nexport const isEditorialMode = (requestContext?: IRequestContext) => {\n if (!requestContext) {\n return false;\n }\n return !!requestContext.params && requestContext.params.isEditor;\n};\n\nexport const isDefaultPlaceholderFeatureOn = (requestContext?: IRequestContext) => {\n if (!requestContext) {\n return false;\n }\n return requestContext.features && requestContext.features.enableDefaultPlaceholder;\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport React, { useEffect } from 'react';\nimport { placeholderImageUrl } from '../../components/image';\nimport { IAny, IGeneric } from '../../interfaces';\nimport { IEditableFieldProps } from './editable-field';\nimport { getEditableFieldClassName, isEditorialMode } from './utils';\n\nexport const ImageField = (props: IEditableFieldProps>) => {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const [svgRenderer, setSvgRenderer] = React.useState<(svgProps: any) => JSX.Element>();\n const onKeyPress = (event: React.KeyboardEvent) => {\n // 'enter' key\n if (event.charCode === 13 && props.onChange) {\n event.preventDefault();\n props.onChange(event);\n }\n };\n\n const editableProps = props.disabled\n ? {}\n : {\n onKeyPress: onKeyPress,\n onDoubleClick: props.onChange,\n onMouseOver: props.onMouseOver,\n onFocus: props.onFocus,\n onBlur: props.onBlur,\n onMouseOut: props.onMouseOut,\n tabIndex: 0\n };\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const fieldProps: any = {\n ...props.fieldProps,\n editProps: undefined\n };\n\n // If the image source is the placeholder image, set it's height to 1px\n if (\n props.fieldProps.src === placeholderImageUrl &&\n (!props.fieldProps['data-src'] || props.fieldProps['data-src'] === placeholderImageUrl)\n ) {\n fieldProps.height = '1px';\n }\n\n useEffect(() => {\n // if we are in editorial mode(WYSIWYG), dynamically load svg chunk and render placeholder SVG for empty images\n if (fieldProps.placeholderConfig && props.requestContext && isEditorialMode(props.requestContext)) {\n void import('../svg-loader').then(svg => {\n let SvgComponent: React.FunctionComponent>;\n switch (fieldProps.placeholderConfig?.name) {\n case svg.DEFAULT_PLACEHOLDER:\n SvgComponent = svg.default.largePicturePlaceholder;\n break;\n // TODO:Add more case when we get full assets of placeholder SVGs\n case svg.LARGE_IMAGE_PLACEHOLDER:\n SvgComponent = svg.default.largePicturePlaceholder;\n break;\n case svg.SMALL_IMAGE_PLACEHOLDER:\n SvgComponent = svg.default.smallPicturePlaceholder;\n break;\n case svg.TEST_PLACEHOLDER:\n SvgComponent = svg.default.testPlaceholder;\n break;\n default:\n SvgComponent = svg.default.largePicturePlaceholder;\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n setSvgRenderer(() => (svgProps: React.SVGAttributes) => {\n return ;\n });\n });\n }\n }, [fieldProps.placeholderConfig]);\n\n if (fieldProps.placeholderConfig && props.requestContext && isEditorialMode(props.requestContext)) {\n const divStyle = {\n display: 'flex',\n backgroundColor: '#F2F2F2',\n alignItems: 'center',\n width: (fieldProps.placeholderConfig.svgConfig && fieldProps.placeholderConfig.svgConfig.width) || '100%',\n height: (fieldProps.placeholderConfig.svgConfig && fieldProps.placeholderConfig.svgConfig.height) || '100%'\n };\n const svgStyle = {\n margin: '0 auto',\n display: 'block'\n };\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const svgPropety: React.SVGAttributes = {\n style: svgStyle\n };\n return (\n \n {svgRenderer && svgRenderer(svgPropety)}\n \n );\n }\n if (fieldProps.imageFallbackOptimize) {\n return (\n \n );\n } else {\n return (\n \n );\n }\n};\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport React, { Component } from 'react';\nimport ContentEditable, { ContentEditableEvent } from 'react-contenteditable';\nimport { FieldType, IEditableFieldProps, IText } from './editable-field';\nimport { getEditableFieldClassName } from './utils';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nlet domPurify: any;\n/**\n * Component class for text field\n */\nexport class TextField extends Component, { displayHtml: string }> {\n private isEmpty: boolean;\n constructor(props: { isFocused: boolean } & IEditableFieldProps) {\n super(props);\n this.state = {\n displayHtml: props.fieldProps.text\n };\n if (this.props.requestContext?.params?.isEditor) {\n // Separating dompurify into a new separate chunk to only download and load when needed in editor mode\n // eslint-disable-next-line @typescript-eslint/no-floating-promises\n import(/* webpackChunkName: \"msdyn365-dompurify-chunk\" */ 'dompurify').then(dp => {\n if (dp && dp.default) {\n domPurify = dp.default;\n }\n });\n }\n\n this._onChange = this._onChange.bind(this);\n this._onBlur = this._onBlur.bind(this);\n this._onFocus = this._onFocus.bind(this);\n this.isEmpty = false;\n }\n\n // eslint-disable-next-line @typescript-eslint/naming-convention\n public UNSAFE_componentWillReceiveProps(nextProps: IEditableFieldProps): void {\n if (this.props.fieldProps.text !== nextProps.fieldProps.text) {\n this.isEmpty = this._isTextEmpty(nextProps.fieldProps.text);\n\n // hook to handle props changes - when a field is changed between edit enabled/disabled states\n // eslint-disable-next-line react/no-direct-mutation-state\n this.state = {\n displayHtml: this._getDisplayText(nextProps.fieldProps.text)\n };\n }\n }\n\n public render(): JSX.Element | null {\n if (!!this.props.disabled) {\n return this.props.fieldProps.text ? (\n \n ) : null;\n }\n\n return (\n \n );\n }\n\n private _onChange(event: ContentEditableEvent): void {\n if (this.props.onChange) {\n const displayValue =\n this.props.type === FieldType.Text || this.props.type === FieldType.Link\n ? event.currentTarget.innerText\n : event.target.value;\n this.isEmpty = this._isTextEmpty(displayValue);\n this.setState({\n displayHtml: !this.isEmpty ? displayValue : ''\n });\n event.target.value = displayValue;\n this.props.onChange(event);\n }\n }\n private _onFocus(event: React.FocusEvent): void {\n const displayText = this._getDisplayText(this.props.fieldProps.text);\n if (this.isEmpty && !!this.props.fieldProps.required && displayText === 'Click to Edit') {\n this.setState({\n displayHtml: ' '\n });\n }\n }\n\n private _onBlur(event: React.FocusEvent): void {\n if (this.isEmpty && !!this.props.fieldProps.required) {\n this.setState({\n displayHtml: this._getDisplayText(this.props.fieldProps.text)\n });\n }\n }\n\n private _getDisplayText(text: string): string {\n return !!this.props.fieldProps.required && this.isEmpty ? this.props.placeholderText || 'Click to Edit' : text;\n }\n\n private _isTextEmpty(text: string): boolean {\n if (domPurify) {\n const sanitizedText = domPurify\n .sanitize(text, {\n ALLOWED_TAGS: []\n })\n .replace(/\\n/, '');\n\n return sanitizedText === '';\n }\n return false;\n }\n}\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport React from 'react';\nimport { IEditableFieldProps, ILink } from './editable-field';\nimport { TextField } from './text-field';\n\nexport const LinkField = (props: IEditableFieldProps) => {\n const onClick = (event: React.SyntheticEvent) => {\n if (!props.disabled) {\n event.preventDefault();\n }\n if (props.fieldProps.onClick) {\n props.fieldProps.onClick(event);\n }\n };\n return (\n // eslint-disable-next-line react/jsx-no-target-blank\n \n \n