&\r\n IProductSpecificationExtensionConfig> = props => {\r\n const {\r\n ModuleProps,\r\n MediaGalleryContainerProps,\r\n ProductInfoContainerProps,\r\n addToCart,\r\n addToOrderTemplate,\r\n addToWishlist,\r\n telemetryContent,\r\n configure,\r\n quantity,\r\n title,\r\n rating,\r\n callbacks,\r\n state,\r\n resources,\r\n inventoryLabel,\r\n keyInPrice,\r\n quantityLimitsMessages,\r\n max\r\n } = props;\r\n\r\n const {\r\n // prettier-ignore\r\n // @ts-ignore\r\n data: { productAvailableQuantity: { result: productAvailableQuantity }, productSpecificationData: { result: productSpecificationData }\r\n }\r\n } = props;\r\n const availibilityCode = productAvailableQuantity ? productAvailableQuantity[0]?.StockLevelCode : '';\r\n\r\n const badgesItems: BadgeShowType[] | undefined = props?.config?.badgeItems?.map((badge: IBadgeItemsExtensionData) => ({\r\n key: badge.badgeName,\r\n label: badge.badgeLabel,\r\n color: badge.badgeLabelColor,\r\n image: badge.badgeImage\r\n }));\r\n const badgesTag = badgesItems?.map(({ key }): string => key);\r\n const maxBadges = props?.config?.badgeMaxItems !== undefined ? Number(props.config.badgeMaxItems.replace('max_', '')) : 99;\r\n const badgesToShow: string[] = [];\r\n productSpecificationData?.map((row: productSpecificationData) => {\r\n const attributeName = (row.Name ?? '').replace('\\n', '').trim();\r\n if (row !== null && badgesTag?.includes(attributeName) && row.BooleanValue === true) {\r\n badgesToShow.push(attributeName);\r\n }\r\n });\r\n\r\n // @ts-ignore\r\n const productSpecificationResult = props?.data?.productSpecificationData?.result;\r\n const specificationsList = ['Product description', 'Ingredients', 'Nutritional Values JSON'];\r\n const specificationsListOrder = { 'Product description': 1, Reassurance: 2, Ingredients: 3, 'Nutritional Values JSON': 4, Labels: 5 };\r\n const ingredientsAllAttributesList = ['Ingredients', 'Ingredients 2', 'Ingredients 3'];\r\n const labels = props.resources;\r\n // @ts-ignore\r\n const pTags = [];\r\n const pSpecifications = [];\r\n // @ts-ignore\r\n const ingredientsArray = [];\r\n let ingredientsString = '';\r\n\r\n const reassuranceItems: ReassuranceShowType[] = props?.slots?.productSpecification?.length\r\n ? // @ts-ignore\r\n (props?.slots?.productSpecification[0]?.props?.config?.reassuranceItems ?? []).map((reassurance: IReassuranceItemsExtensionData) => {\r\n if (reassurance) {\r\n return {\r\n title: reassurance.reassuranceTitle,\r\n description: reassurance.reassuranceDescription,\r\n image: reassurance.reassuranceImage\r\n };\r\n }\r\n })\r\n : [];\r\n\r\n const isProductAccordionOpened = props?.slots?.productSpecification?.length\r\n ? // @ts-ignore\r\n (props?.slots?.productSpecification[0]?.props?.config?.productDescriptionAccordionOpened ?? false)\r\n : false;\r\n\r\n const [accordionsState, setAccordionsState] = React.useState(isProductAccordionOpened ? 'Productdescription' : '');\r\n const [fetchingLabels, setFetchingLabels] = React.useState(false);\r\n const [productLabels, setProductLabels] = React.useState([\r\n {\r\n label: labels['product_specification_title_emea_label'] ?? 'EMEA label',\r\n imgLink: ''\r\n },\r\n {\r\n label: labels['product_specification_title_emea_warnings'] ?? 'EMEA warnings',\r\n imgLink: ''\r\n },\r\n {\r\n label: labels['product_specification_title_fda_label'] ?? 'FDA label',\r\n imgLink: ''\r\n }\r\n ]);\r\n\r\n // @ts-ignore\r\n productSpecificationResult?.map(row => {\r\n if (row !== null && specificationsList.includes(row.Name) && row.TextValue !== '') {\r\n pSpecifications.push({ name: row.Name, data: row, order: specificationsListOrder[row.Name] });\r\n }\r\n if (row !== null && ingredientsAllAttributesList.includes(row.Name) && row.TextValue !== '') {\r\n ingredientsArray.push(row);\r\n }\r\n });\r\n pSpecifications.push({ name: 'Reassurance', order: specificationsListOrder.Reassurance });\r\n pSpecifications.push({ name: 'Labels', order: specificationsListOrder.Labels });\r\n pSpecifications.sort((a, b) => a.order - b.order);\r\n // @ts-ignore\r\n const productSku = props.data.product.result?.ItemId;\r\n // @ts-ignore\r\n const productPrimaryImageUrl = props.data.product.result?.PrimaryImageUrl;\r\n\r\n function addToCartGA() {\r\n let output: string[] = [];\r\n const names = document.getElementsByClassName('ms-breadcrumb_link');\r\n Array.from(names).forEach(item => {\r\n output.push(item.getAttribute('aria-label') ?? '');\r\n })\r\n const categoryGA = output.slice(0, -1).toString();\r\n const product = props.data.product.result;\r\n\r\n const productInfo = {\r\n 'name': product?.Name,\r\n 'id': product?.ItemId, //product SKU\r\n 'price': props.data.productPrice.result?.CustomerContextualPrice,\r\n 'quantity': (document.getElementsByClassName('quantity-input')[0] as HTMLInputElement).value,\r\n 'category': categoryGA,\r\n //TODO restore way of saving list attribute\r\n //'list': sessionStorage.getItem('list') ?? ''\r\n 'list': ''\r\n };\r\n //TODO restore way of saving list attribute\r\n //localStorage.setItem(product?.ItemId ?? '', categoryGA + ';' + (sessionStorage.getItem('list') ?? ''));\r\n\r\n window.dataLayer?.push?.({\r\n 'event': 'addToCart',\r\n 'ecommerce': {\r\n // @ts-ignore\r\n 'currencyCode': props.context.cultureFormatter.currencyCode,\r\n 'add': {\r\n 'actionField': {\r\n //TODO restore way of saving list attribute\r\n //'list': sessionStorage.getItem('list') ?? '',\r\n 'list': '',\r\n 'action': 'add',\r\n },\r\n 'products': [productInfo]\r\n }\r\n }\r\n });\r\n }\r\n\r\n React.useEffect(() => {\r\n document.getElementsByClassName('msc-add-to-cart')[0].addEventListener('click', addToCartGA);\r\n }, []);\r\n\r\n // @ts-ignore\r\n ingredientsArray.map(row => {\r\n ingredientsString += row.TextValue || '';\r\n });\r\n\r\n const scrollToRevews = React.useCallback(() => {\r\n const yOffset = -180;\r\n const element = document.getElementsByClassName('ms-ratings-histogram')[0];\r\n const y = element.getBoundingClientRect().top + yOffset + window.pageYOffset;\r\n window.scrollTo({ top: y, behavior: 'smooth' });\r\n }, []);\r\n\r\n const accordionOnClick = (accordion: string): void => {\r\n const accStates = accordionsState.split(',');\r\n if (accStates.includes(accordion)) {\r\n setAccordionsState('');\r\n } else {\r\n setAccordionsState(accordion);\r\n }\r\n };\r\n\r\n const isAccordionExpanded = (accordion: string): boolean => {\r\n const accStates = accordionsState.split(',');\r\n return accStates.includes(accordion);\r\n };\r\n\r\n const normalizeData = (data: NutritionalData[]): NutritionalData[] => {\r\n const resultData: NutritionalData[] = [];\r\n data.map((row: NutritionalData) => {\r\n if (row.qty1Value) {\r\n let category: NutritionalData | undefined;\r\n const subcategory: NutritionalSubcategoryData[] = [];\r\n if (row.subcategory) {\r\n row.subcategory.map((subRow: NutritionalSubcategoryData) => {\r\n if (subRow.qty1Value) {\r\n subcategory.push(subRow);\r\n }\r\n });\r\n }\r\n category = {\r\n ...row\r\n };\r\n if (subcategory.length) {\r\n category.subcategory = subcategory;\r\n } else if (category.subcategory) {\r\n // @ts-ignore\r\n delete category.subcategory;\r\n }\r\n resultData.push(category);\r\n }\r\n });\r\n return resultData;\r\n };\r\n\r\n const _renderNutritionalValues = (jData: any): JSX.Element | undefined => {\r\n const normalizedData = normalizeData(jData);\r\n if (normalizedData.length < 2) {\r\n return undefined;\r\n }\r\n return (\r\n \r\n {normalizedData.map((row: NutritionalData) => (\r\n <>\r\n
\r\n
{labels[row.label] ?? ''}
\r\n
\r\n
{labels[row.qty1Label] ?? ''}
\r\n
{row.qty1Value ?? ''}
\r\n
{row.qty1Unit ?? ''}
\r\n
\r\n {row.qty2Value && (\r\n
\r\n
\r\n
\r\n
\r\n
{row.qty2Value ?? ''}
\r\n
{row.qty2Unit ?? ''}
\r\n
\r\n )}\r\n {row.subcategory &&\r\n row.subcategory.map((subRow: NutritionalSubcategoryData) => (\r\n
\r\n
{labels[subRow.label] ?? ''}
\r\n
\r\n
{subRow.qty1Value ?? ''}
\r\n
{subRow.qty1Unit ?? ''}
\r\n
\r\n ))}\r\n >\r\n ))}\r\n
\r\n );\r\n };\r\n\r\n const _renderProductLabels = (productLabels: ProductLabel[]): JSX.Element => {\r\n return (\r\n \r\n {productLabels\r\n .filter(label => label.imgLink !== '')\r\n .map((row: ProductLabel) => (\r\n
\r\n ))}\r\n
\r\n );\r\n };\r\n\r\n const _renderReassurance = (reassuranceItems: ReassuranceShowType[]): JSX.Element => {\r\n return (\r\n \r\n {reassuranceItems.map((row: ReassuranceShowType, index: number) => {\r\n const isLast = index === reassuranceItems.length - 1;\r\n const imgSettings = row?.image?.imageSettings ?? undefined;\r\n return imgSettings ? (\r\n
\r\n
\r\n \r\n
\r\n
\r\n {row.title}\r\n {row.description}\r\n
\r\n
\r\n ) : (\r\n undefined\r\n );\r\n })}\r\n
\r\n );\r\n };\r\n\r\n React.useEffect(() => {\r\n if (!fetchingLabels) {\r\n setFetchingLabels(true);\r\n _getProductLabels(productSku, productPrimaryImageUrl).then((response: string[]) => {\r\n const newProductLabels = [...productLabels];\r\n productLabels.forEach((_, index: number) => {\r\n newProductLabels[index].imgLink = response[index];\r\n });\r\n setProductLabels(newProductLabels);\r\n });\r\n }\r\n });\r\n\r\n // @ts-ignore\r\n const productShortDescription = props?.data?.productSpecificationData?.result?.filter(\r\n (productDesc: { Name: string }) => productDesc.Name === 'Short product description'\r\n )[0]?.TextValue;\r\n // @ts-ignore\r\n const avgRating = props?.rating?.props?.avgRating ?? 0;\r\n // @ts-ignore\r\n const totRatingsLabel = `${props?.rating?.props?.ratingCount ?? '0'} ${props?.resources?.buyboxReviewLabel ?? ''}`;\r\n return (\r\n \r\n \r\n {props.mediaGallery}\r\n
\r\n \r\n
\r\n {title}\r\n {productShortDescription && {productShortDescription}
}\r\n {rating ? (\r\n \r\n ) : (\r\n \r\n )}\r\n {maxBadges ? (\r\n \r\n {badgesItems\r\n ?.filter((badge: BadgeShowType) => badgesToShow.includes(badge.key))\r\n ?.map((badge: BadgeShowType, index: number) => {\r\n if (index <= maxBadges - 1) {\r\n return _renderBadge(badge, props);\r\n }\r\n return '';\r\n })}\r\n
\r\n ) : null}\r\n \r\n {props.data.product.result?.RecordId}\r\n {props.data.product.result?.ItemId}\r\n
\r\n {_renderPrice(props, resources)}\r\n {availibilityCode && {inventoryLabel}
}\r\n {configure && _renderConfigure(configure)}\r\n {keyInPrice && _renderKeyInPrice(keyInPrice)}\r\n \r\n \r\n {quantity &&\r\n _renderQuantity(\r\n quantity,\r\n callbacks,\r\n props,\r\n state,\r\n resources,\r\n quantityLimitsMessages,\r\n max,\r\n telemetryContent\r\n )}\r\n {_renderCartAndActions(addToCart, addToOrderTemplate, addToWishlist, props.resources)}\r\n
\r\n {_renderCartAndActionsPM(addToCart, addToWishlist, props.resources)}\r\n \r\n {_renderTextBlock(props.slots.textBlocks)}\r\n \r\n
\r\n {pSpecifications.length ? (\r\n \r\n {// @ts-ignore\r\n pSpecifications.map(row => {\r\n const title = row.name;\r\n const titleId = title.replace(/\\s+/g, '');\r\n let titleLabel = labels[`product_specification_title_${title.replace(/\\s+/g, '_').toLowerCase()}`] ?? title;\r\n const ingredientsFinalString = ingredientsString;\r\n\r\n let accordionContent;\r\n if (title === 'Ingredients' && ingredientsFinalString) {\r\n accordionContent = ingredientsFinalString;\r\n } else if (title === 'Nutritional Values JSON') {\r\n try {\r\n // @ts-ignore;\r\n const jData = JSON.parse(row.data.TextValue);\r\n accordionContent = _renderNutritionalValues(\r\n jData.nutritionalValueJSONType ? jData.nutritionalValueJSONType : jData\r\n );\r\n } catch (e) {\r\n return;\r\n }\r\n } else if (title === 'Reassurance' && reassuranceItems.length > 0) {\r\n accordionContent = _renderReassurance(reassuranceItems);\r\n } else if (title === 'Labels' && productLabels.filter(label => label.imgLink !== '').length > 0) {\r\n titleLabel = labels['product_specification_title_product_labels'] ?? titleLabel;\r\n accordionContent = _renderProductLabels(productLabels);\r\n // @ts-ignore;\r\n } else if (row.data && row.data.TextValue) {\r\n // @ts-ignore;\r\n accordionContent = row.data.TextValue;\r\n }\r\n\r\n if (!accordionContent) return;\r\n\r\n return (\r\n // tslint:disable-next-line:jsx-key\r\n \r\n
\r\n
\r\n
\r\n
\r\n {accordionContent}\r\n
\r\n
\r\n );\r\n })}\r\n {_renderSocialShare(props.slots && props.slots?.socialShare)}\r\n \r\n ) : (\r\n ''\r\n )}\r\n \r\n
\r\n \r\n );\r\n };\r\n\r\nconst getStar = (star: number, value: number): string => {\r\n if (star - value <= 0) return '__star';\r\n else if (star - value > 0 && star - value < 1) return '__half-star';\r\n else return '__empty-star';\r\n};\r\n\r\nconst _renderStars = (value: number, className?: string) => {\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// tslint:disable-next-line:no-any\r\nconst _renderAddToBackInStore = (\r\n customerId?: string,\r\n channelId?: number,\r\n itemid?: string,\r\n dimensions?: ProductDimension[],\r\n actionContext?: any,\r\n resources?: IBuyboxResources,\r\n emailAddress?: string,\r\n locale?: string\r\n): JSX.Element => {\r\n const cust = customerId ? customerId : '';\r\n const item = itemid ? itemid : '';\r\n const channel = channelId ? channelId : 0;\r\n const dims = dimensions ? dimensions : [];\r\n let color: string = '';\r\n let config: string = '';\r\n let size: string = '';\r\n let style: string = '';\r\n // prettier-ignore\r\n // @ts-ignore\r\n let message = resources.backInStockMessage ? resources.backInStockMessage : 'You will receive an email when the product is back in stock';\r\n let toHide = false;\r\n\r\n dims.forEach(dim => {\r\n if (dim.DimensionTypeValue === 1) {\r\n color = dim.DimensionValue?.DimensionId !== undefined ? dim.DimensionValue?.DimensionId : '';\r\n } else if (dim.DimensionTypeValue === 2) {\r\n config = dim.DimensionValue?.DimensionId !== undefined ? dim.DimensionValue?.DimensionId : '';\r\n } else if (dim.DimensionTypeValue === 3) {\r\n size = dim.DimensionValue?.DimensionId !== undefined ? dim.DimensionValue?.DimensionId : '';\r\n } else if (dim.DimensionTypeValue === 4) {\r\n style = dim.DimensionValue?.DimensionId !== undefined ? dim.DimensionValue?.DimensionId : '';\r\n }\r\n });\r\n\r\n toHide = cust !== '' ? false : true;\r\n const [stockMessage, setStockMessage] = React.useState(false);\r\n\r\n const _AddToBackInStore = async () => {\r\n insertBackInStock_CAPAsync_v2({ callerContext: actionContext }, channel, cust, item, color, config, size, style, 1, emailAddress || '', locale || '').then(result => {\r\n message = result[0].Error ? result[0].Error : message;\r\n });\r\n setStockMessage(true);\r\n };\r\n const inactiveAccount = cust.includes(\"-\");\r\n\r\n return (\r\n <>\r\n {toHide === false && (\r\n \r\n
\r\n {stockMessage ? (\r\n
\r\n
\r\n {/* tslint:disable-next-line:jsx-no-lambda react-this-binding-issue */}\r\n
\r\n {message}\r\n
\r\n ) : (\r\n ''\r\n )}\r\n
\r\n )}\r\n >\r\n );\r\n};\r\n\r\nconst _renderTextBlock = (textBlocks: React.ReactNode[]): JSX.Element | undefined => {\r\n if (!textBlocks || textBlocks.length === 0) {\r\n return undefined;\r\n }\r\n\r\n return <>{textBlocks[0]}>;\r\n};\r\n\r\nconst _renderPrice = (props: IBuyboxViewProps, resources: IBuyboxExtensionResources): JSX.Element | undefined => {\r\n const custom_price = props.context.cultureFormatter.formatCurrency(props.data.productPrice.result?.AdjustedPrice?.toFixed(2) ?? '');\r\n const custom_discount_percentage = getCustomDiscountPercentage(props.data.productPrice.result?.DiscountLines)\r\n const custom_discounted_price = props.context.cultureFormatter.formatCurrency(\r\n props.data.productPrice.result?.CustomerContextualPrice?.toFixed(2) ?? ''\r\n );\r\n\r\n if (custom_discount_percentage) {\r\n // @ts-ignore\r\n const attributes = props.data.productSpecificationData.result;\r\n\r\n let omnibus_price = null;\r\n if (attributes) {\r\n // @ts-ignore\r\n omnibus_price = attributes.filter(attribute => attribute.Name.includes('Minimum Price Last 30 Days'))[0];\r\n }\r\n\r\n let omnibus_price_currency = '';\r\n if (omnibus_price && omnibus_price.CurrencyValue && omnibus_price.CurrencyCode) {\r\n omnibus_price_currency = props.context.cultureFormatter.formatCurrency(omnibus_price.CurrencyValue, omnibus_price.CurrencyCode);\r\n }\r\n\r\n return (\r\n <>\r\n \r\n {custom_price}\r\n {custom_discount_percentage}\r\n {custom_discounted_price}\r\n { omnibus_price_currency && (\r\n \r\n \r\n {resources.omnibus_recent_price_label} \r\n {omnibus_price_currency}\r\n \r\n
\r\n )}\r\n \r\n >\r\n );\r\n }\r\n return (\r\n \r\n {custom_price}\r\n \r\n );\r\n};\r\n\r\nfunction _addToPickAndMix(\r\n catUrl: string,\r\n pmProductsList: any,\r\n RecordId: number,\r\n Name: string | undefined,\r\n PrimaryImageUrl: string | undefined,\r\n pQuantity: number,\r\n Price: number,\r\n ItemId: number\r\n): void {\r\n pmProductsList[RecordId] = {\r\n Id: RecordId,\r\n Item: Name,\r\n Qty: pQuantity,\r\n UOM: '',\r\n Price: Price,\r\n Description: ItemId.toString(),\r\n DataAreaId: '',\r\n PrimaryImageUrl: PrimaryImageUrl\r\n };\r\n typeof window !== 'undefined' ? localStorage.setItem('pm_products', JSON.stringify(pmProductsList)) : undefined;\r\n window.location.assign(catUrl);\r\n}\r\n\r\nconst _renderCartAndActions = (\r\n addToCart?: IBuyboxAddToCartViewProps,\r\n addToOrderTemplate?: IBuyboxAddToOrderTemplateViewProps,\r\n addToWishlist?: IBuyboxAddToWishlistViewProps,\r\n resources?: IBuyboxResources\r\n): JSX.Element | undefined => {\r\n if (!addToCart && !addToWishlist) {\r\n return undefined;\r\n }\r\n // @ts-ignore\r\n const props = addToCart?.button?.props;\r\n\r\n const euHostname = 'eu.venchi.com';\r\n const localeString = props?.context?.request?.locale ? props?.context?.request?.locale?.toLowerCase() : '';\r\n const sitePath = props?.context?.request?.sitePath ? props?.context?.request?.sitePath?.substring(1) : '';\r\n const hostname = props?.context?.request?.url?.requestUrl?.hostname || '';\r\n let locale: string;\r\n if (hostname.toLowerCase() === euHostname && sitePath === '') {\r\n locale = 'eu';\r\n } else {\r\n locale = sitePath !== '' ? sitePath : localeString;\r\n }\r\n\r\n return (\r\n \r\n {addToOrderTemplate && addToOrderTemplate.errorBlock}\r\n {addToWishlist && addToWishlist.errorBlock}\r\n
\r\n
\r\n {_renderAddToBackInStore(\r\n props.context.request.user.customerAccountNumber,\r\n props.context.request.apiSettings.channelId,\r\n props.data?.product?.ItemId,\r\n props.data?.product?.Dimensions,\r\n props.context?.actionContext,\r\n resources,\r\n props.context.request.user.emailAddress,\r\n locale,\r\n )}\r\n {addToCart && addToCart.button}\r\n {addToOrderTemplate && addToOrderTemplate.button}\r\n
\r\n {addToWishlist &&
{addToWishlist && addToWishlist.button}}\r\n
\r\n {addToCart && addToCart.errorBlock}\r\n {props.context.request.user.customerAccountNumber !== null && !props.context.request.user.customerAccountNumber.includes(\"-\") && (\r\n
\r\n {\r\n // @ts-ignore\r\n resources.backInStockAgreement\r\n }\r\n
\r\n )}\r\n
\r\n );\r\n};\r\n\r\nconst _renderCartAndActionsPM = (\r\n addToCart?: IBuyboxAddToCartViewProps,\r\n addToWishlist?: IBuyboxAddToWishlistViewProps,\r\n resources?: IBuyboxResources\r\n): JSX.Element | undefined => {\r\n if (!addToCart && !addToWishlist) {\r\n return undefined;\r\n }\r\n // @ts-ignore\r\n const props = addToCart?.button?.props;\r\n const productId = props?.data?.product?.RecordId;\r\n const channelId = props?.context?.request?.channel?.RecordId;\r\n const categoryPathLookups = [{ ProductId: productId }];\r\n const [catUrl, setCatUrl] = React.useState('');\r\n const [isPm, setIsPm] = React.useState(false);\r\n const _productCategory = async () => {\r\n const categoryPathResults = await getCategoryPathsAsync(props?.context?.actionContext, channelId, 0, categoryPathLookups);\r\n categoryPathResults &&\r\n categoryPathResults[0] &&\r\n categoryPathResults[0]?.CategoryPath?.map((catPath, i) => {\r\n const categoryUrl = getCategoriesUrlSync(catPath, props?.context?.actionContext);\r\n if (categoryUrl && categoryUrl[1] && categoryUrl[1].Name === 'Pick&Mix') {\r\n setIsPm(true);\r\n setCatUrl(categoryUrl[1].Url ? categoryUrl[1].Url : '');\r\n }\r\n });\r\n return;\r\n };\r\n React.useEffect(() => {\r\n void _productCategory();\r\n }, []);\r\n // tslint:disable-next-line:no-shadowed-variable\r\n const _addToPM = (\r\n catUrl: string,\r\n RecordId: number,\r\n Name: string,\r\n PrimaryImageUrl: string,\r\n AdjustedPrice: number,\r\n Qty: number,\r\n ItemId: number\r\n ) => {\r\n const localPm = localStorage && localStorage.getItem('pm_products');\r\n const localPmProds = localPm && localPm !== null ? localPm : JSON.stringify({});\r\n const pmProductsList = JSON.parse(localPmProds);\r\n const _addToPm = () => {\r\n _addToPickAndMix(catUrl, pmProductsList, RecordId, Name, PrimaryImageUrl, AdjustedPrice, Qty, ItemId);\r\n };\r\n return (\r\n <>\r\n \r\n >\r\n );\r\n };\r\n /* @ts-ignore */\r\n const product_qty: product_qty = addToCart?.button?.props?.quantity;\r\n return (\r\n \r\n {isPm ? (\r\n
\r\n {_addToPM(\r\n catUrl,\r\n props.data?.product?.RecordId,\r\n props.data?.product?.Name,\r\n props.data?.product?.PrimaryImageUrl,\r\n product_qty,\r\n props.data?.product?.AdjustedPrice,\r\n props.data?.product?.ItemId\r\n )}\r\n
\r\n ) : (\r\n ''\r\n )}\r\n
\r\n );\r\n};\r\n\r\nconst _renderConfigure = (configure: IBuyboxProductConfigureViewProps): JSX.Element => {\r\n const { ContainerProps, dropdowns } = configure;\r\n\r\n return {dropdowns.map(_renderConfigureDropdown)};\r\n};\r\n\r\nconst _renderConfigureDropdown = (dropdown: IBuyboxProductConfigureDropdownViewProps): JSX.Element => {\r\n const { ContainerProps, LabelContainerProps, heading, errors, select } = dropdown;\r\n\r\n return (\r\n \r\n \r\n {heading}\r\n {errors}\r\n \r\n {select}\r\n \r\n );\r\n};\r\n\r\nconst _renderQuantity = (\r\n quantityComponent: IBuyboxProductQuantityViewProps,\r\n callbacks: IBuyboxCallbacks,\r\n props: IBuyboxProps,\r\n state: IBuyboxState,\r\n extentionResources: IBuyboxExtensionResources,\r\n quantityLimitsMessages: React.ReactNode,\r\n max: number | undefined,\r\n telemetryContent?: ITelemetryContent\r\n): JSX.Element => {\r\n const { ContainerProps, LabelContainerProps, heading, errors } = quantityComponent;\r\n\r\n const { resources } = props;\r\n\r\n const { quantity } = state;\r\n\r\n if (state.isCustomPriceSelected) {\r\n props.data;\r\n }\r\n const onChange = (newValue: number): boolean => {\r\n if (callbacks.updateQuantity) {\r\n return callbacks.updateQuantity(newValue);\r\n }\r\n return true;\r\n };\r\n\r\n return (\r\n \r\n \r\n {heading}\r\n {errors}\r\n \r\n\r\n \r\n {quantityLimitsMessages}\r\n \r\n );\r\n};\r\n\r\nconst _renderKeyInPrice = (keyInPrice: IBuyboxKeyInPriceViewProps): JSX.Element => {\r\n const { ContainerProps, LabelContainerProps, heading, input } = keyInPrice;\r\n\r\n return (\r\n \r\n {heading}\r\n {input}\r\n \r\n );\r\n};\r\n\r\nconst _renderBadge = (badge: BadgeShowType, props: IBuyboxViewProps) => {\r\n const imgSettings = badge?.image?.imageSettings ?? undefined;\r\n if (!imgSettings) return undefined;\r\n return (\r\n \r\n \r\n {badge.label}\r\n
\r\n );\r\n};\r\n\r\nconst _getProductLabels = async (productId?: string, baseImagePath?: string): Promise => {\r\n if (productId && baseImagePath) {\r\n const results: string[] = [];\r\n const imgBaseUrlArray = decodeURIComponent(baseImagePath).split('/');\r\n imgBaseUrlArray.pop();\r\n\r\n const imgUrls = [\r\n [...imgBaseUrlArray, `${productId}_000_006.jpg`].join('/'),\r\n [...imgBaseUrlArray, `${productId}_000_007.jpg`].join('/'),\r\n [...imgBaseUrlArray, `${productId}_000_008.jpg`].join('/')\r\n ];\r\n for (let i = 0; i < 3; i = i + 1) {\r\n try {\r\n const response = await axios.get(imgUrls[i]);\r\n results.push(response?.status === 200 ? imgUrls[i] : '');\r\n } catch (e) {\r\n results.push('');\r\n }\r\n }\r\n return results;\r\n }\r\n return ['', '', ''];\r\n};\r\n\r\nconst _renderSocialShare = (socialShare: React.ReactNode[]): JSX.Element | undefined => {\r\n if (!socialShare || socialShare.length === 0) {\r\n return undefined;\r\n }\r\n return <>{socialShare[0]}>;\r\n};\r\n\r\nexport default BuyboxView;","import { DiscountLine } from \"@msdyn365-commerce/retail-proxy\";\r\n\r\nconst getNormalizedDiscountPercentage = (percentage ?: number) : number => {\r\n if(!percentage) return 0;\r\n return percentage / 100;\r\n}\r\n\r\nexport const getCustomDiscountPercentage = (discountLines ?: DiscountLine[]) : string | undefined => {\r\n if(!discountLines || discountLines.length < 1) return;\r\n const normalizedDiscountedPrice = discountLines.reduce(\r\n (accumulator, discountLine) => accumulator * (1 - getNormalizedDiscountPercentage(discountLine.Percentage)), 1);\r\n return `-${100 - (Math.round(normalizedDiscountedPrice * 100))}%`;\r\n}\r\n","/*---------------------------------------------------------------------------------------------\r\n * Copyright (c) Microsoft Corporation. All rights reserved.\r\n * Licensed under the MIT License. See License.txt in the project root for license information.\r\n *--------------------------------------------------------------------------------------------*/\r\n\r\n/*!\r\n * Copyright (c) Microsoft Corporation.\r\n * All rights reserved. See LICENSE in the project root for license information.\r\n */\r\n\r\nimport { Module, Node } from '@msdyn365-commerce-modules/utilities';\r\nimport * as React from 'react';\r\nimport { DeliveryOption } from '@msdyn365-commerce/retail-proxy/dist/Entities/CommerceTypes.g';\r\nimport get from 'lodash/get';\r\n\r\nimport { ICheckoutDeliveryOption, ICheckoutDeliveryOptionsViewProps, ICheckoutDeliveryOptionsList } from '@msdyn365-commerce-modules/checkout/src/modules/checkout-delivery-options/./checkout-delivery-options';\r\nimport { ICheckoutDeliveryOptionsProps } from '../definition-extensions/checkout-delivery-options.ext.props.autogenerated';\r\nimport * as Msdyn365 from '@msdyn365-commerce/core';\r\n\r\n\r\ninterface ICheckoutDeliveryData extends ICheckoutDeliveryOptionsList {\r\n deliveryOptions: DeliveryOption[];\r\n}\r\n\r\n\r\nconst DeliveryOptionList: React.FC = ({ DeliveryOptionsList, list, deliveryOptions }) => {\r\n if (!list || list.length === 0) {\r\n return null;\r\n }\r\n\r\n // deliveryOptions sorted by ShippingChargeAmount\r\n const sortedDeliveryOptions = deliveryOptions.sort((a, b) => {\r\n return get(a, 'ShippingChargeAmount', 0) - get(b, 'ShippingChargeAmount', 0);\r\n });\r\n\r\n // console.log(sortedDeliveryOptions);\r\n return (\r\n \r\n {sortedDeliveryOptions.map((deliveryOption: DeliveryOption) => {\r\n const sortedDeliveryOption = list.find(deliveryOptionEdit => deliveryOptionEdit.code === deliveryOption.Code);\r\n if (sortedDeliveryOption !== undefined) {\r\n return (\r\n \r\n {sortedDeliveryOption.radioButton}\r\n {sortedDeliveryOption.description}\r\n {sortedDeliveryOption.price}\r\n \r\n );\r\n } else {\r\n return null;\r\n }\r\n })}\r\n \r\n );\r\n};\r\n\r\nconst DeliveryOptionSelected: React.FC = ({ DeliveryOption, description, price }) => {\r\n return (\r\n \r\n {description}\r\n {price}\r\n \r\n );\r\n};\r\n\r\n\r\nconst CheckoutDeliveryOptionsView: React.FC> = props => {\r\n const {\r\n CheckoutDeliveryOptions,\r\n checkoutErrorRef,\r\n viewState,\r\n deliveryOptions,\r\n deliveryOptionsData,\r\n deliveryOptionSelected,\r\n alert,\r\n waiting,\r\n saveButton,\r\n editButton,\r\n cancelButton\r\n } = props;\r\n const extraTextField = props.config.paragraph;\r\n const extraText = extraTextField && ;\r\n return (\r\n // TODO: All wrapper div should be provided by viewProps. Once SDK provide the sln, update markup.\r\n \r\n {extraText}\r\n {viewState.isLoading && waiting}\r\n {viewState.isError && alert}\r\n {viewState.isShowList && deliveryOptions && }\r\n {viewState.isShowSelected && deliveryOptionSelected && }\r\n {viewState.isShowSaveButton && saveButton}\r\n {viewState.isShowEditButton && editButton}\r\n {viewState.isShowCancelButton && cancelButton}\r\n \r\n );\r\n};\r\n\r\nexport default CheckoutDeliveryOptionsView;\r\n\r\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport QRCode from 'qrcode.react';\nimport * as React from 'react';\n\n/**\n * CheckInConfirmation component Properties.\n */\nexport interface ICheckInConfirmationProps {\n /**\n * The confirmation text to show.\n */\n confirmationText: string;\n\n /**\n * Should the order confirmation number shown as QR code or not.\n * If false, the order confirmation number (channel reference ID) will be shown as text.\n */\n shouldShowQrCode: boolean;\n\n /**\n * The label shows for channel reference ID.\n */\n channelReferenceIdLabel: string;\n\n /**\n * The channel reference ID to show. When shouldShowQrCode is true, the ID is shown as QR code, otherwise it is shown as text.\n */\n channelReferenceId?: string;\n}\n\n/**\n * CheckInConfirmation component for showing confirmation information after check-in succeed.\n * @param confirmationProps - The confirmation properties.\n * @param confirmationProps.confirmationText - The confirmation text.\n * @param confirmationProps.shouldShowQrCode - Should the order confirmation number shown as QR code or not.\n * If false, the order confirmation number (channel reference ID) will be shown as text.\n * @param confirmationProps.channelReferenceIdLabel - The label shows for channel reference ID.\n * @param confirmationProps.channelReferenceId - The channel reference ID to show.\n * When shouldShowQrCode is true, the ID is shown as QR code, otherwise it is shown as text.\n * @returns The check-in confirmation component.\n */\nexport const CheckInConfirmationComponent: React.FC = ({\n confirmationText,\n shouldShowQrCode,\n channelReferenceIdLabel,\n channelReferenceId\n}) => {\n return (\n \n
{confirmationText}
\n {channelReferenceId && (\n
\n {`${channelReferenceIdLabel} ${channelReferenceId}`}\n
\n )}\n {channelReferenceId && shouldShowQrCode && (\n
\n \n \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 * as React from 'react';\n\n/**\n * Check-in error properties.\n */\nexport interface ICheckInErrorProps {\n errorMessage?: string;\n}\n\n/**\n * Check-in error.\n * @param errorProps - The error properties.\n * @param errorProps.errorMessage - The error message to show.\n * @returns The alert element showing check-in errors.\n */\nexport const CheckInErrorComponent: React.FC = ({ errorMessage }) => {\n if (!errorMessage) {\n return null;\n }\n\n return (\n \n \n {errorMessage}\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 { IDictionary } from '@msdyn365-commerce/core';\nimport { CommerceProperty, SalesOrdersDataActions } from '@msdyn365-commerce/retail-proxy';\nimport { ArrayExtensions, ObjectExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport * as React from 'react';\n\nimport { CheckInConfirmationComponent } from './check-in-confirmation';\nimport { CheckInErrorComponent } from './check-in-error';\nimport { IAdditionalInformationKeysData, ICheckInForPickupConfig, ICheckInForPickupProps } from './check-in-for-pickup.props.autogenerated';\n\n/**\n * The interface representing a piece of additional information data.\n */\ninterface IAdditionalInformation {\n formKey: IAdditionalInformationKeysData;\n value: string;\n}\n\n/**\n * The state for check-in view.\n */\nexport interface ICheckInViewState {\n /**\n * If the module has header error to show.\n */\n isHeaderError: boolean;\n\n /**\n * If the customer has checked in.\n */\n isCheckedIn: boolean;\n\n /**\n * Additional information to capture.\n */\n additionalInformation: IDictionary[];\n}\n\n/**\n * The properties for check-in view.\n */\nexport interface ICheckInViewProps extends ICheckInForPickupProps {\n headerError: React.ReactNode;\n confirmationComponent: React.ReactNode;\n viewState: ICheckInViewState;\n additionalInformationValues: string[];\n checkInForOrderPickup(additionalInformation?: IAdditionalInformation[]): Promise;\n}\n\n/**\n * The state of the CheckInForPickup module.\n */\nexport interface ICheckInForPickupState {\n /**\n * The header error message.\n */\n headerErrorMessage: string;\n\n /**\n * If the customer has checked in successfully.\n */\n isCheckedIn: boolean;\n}\n\n/**\n *\n * CheckIn component.\n * @extends {React.Component, ICheckInForPickupState>}\n */\nclass CheckInForPickup extends React.Component, ICheckInForPickupState> {\n public constructor(props: ICheckInForPickupProps) {\n super(props);\n this.state = {\n headerErrorMessage: '',\n isCheckedIn: false\n };\n }\n\n public render(): JSX.Element | null {\n const isHeaderError: boolean = this.state.headerErrorMessage !== '';\n\n const viewProps = {\n ...this.props,\n headerError: ,\n confirmationComponent: (\n \n ),\n checkInForOrderPickup: this.checkInForOrderPickup,\n additionalInformationValues: this.props.config.additionalInformationKeys\n ? this.props.config.additionalInformationKeys.map(() => {\n return {};\n })\n : undefined,\n viewState: {\n isHeaderError,\n isCheckedIn: this.state.isCheckedIn\n }\n };\n\n return this.props.renderView(viewProps) as React.ReactElement;\n }\n\n public shouldComponentUpdate(nextProps: ICheckInForPickupProps, nextState: ICheckInForPickupState): boolean {\n if (\n this.props.config.additionalInformationHeading !== nextProps.config.additionalInformationHeading ||\n this.props.config.confirmationText !== nextProps.config.confirmationText\n ) {\n return true;\n }\n if (this.state.headerErrorMessage !== nextState.headerErrorMessage || this.state.isCheckedIn !== nextState.isCheckedIn) {\n return true;\n }\n return false;\n }\n\n public async componentDidMount(): Promise {\n await this._onInit();\n }\n\n /**\n * The async callback for submitting check-in.\n * @param additionalInformationList - The optional additional information captured.\n * @returns The async result.\n */\n public checkInForOrderPickup = async (additionalInformationList?: IAdditionalInformation[]): Promise => {\n const channelId: number = Number.parseInt(this.props.context.request.query!.channelId, 10);\n const channelReferenceId: string = this.props.context.request.query!.channelReferenceId;\n const packingSlipId: string = this.props.context.request.query!.packingSlipId;\n\n const additionalInformationToSubmit: { formKey: string; value: string }[] | undefined = additionalInformationList?.map(\n additionalInformationKeyValuePair => {\n return {\n formKey: additionalInformationKeyValuePair.formKey.resourceId ?? '',\n value: additionalInformationKeyValuePair.value\n };\n }\n );\n const extensionPropertyList: CommerceProperty[] = [];\n if (!ObjectExtensions.isNullOrUndefined(additionalInformationToSubmit)) {\n for (const additionalInformation of additionalInformationToSubmit) {\n extensionPropertyList.push({\n Key: additionalInformation.formKey,\n Value: {\n StringValue: additionalInformation.value\n }\n });\n }\n }\n try {\n await SalesOrdersDataActions.checkInForOrderPickupAsync(\n { callerContext: this.props.context.actionContext, queryResultSettings: {} },\n channelId,\n packingSlipId,\n channelReferenceId,\n extensionPropertyList\n );\n } catch (error) {\n this.setState({ headerErrorMessage: this.props.resources.genericErrorMessage, isCheckedIn: false });\n this.props.telemetry.error(error);\n return Promise.resolve();\n }\n this.setState({ headerErrorMessage: '', isCheckedIn: true });\n return Promise.resolve();\n };\n\n /**\n * The action performed on module initialization.\n * @returns The async result.\n */\n private readonly _onInit = async (): Promise => {\n const channelId: number = Number.parseInt(this.props.context.request.query?.channelId ?? '', 10);\n const channelReferenceId: string | undefined = this.props.context.request.query?.channelReferenceId;\n const packingSlipId: string | undefined = this.props.context.request.query?.packingSlipId;\n if (Number.isNaN(channelId) || !channelReferenceId || !packingSlipId) {\n // No error message shown in editor mode.\n if (this.props.context.request.params.isEditor) {\n return Promise.resolve();\n } else if (this.props.context.request.params.isPreview) {\n this.setState({ headerErrorMessage: this.props.resources.requiredParameterMissingErrorMessage });\n } else {\n this.setState({ headerErrorMessage: this.props.resources.genericErrorMessage });\n }\n this.props.context.telemetry.error(\n 'One or more required URL parameters are missing. ' +\n 'Please make sure you have pass in channelId, channelReferenceId and packingSlipId through URL parameter.'\n );\n return Promise.resolve();\n }\n\n const { additionalInformationKeys } = this.props.config;\n\n const hasAdditionalInformation: boolean = ArrayExtensions.hasElements(additionalInformationKeys);\n\n // Call check-in-for-pickup directly if no additional information to capture.\n if (!hasAdditionalInformation) {\n try {\n await SalesOrdersDataActions.checkInForOrderPickupAsync(\n { callerContext: this.props.context.actionContext, queryResultSettings: {} },\n channelId,\n packingSlipId,\n channelReferenceId\n );\n } catch (error) {\n this.setState({ headerErrorMessage: this.props.resources.genericErrorMessage, isCheckedIn: false });\n this.props.telemetry.error(error);\n return Promise.resolve();\n }\n this.setState({ headerErrorMessage: '', isCheckedIn: true });\n }\n return Promise.resolve();\n };\n}\n\nexport default CheckInForPickup;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { ArrayExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport { FormBuilder } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nimport { ICheckInViewProps } from './check-in-for-pickup';\n\n/**\n * The check-in view for submitting check-in, capturing additional information, and showing check-in confirmation.\n * @param props - The check-in view properties.\n * @returns The check-in view as a react component.\n */\nconst CheckInViewComponent: React.FC = (props: ICheckInViewProps) => {\n const { headerError, checkInForOrderPickup, confirmationComponent, viewState } = props;\n return (\n <>\n {viewState.isHeaderError && headerError}\n {!viewState.isHeaderError && ArrayExtensions.hasElements(props.config.additionalInformationKeys) && (\n \n )}\n {!viewState.isHeaderError &&\n !ArrayExtensions.hasElements(props.config.additionalInformationKeys) &&\n viewState.isCheckedIn &&\n confirmationComponent}\n >\n );\n};\n\nexport default CheckInViewComponent;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport * as Msdyn365 from '@msdyn365-commerce/core';\nimport { IDistributorInfo } from '@msdyn365-commerce-modules/retail-actions';\nimport React from 'react';\nimport classnames from 'classnames';\nimport { ITermsOfServiceLinkData } from '../distributor-selector.props.autogenerated';\n\nexport interface IDistributorSelectorFoundResultsMessage {\n distributorCountMessage: string;\n distributors?: IDistributorInfo[];\n}\n\nexport interface IDistributorSelectorTermsOfServiceProps {\n link?: ITermsOfServiceLinkData;\n requestContext: Msdyn365.IRequestContext;\n onTextChange?(event: Msdyn365.ContentEditableEvent): void;\n}\n\nexport interface IDistributorDoNotShowProps {\n onChange(event: React.ChangeEvent): void;\n doNotShowAgainMessage: string;\n}\n\nexport interface IDistributorButtonProps {\n onClick(event: React.MouseEvent): void;\n text: string;\n className: string;\n}\n\nexport interface IDistributorEmptyMessageProps {\n emptyLocationsText?: string;\n}\n\nexport const DistributorSelectorCountMessage: React.FC = ({\n distributors,\n distributorCountMessage\n}) => {\n if (distributors) {\n return (\n \n {distributorCountMessage.replace('{count}', distributors.length.toString())}\n
\n );\n }\n\n return null;\n};\n\nexport const DistributorSelectorTermsOfService: React.FC = ({\n link,\n requestContext,\n onTextChange\n}) => {\n if (link) {\n const editableLink: Msdyn365.ILinksData = {\n ariaLabel: link.ariaLabel,\n className: 'ms-distributor-selector__terms-link',\n linkText: link.linkText,\n linkUrl: link.linkUrl.destinationUrl,\n openInNewTab: link.openInNewTab,\n role: 'link'\n };\n\n return (\n \n \n
\n );\n }\n return null;\n};\n\nexport const DistributorSelectorWaiting: React.FC = () => {\n return ;\n};\n\nexport const DistributorSelectorDoNotShowAgain: React.FC = ({ onChange, doNotShowAgainMessage }) => {\n return (\n \n \n {doNotShowAgainMessage}\n
\n );\n};\n\nexport const DistributorSelectorButton: React.FC = ({ onClick, text, className }) => {\n return (\n \n );\n};\n\nexport const DistributorEmptyMessage: React.FC = ({ emptyLocationsText }) => (\n \n
{emptyLocationsText}
\n
\n);\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { ArrayExtensions, IDistributorInfo } from '@msdyn365-commerce-modules/retail-actions';\nimport {\n IPayLoad,\n ITelemetryContent,\n TelemetryConstant,\n getPayloadObject,\n getTelemetryAttributes\n} from '@msdyn365-commerce-modules/utilities';\nimport React from 'react';\n\n/**\n * Distributor selector line item resources.\n */\n// @ts-ignore\nexport interface IDistributorSelectorDistributorLineItemResources {\n currentDistributorText: string;\n locationHeadingText: string;\n primaryContactText: string;\n paymentTypeText: string;\n viewAllDistributorText: string;\n deliveryMethodHeadingText: string;\n}\n\n/**\n * Distributor Locator line item props.\n */\nexport interface IDistributorSelectorLineItemProps {\n mainClassName: string;\n selectDistributorText?: string;\n distributor: IDistributorInfo;\n resources: IDistributorSelectorDistributorLineItemResources;\n index: string;\n currentDistributorId: number | undefined;\n distributorDetailsToBeShown?: string[];\n shouldShowIndex?: boolean;\n /**\n * The telemetry content.\n */\n telemetryContent?: ITelemetryContent;\n handlers: {\n onSetAsCurrentDistributor(distributorId: number | undefined): void;\n onViewAllDistributorDetails(distributorId: number | undefined): void;\n };\n}\n\n/**\n * Set Preferred distributor functionality.\n * @param props -Distributor locator location items.\n * @returns Distributor locator selected location line item action.\n */\nconst onSetCurrentDistributorClickHandler = (props: IDistributorSelectorLineItemProps) => () => {\n props.handlers.onSetAsCurrentDistributor(props.distributor.OrgUnit?.RecordId);\n};\n\nconst onViewAllDistributorDetailsClickHandler = (props: IDistributorSelectorLineItemProps) => () => {\n props.handlers.onViewAllDistributorDetails(props.distributor.OrgUnit?.RecordId);\n};\n\n/**\n * Renders distributor selector line items.\n * @param props - Distributor selector line items props.\n * @returns - HTML.\n */\nconst distributorSelectorLineItem: React.FC = (props: IDistributorSelectorLineItemProps) => {\n const {\n distributor,\n resources,\n index,\n currentDistributorId,\n telemetryContent,\n shouldShowIndex,\n selectDistributorText,\n distributorDetailsToBeShown,\n mainClassName\n } = props;\n\n const distributorName: string | undefined = distributor.OrgUnit?.OrgUnitName;\n const isCurrentDistributor = currentDistributorId === distributor.OrgUnit?.RecordId;\n const payLoad: IPayLoad = getPayloadObject('click', telemetryContent!, TelemetryConstant.CurrentDistributor);\n const currentDistributorAttributes = getTelemetryAttributes(telemetryContent!, payLoad);\n const distributorAddress = distributor.OrgUnit?.OrgUnitAddress?.FullAddress;\n const distributorPhoneNo = distributor.OrgUnit?.OrgUnitAddress?.Phone;\n const deliveryMethods = distributor?.OrgUnitDeliveryOptions?.DeliveryOptions;\n\n return (\n \n {isCurrentDistributor ? (\n
\n
{resources.currentDistributorText}
\n
\n ) : null}\n
\n {shouldShowIndex && {index}}\n {distributorName}\n
\n
\n {distributorDetailsToBeShown && distributorDetailsToBeShown.indexOf('location') > -1 ? (\n
\n
{resources.locationHeadingText}\n {distributorAddress && (\n
\n \n {distributorAddress}\n
\n )}\n
\n ) : null}\n {distributorDetailsToBeShown && distributorDetailsToBeShown.indexOf('primaryContact') > -1 ? (\n
\n
{resources.primaryContactText}\n {distributorPhoneNo && (\n
\n \n {distributorPhoneNo}\n
\n )}\n
\n ) : null}\n {distributorDetailsToBeShown && distributorDetailsToBeShown.indexOf('deliveryMethod') > -1 ? (\n
\n
{resources.deliveryMethodHeadingText}\n {ArrayExtensions.hasElements(deliveryMethods) && (\n
\n <>\n {deliveryMethods?.map(deliveryMethod => {\n return (\n \n {deliveryMethod.Description}\n \n );\n })}\n >\n
\n )}\n
\n ) : null}\n
\n {resources.viewAllDistributorText}\n \n {!isCurrentDistributor ? (\n
\n ) : null}\n
\n
\n );\n};\n\n/**\n * Distributor line item component.\n */\nexport const DistributorSelectorLineItemComponent = distributorSelectorLineItem as (\n props: IDistributorSelectorLineItemProps\n) => JSX.Element;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { ArrayExtensions, IDistributorInfo } from '@msdyn365-commerce-modules/retail-actions';\nimport { ITelemetryContent } from '@msdyn365-commerce-modules/utilities';\nimport { OrgUnit } from '@msdyn365-commerce/retail-proxy';\nimport React from 'react';\nimport { observable, reaction } from 'mobx';\nimport classnames from 'classnames';\nimport { IDistributorSelectorResources } from '../distributor-selector.props.autogenerated';\nimport { DistributorSelectorLineItemComponent } from './distributor-selector-line-item.components';\n\n/**\n * Distributor selector lines props interface.\n */\nexport interface IDistributorSelectorLinesProps {\n mainClassName: string;\n distributors?: IDistributorInfo[];\n resources: IDistributorSelectorResources;\n selectedDistributorId?: number;\n shouldDisplayList?: boolean;\n isLocationDisabled?: boolean;\n currentDistributorId: number | undefined;\n shouldShowIndex: boolean;\n distributorDetailsToBeShown?: string[];\n selectDistributorText?: string;\n /**\n * The telemetry content.\n */\n telemetryContent?: ITelemetryContent;\n onDistributorSelected(distributor: OrgUnit | undefined): void;\n onSetAsCurrentDistributor: (distributorId: number | undefined) => void;\n onViewAllDistributorDetails: (distributorId: number | undefined) => void;\n}\n\nexport class DistributorSelectorLines extends React.PureComponent {\n private readonly selectedDistributorRef: React.RefObject;\n private distributorCounter: number;\n @observable private shouldDisplayList: boolean | undefined;\n\n public constructor(props: IDistributorSelectorLinesProps) {\n super(props);\n this.selectedDistributorRef = React.createRef();\n this.distributorCounter = 0;\n this.shouldDisplayList = this.props.shouldDisplayList;\n }\n\n public componentDidMount(): void {\n reaction(\n () => this.shouldDisplayList,\n () => {\n setTimeout(() => {\n this._scrollIntoView();\n }, 0);\n }\n );\n }\n\n public componentDidUpdate(previousProps: IDistributorSelectorLinesProps): void {\n if (this.props.selectedDistributorId !== previousProps.selectedDistributorId) {\n this._scrollIntoView();\n }\n }\n\n public render(): JSX.Element | null {\n const { distributors, mainClassName } = this.props;\n this.shouldDisplayList = this.props.shouldDisplayList;\n\n if (!ArrayExtensions.hasElements(distributors)) {\n return null;\n }\n\n this.distributorCounter = 0;\n\n return (\n \n {distributors.map((distributor, index) => {\n return this._renderDistributor(distributor, index);\n })}\n
\n );\n }\n\n /**\n * On click Handler function.\n * @param orgUnit -OrgUnit distributor.\n * @returns Click action on orgUnit Distributor.\n */\n private readonly onDistributorSelected = (orgUnit: OrgUnit | undefined) => () => {\n this.props.onDistributorSelected(orgUnit);\n };\n\n private _renderDistributor(distributor: IDistributorInfo, index: number): JSX.Element | undefined {\n const {\n distributors,\n mainClassName,\n currentDistributorId,\n resources,\n telemetryContent,\n distributorDetailsToBeShown,\n selectDistributorText,\n shouldShowIndex,\n onSetAsCurrentDistributor,\n onViewAllDistributorDetails\n } = this.props;\n const selectedDistributorId = this.props.selectedDistributorId;\n const defaultAriaSetsize = 0;\n const orgUnit = distributor?.OrgUnit;\n if (distributor) {\n ++this.distributorCounter;\n return (\n \n \n
\n );\n }\n return undefined;\n }\n\n /**\n * Scroll into view.\n */\n private readonly _scrollIntoView = () => {\n const selectedDistributorDiv = this.selectedDistributorRef.current;\n // In devices with a screen width of less than 768px, we display a toggle button that allows users to switch between the distributor list and the map.\n // The distributor list is initially shown in the list view, followed by the map. Each view has its own scrolling behavior, and they are contained within separate parent wrapper div's.\n const parent = this.props.shouldDisplayList\n ? selectedDistributorDiv?.parentElement?.parentElement\n : selectedDistributorDiv?.parentElement;\n if (selectedDistributorDiv && parent) {\n if (this.props.shouldDisplayList) {\n if (parent.scrollTop > selectedDistributorDiv.offsetTop) {\n parent.scrollTop = selectedDistributorDiv.offsetTop - 10;\n } else if (\n selectedDistributorDiv.offsetTop + selectedDistributorDiv.clientHeight >\n parent.scrollTop + parent.clientHeight\n ) {\n parent.scrollTop = selectedDistributorDiv.offsetTop + selectedDistributorDiv.clientHeight - parent.clientHeight - 10;\n }\n } else {\n if (parent.scrollLeft > selectedDistributorDiv.offsetLeft) {\n parent.scrollLeft = selectedDistributorDiv.offsetLeft;\n } else if (\n selectedDistributorDiv.offsetLeft + selectedDistributorDiv.clientHeight >\n parent.scrollLeft + parent.clientHeight\n ) {\n parent.scrollLeft = selectedDistributorDiv.offsetLeft + selectedDistributorDiv.clientHeight - parent.clientHeight - 10;\n }\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 { TenderType } from '@msdyn365-commerce/retail-proxy';\nimport * as React from 'react';\n\n/**\n * Distributor Payment type list interface.\n */\nexport interface IDistributorPaymentTypesListProps {\n mainClassName: string;\n paymentTypesMenuText?: string;\n paymentTypesList?: TenderType[];\n defaultOptionText?: string;\n onChange(paymentType: string): Promise;\n}\n\n/**\n * Distributor Payment types state interface.\n */\nexport interface IDistributorPaymentTypeListState {\n isFilterExpanded: boolean;\n selectedPaymentTypes?: string;\n}\n\n/**\n * Distributor payment option list Filter\n */\nexport class DistributorPaymentOptionList extends React.PureComponent {\n private readonly _distributorPaymentTypesMenu: React.RefObject;\n\n public constructor(props: IDistributorPaymentTypesListProps) {\n super(props);\n this._distributorPaymentTypesMenu = React.createRef();\n this.state = {\n isFilterExpanded: false,\n selectedPaymentTypes: ''\n };\n }\n\n public render(): JSX.Element {\n const { mainClassName, paymentTypesMenuText, paymentTypesList, defaultOptionText } = this.props;\n const selectedPaymentTypesDesc = defaultOptionText\n ? defaultOptionText\n : paymentTypesList?.find((payment: TenderType) => payment.TenderTypeId === this.state.selectedPaymentTypes)?.Name;\n const role = 'menu';\n return (\n \n
\n {this.state.isFilterExpanded ? (\n
\n {paymentTypesList?.map((tenderType: TenderType) => {\n return (\n - \n \n {tenderType.Name}\n \n
\n );\n })}\n
\n ) : null}\n
\n );\n }\n\n /**\n * Method to call when drop down get selected.\n */\n private readonly _renderTenderTypes = () => {\n const isExpandOptionsState = this.state.isFilterExpanded;\n this.setState({\n isFilterExpanded: !isExpandOptionsState\n });\n };\n\n private readonly handleFilterSelection = async (event: React.SyntheticEvent): Promise => {\n event.preventDefault();\n const paymentCode = event.currentTarget.getAttribute('data-value');\n if (paymentCode !== null) {\n this.setState({\n selectedPaymentTypes: paymentCode\n });\n\n this._renderTenderTypes();\n await this.props.onChange(paymentCode);\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 * as Msdyn365 from '@msdyn365-commerce/core';\nimport {\n IPayLoad,\n ITelemetryContent,\n TelemetryConstant,\n getPayloadObject,\n getTelemetryAttributes\n} from '@msdyn365-commerce-modules/utilities';\nimport React from 'react';\nimport { TenderType } from '@msdyn365-commerce/retail-proxy';\nimport { DistributorPaymentOptionList } from './distributor-payment-option-list';\n\n/**\n * Distributor Selector Search Form Props interface.\n */\nexport interface IDistributorSelectorSearchFormProps {\n mainClassName: string;\n shouldDisplayList?: boolean;\n telemetryContent?: ITelemetryContent;\n viewMapText: string;\n viewListText: string;\n paymentFilterMenuHeading: string;\n paymentFilterByHeading: string;\n showLocatorView?: boolean;\n showPaymentTypeFilter?: boolean;\n paymentTypes?: TenderType[];\n filteredPaymentType?: string;\n onPaymentFilterSelected(tenderTypeId: string): void;\n onToggleListMapViewState(): void;\n}\n\n/**\n * Simple search form consisting of search text and a search button.\n */\nexport class DistributorSelectorSearchForm extends React.PureComponent {\n private readonly toggleMapViewAttributes: Msdyn365.IDictionary | undefined;\n\n public constructor(props: IDistributorSelectorSearchFormProps) {\n super(props);\n const payLoad: IPayLoad = getPayloadObject('click', props.telemetryContent!, TelemetryConstant.ToggleMapView);\n this.toggleMapViewAttributes = getTelemetryAttributes(props.telemetryContent!, payLoad);\n }\n\n public render(): JSX.Element {\n const {\n mainClassName,\n shouldDisplayList,\n viewMapText,\n viewListText,\n showLocatorView,\n paymentTypes,\n paymentFilterMenuHeading,\n paymentFilterByHeading,\n showPaymentTypeFilter,\n onToggleListMapViewState\n } = this.props;\n const toggleButtonText = shouldDisplayList ? viewMapText : viewListText;\n const toggleButtonClass = shouldDisplayList ? 'view-map' : 'list-view';\n\n return (\n \n
\n {showLocatorView && (\n \n )}\n {showPaymentTypeFilter &&\n this.renderPaymentTypeList(this.props, paymentTypes, paymentFilterMenuHeading, paymentFilterByHeading)}\n
\n
\n );\n }\n\n /**\n * Method called on payment filter change.\n * @returns - Void.\n */\n private readonly _onChangeHandler = () => async (tenderTypeId: string): Promise => {\n this.props.onPaymentFilterSelected(tenderTypeId);\n return Promise.resolve();\n };\n\n private readonly renderPaymentTypeList = (\n props: IDistributorSelectorSearchFormProps,\n paymentTypesOptions: TenderType[] | undefined,\n paymentFilterMenuHeading: string | undefined,\n paymentFilterByHeading: string | undefined\n ): JSX.Element | null => {\n return (\n <>\n {paymentFilterByHeading}
\n \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 * as React from 'react';\nimport * as Msdyn365 from '@msdyn365-commerce/core';\nimport classname from 'classnames';\nimport { reaction } from 'mobx';\nimport { observer } from 'mobx-react';\nimport {\n getPayloadObject,\n getTelemetryAttributes,\n getTelemetryObject,\n IModuleProps,\n INodeProps,\n IPayLoad,\n isMobile,\n ITelemetryContent,\n Modal,\n ModalBody,\n ModalFooter,\n ModalHeader,\n NodeTag,\n TelemetryConstant,\n VariantType\n} from '@msdyn365-commerce-modules/utilities';\nimport { ArrayExtensions, IDistributorInfo } from '@msdyn365-commerce-modules/retail-actions';\nimport { OrgUnit, TenderType } from '@msdyn365-commerce/retail-proxy';\nimport { IDistributorSelectorData } from './distributor-selector.data';\nimport { IDistributorSelectorProps } from './distributor-selector.props.autogenerated';\nimport {\n DistributorSelectorButton,\n DistributorSelectorDoNotShowAgain,\n DistributorSelectorCountMessage,\n DistributorSelectorTermsOfService,\n DistributorSelectorWaiting,\n DistributorEmptyMessage\n} from './components/distributor-selector-small-components';\nimport { DistributorSelectorLines } from './components/distributor-selector-lines';\nimport { DistributorSelectorSearchForm } from './components/distributor-selector-search-form';\n\n/**\n * Distributor State Interface.\n */\nexport interface IDistributorState {\n isSearchInProgress: boolean;\n searchTerm?: string;\n isLocationDisabled?: boolean;\n showDistributorDetails?: boolean;\n showWarningDialog?: boolean;\n warningDialogState?: boolean;\n currentSelectedDistributor?: IDistributorInfo;\n distributorId: number | undefined;\n distributorDetailsFromPopup: boolean;\n filteredPaymentTypeId: string;\n}\n\nexport interface ICurrentDistributor {\n DistributorName?: string;\n DistributorId?: number;\n}\n\n/**\n * Distributor View Props Interface.\n */\nexport interface IDistributorSelectorViewProps extends IDistributorSelectorProps {\n state: IDistributorState;\n\n // Current distributor button props\n currentDistributorContainer?: IModuleProps;\n currentDistributorButton: React.ReactNode;\n\n // Containers:\n moduleProps: IModuleProps;\n bodyContainerProps: INodeProps;\n footerContainerProps: INodeProps;\n headerContainerProps: INodeProps;\n\n // Distributor warning Props\n distributorWarningHeaderProps?: React.ReactNode;\n distributorWarningContentHeadingProps?: React.ReactNode;\n distributorWarningContent?: React.ReactNode;\n distributorWarningDoNotShowAgain?: React.ReactNode;\n distributorWarningContinue?: React.ReactNode;\n distributorWarningCancel?: React.ReactNode;\n distributorWarningButtonWrapper: INodeProps;\n\n // Distributor selector Props\n distributorSelectorHeaderProps?: React.ReactNode;\n // Components\n distributorCountMessage?: React.ReactNode;\n searchForm?: React.ReactNode;\n spinner?: React.ReactNode;\n noDistributorsMessage?: React.ReactNode;\n mapContainerProps?: INodeProps;\n maps?: React.ReactNode;\n isMobileView?: boolean;\n distributorDetailsModal?: INodeProps;\n bodyWrapperProps?: INodeProps;\n distributorsResultContainerProps: INodeProps;\n distributorsResultWrapperProps: INodeProps;\n distributorLinesViewProps?: React.ReactNode;\n terms?: React.ReactNode;\n\n // distributor details modal popup\n showDistributorDetailsPopup: boolean;\n distributorDetailsModalPopup: IModuleProps;\n distributorDetailsModalHeader: INodeProps;\n distributorDetailsHeaderProps: React.ReactNode;\n distributorDetailsModalBody: INodeProps;\n distributorDetailsModalBodyContainer: INodeProps;\n\n distributorDetailsLocation: React.ReactNode;\n distributorDetailsPrimaryContact: React.ReactNode;\n distributorDetailsDeliveryMethods: React.ReactNode;\n distributorDetailsViewAllDetails: React.ReactNode;\n distributorDetailsModalFooter: INodeProps;\n distributorDetailsChangeDistributor: React.ReactNode;\n\n // distributor details slider\n distributorDetailsSliderWrapper: INodeProps;\n distributorDetailsSliderHeaderContainer: INodeProps;\n distributorDetailsSliderFooterContainer: INodeProps;\n distributorDetailsSliderBodyContainer: INodeProps;\n distributorDetailsSliderDistributorName: React.ReactNode;\n distributorDetailsSliderHeaderContent: React.ReactNode;\n distributorDetailsSliderInformationWrapper: INodeProps;\n distributorDetailsSliderCurrentDistributorTitle: React.ReactNode;\n distributorDetailsSliderSelectDistributor: React.ReactNode;\n}\n\n/**\n * ILocationHours Interface.\n */\nexport interface ILocationHours {\n openFrom?: string;\n openTo?: string;\n}\n\n/**\n *\n * DistributorSelector component\n * @extends {React.Component>}\n */\n@observer\nclass DistributorSelector extends React.Component, IDistributorState> {\n private readonly telemetryContent: ITelemetryContent;\n private mainClass = 'ms-distributor-selector';\n private headerClass = 'ms-header__current-distributor';\n private readonly currentDistributorBtnRef: React.RefObject = React.createRef();\n private currentDistributor?: ICurrentDistributor;\n\n public constructor(props: IDistributorSelectorProps) {\n super(props);\n this.state = {\n isSearchInProgress: true,\n searchTerm: '',\n showWarningDialog: false,\n showDistributorDetails: false,\n distributorId: undefined,\n distributorDetailsFromPopup: false,\n filteredPaymentTypeId: ''\n };\n this.telemetryContent = getTelemetryObject(\n this.props.context.request.telemetryPageName!,\n this.props.friendlyName,\n this.props.telemetry\n );\n this.currentDistributor = this.getCurrentDistributor();\n }\n\n public async componentDidMount(): Promise {\n const {\n context: {\n actionContext: {\n requestContext: { channel }\n },\n request: { user }\n }\n } = this.props;\n\n if (this.props.data.distributorSelectorStateManager.result) {\n await this._getAndUpdateDistributorList();\n this.checkUserStateAndOpenDialog(user);\n }\n\n reaction(\n () => this.props.data.distributorSelectorStateManager.result,\n async () => {\n await this._getAndUpdateDistributorList();\n this.checkUserStateAndOpenDialog(user);\n }\n );\n\n reaction(\n () => this.props.data.distributorSelectorStateManager.result?.loadMapApi,\n () => {\n this.props.data.distributorSelectorStateManager.result?.loadMapApi({\n key: channel?.BingMapsEnabled ? channel.BingMapsApiKey : '',\n lang: this.props.context.actionContext.requestContext.locale,\n market: this.props.context.actionContext.requestContext.channel?.ChannelCountryRegionISOCode\n });\n }\n );\n }\n\n public render(): JSX.Element | null {\n const {\n config: {\n className,\n distributorSelectorHeading,\n distributorWarningDialogHeading,\n distributorWarningContent,\n termsOfServiceLink,\n distributorDetailsToBeShown,\n selectDistributorText,\n doNotShowAgainCheckbox,\n noDistributorFoundText\n },\n data: {\n distributorSelectorStateManager: { result: distributorSelectorStateManager }\n },\n context: {\n request: { user }\n },\n slots: { maps: mapSlot },\n resources\n } = this.props;\n const { showWarningDialog } = this.state;\n const currentDistributorId = this.currentDistributor?.DistributorId;\n const currentDistributorName = this.currentDistributor?.DistributorName;\n const headerText = currentDistributorName ? currentDistributorName : resources.headerCurrentDistributorText;\n\n let distributorInfoList = distributorSelectorStateManager?.distributorList;\n const paymentTypes = this.getUniquePaymentTypes(distributorInfoList);\n\n const hasMapSlot = ArrayExtensions.hasElements(mapSlot);\n const isMobileDevice = isMobile({ variant: VariantType.Viewport, context: this.props.context.request }) === 'xs';\n const selectedDistributorId = distributorSelectorStateManager?.selectedDistributorId;\n\n const distributorDetails = this.state.showDistributorDetails\n ? this.getDistributorDetails(this.state.distributorId)\n : this.getDistributorDetails(currentDistributorId);\n const isCurrentDistributorSelected = this.state.distributorId === currentDistributorId;\n const shouldOpenDistributorSelectorDialog = !!distributorSelectorStateManager?.isDistributorSelectorDialogOpen;\n const shouldOpenDistributorDetailPopup = !!(distributorSelectorStateManager?.isDistributorDetailPopupOpen && distributorDetails);\n const shouldDisplayList = distributorSelectorStateManager?.listMapViewState?.displayList;\n if (this.state.filteredPaymentTypeId && distributorInfoList) {\n distributorInfoList = this.filterDistributorsByPaymentTypes(distributorInfoList, this.state.filteredPaymentTypeId);\n }\n const sortedDistributorList = distributorInfoList ? this._sortDistributor(distributorInfoList, currentDistributorId) : [];\n\n const canShowLocationView =\n (distributorSelectorStateManager?.distributorSelectorContext?.showMapViewLink === undefined ||\n distributorSelectorStateManager.distributorSelectorContext.showMapViewLink) &&\n distributorSelectorStateManager?.isMapModuleLoaded &&\n hasMapSlot;\n\n const showDistributorDetailsOnMap = distributorSelectorStateManager?.showDistributorDetailsOnMap;\n\n // @ts-ignore\n const viewProps: IDistributorSelectorViewProps = {\n ...(this.props as IDistributorSelectorProps),\n state: this.state,\n maps: hasMapSlot ? mapSlot[0] : undefined,\n showDistributorDetailsPopup: shouldOpenDistributorDetailPopup,\n currentDistributorContainer: this.shouldShowDistributors(user)\n ? {\n tag: 'div' as NodeTag,\n moduleProps: this.props,\n className: `${this.headerClass}-container`\n }\n : undefined,\n currentDistributorButton: (\n \n ),\n moduleProps: {\n tag: Modal,\n moduleProps: this.props,\n className: classname(hasMapSlot ? `${this.mainClass} maps` : `${this.mainClass}`, className),\n autoFocus: true,\n fade: true,\n isOpen: shouldOpenDistributorSelectorDialog,\n 'aria-label': showWarningDialog ? distributorWarningDialogHeading : distributorSelectorHeading,\n onClosed: this._closeDistributorSelectorDialog,\n horizontalPosition: 'center',\n verticalPosition: 'center',\n toggle:\n currentDistributorId || !ArrayExtensions.hasElements(distributorInfoList)\n ? this._closeDistributorSelectorDialog\n : undefined\n },\n isMobileView: isMobileDevice,\n headerContainerProps: {\n tag: ModalHeader,\n className: `${this.mainClass}-modal-header`,\n toggle:\n currentDistributorId || !ArrayExtensions.hasElements(distributorInfoList)\n ? this._closeDistributorSelectorDialog\n : undefined\n },\n distributorSelectorHeaderProps: distributorSelectorHeading && (\n \n ),\n distributorWarningHeaderProps: distributorWarningDialogHeading && (\n \n ),\n distributorWarningContent: distributorWarningContent && (\n \n ),\n footerContainerProps: {\n tag: ModalFooter,\n className: classname(`${this.mainClass}__modal-footer`, this.state.showWarningDialog ? 'distributor-warning-footer' : '')\n },\n bodyContainerProps: {\n tag: ModalBody,\n className: classname(`${this.mainClass}__modal-body`, this.state.showWarningDialog ? 'distributor-warning' : '')\n },\n bodyWrapperProps: {\n tag: 'div' as NodeTag,\n className: `${this.mainClass}__body_wrapper`\n },\n distributorsResultContainerProps: {\n tag: 'div' as NodeTag,\n className: classname(`${this.mainClass}__distributor_container`, shouldDisplayList ? 'show' : 'hide')\n },\n distributorsResultWrapperProps: {\n tag: 'div' as NodeTag,\n className: classname(`${this.mainClass}__distributors_wrapper`, !showDistributorDetailsOnMap ? 'hide' : '')\n },\n mapContainerProps: hasMapSlot\n ? {\n tag: 'div' as NodeTag,\n className: classname(`${this.mainClass}__map_container`, !shouldDisplayList ? 'show' : 'hide')\n }\n : undefined,\n distributorCountMessage: (\n \n ),\n searchForm: (\n \n ),\n spinner: ,\n distributorLinesViewProps: ArrayExtensions.hasElements(distributorInfoList) ? (\n \n ) : (\n undefined\n ),\n noDistributorsMessage: ,\n terms: (\n \n ),\n distributorWarningButtonWrapper: {\n tag: 'div' as NodeTag,\n className: `${this.mainClass}__footer-button-wrapper`\n },\n distributorWarningDoNotShowAgain: doNotShowAgainCheckbox && (\n \n ),\n distributorWarningContinue: (\n \n ),\n distributorWarningCancel: (\n \n ),\n ...this.renderDistributorDetailsViewProps(distributorDetails),\n ...this.renderDistributorSliderViewProps(distributorDetails, isCurrentDistributorSelected)\n };\n return this.props.renderView(viewProps);\n }\n\n public toggleListMapViewState = async (): Promise => {\n const {\n data: {\n distributorSelectorStateManager: { result: distributorSelectorStateManager }\n }\n } = this.props;\n await distributorSelectorStateManager?.toggleListMapViewState();\n };\n\n /**\n * Method to be called on the click on don't show again checkbox.\n */\n public onChangeForDoNotShow = (event: React.ChangeEvent): void => {\n this.setState({ warningDialogState: event.target.checked });\n };\n\n public onSelectDistributor = async (): Promise => {\n if (this.state.distributorId) {\n await this._setCurrentDistributor(this.state.distributorId);\n }\n };\n\n public onChangeDistributorClick = async (): Promise => {\n const {\n data: {\n distributorSelectorStateManager: { result: distributorSelectorStateManager }\n }\n } = this.props;\n if (distributorSelectorStateManager) {\n // Set selected distributor id\n await distributorSelectorStateManager.setSelectedDistributorId(undefined);\n\n if (distributorSelectorStateManager.isDistributorDetailPopupOpen) {\n // close the detail popup\n await distributorSelectorStateManager.closeDistributorDetailPopup();\n }\n\n if (distributorSelectorStateManager.isDistributorSelectorDialogOpen) {\n this.setState({ distributorId: undefined, showDistributorDetails: false, distributorDetailsFromPopup: false });\n } else {\n // Open the distributor selector modal\n await distributorSelectorStateManager.openDistributorSelectorDialog({\n parentElementRef: this.currentDistributorBtnRef\n });\n }\n }\n };\n\n public onDistributorCloseButtonClick = async () => {\n const {\n data: {\n distributorSelectorStateManager: { result: distributorSelectorStateManager }\n }\n } = this.props;\n if (distributorSelectorStateManager) {\n await distributorSelectorStateManager.closeDistributorDetailPopup();\n }\n };\n\n /**\n * Method to be called on the click on the continue button.\n */\n public continueButtonClick = async (): Promise => {\n const {\n context: {\n actionContext: {\n requestContext: { cookies }\n }\n },\n data: {\n distributorSelectorStateManager: { result: distributorSelectorStateManager }\n }\n } = this.props;\n\n const currentDistributor = this.state.currentSelectedDistributor;\n\n if (this.state.warningDialogState) {\n distributorSelectorStateManager?.hideWarningMessage(cookies.isConsentGiven());\n }\n\n await this._closeDistributorSelectorDialog();\n this.redirectToDistributorURL(currentDistributor);\n };\n\n /**\n * Method to be called on click on the cancel button.\n */\n public cancelButtonClick = async (): Promise => {\n await this._closeDistributorSelectorDialog();\n this.setState({ warningDialogState: false, showWarningDialog: false, currentSelectedDistributor: undefined });\n };\n\n public backToSearchClick = async (): Promise => {\n const {\n data: {\n distributorSelectorStateManager: { result: distributorSelectorStateManager }\n }\n } = this.props;\n this.setState({ showDistributorDetails: false, distributorId: undefined });\n await distributorSelectorStateManager?.setSelectedDistributorId(undefined);\n };\n\n public onViewAllDistributorDetailsFromPopup = async (): Promise => {\n const {\n data: {\n distributorSelectorStateManager: { result: distributorSelectorStateManager }\n }\n } = this.props;\n\n if (distributorSelectorStateManager) {\n if (!this.currentDistributor?.DistributorId) {\n return;\n }\n\n // close the detail popup\n await distributorSelectorStateManager.closeDistributorDetailPopup();\n\n // Open the distributor selector modal\n await distributorSelectorStateManager.openDistributorSelectorDialog({\n parentElementRef: this.currentDistributorBtnRef\n });\n\n // Set selected distributor id\n await distributorSelectorStateManager.setSelectedDistributorId(this.currentDistributor?.DistributorId);\n\n this.setState({\n distributorId: this.currentDistributor?.DistributorId,\n showDistributorDetails: true,\n distributorDetailsFromPopup: true\n });\n }\n };\n\n public onViewAllDistributorDetails = async (distributorId: number | undefined): Promise => {\n if (!distributorId) {\n return;\n }\n this.setState({ distributorId: distributorId, showDistributorDetails: true });\n };\n\n private getCurrentDistributor = (): ICurrentDistributor | undefined => {\n const {\n context: {\n request: {\n url: { requestUrl },\n user\n }\n }\n } = this.props;\n\n // We show the distributor selector module when the user is signed-in.\n if (user.isAuthenticated) {\n const distributorList = this.props.data.distributorList?.result;\n\n const currentDistributor = distributorList?.find(distributor =>\n distributor.MarketSettings?.localeItems.some(\n locale => requestUrl.href.toLowerCase().indexOf(locale.localeBaseUrl.toLowerCase()) >= 0\n )\n );\n\n if (currentDistributor) {\n return {\n DistributorId: currentDistributor.OrgUnit?.RecordId,\n DistributorName: currentDistributor.OrgUnit?.OrgUnitName\n };\n } else {\n return undefined;\n }\n }\n return undefined;\n };\n\n private getUniquePaymentTypes = (distributors?: IDistributorInfo[]) => {\n const uniquePaymentTypes = new Set();\n distributors?.forEach(distributor => {\n distributor.PaymentTypes?.forEach(paymentType => {\n uniquePaymentTypes.add(paymentType);\n });\n });\n return [...uniquePaymentTypes];\n };\n\n /**\n * The method to be called for filtering store locations based on the user's selected filters.\n * @param distributors - Distributors List.\n * @param filteredPaymentTypeId - Filter selected by the user.\n * @returns -Filtered distributors.\n */\n private readonly filterDistributorsByPaymentTypes = (distributors: IDistributorInfo[], filteredPaymentTypeId: string) => {\n return distributors.filter(distributor => {\n return distributor?.PaymentTypes?.some(paymentType => {\n return paymentType.TenderTypeId === filteredPaymentTypeId;\n });\n });\n };\n\n /**\n * Redirect user to the distributor selector site.\n * @param currentDistributor - Current distributor details\n */\n private redirectToDistributorURL = (currentDistributor: IDistributorInfo | undefined) => {\n const { telemetry } = this.props;\n const marketSettings = currentDistributor?.MarketSettings;\n\n // Check if the current locale is present.\n const currentLocale = marketSettings?.localeItems.find(localeItem => localeItem.locale === this.props.context.request.locale);\n let distributorURL = '';\n if (currentLocale) {\n distributorURL = currentLocale.localeBaseUrl;\n } else {\n // Check if the default locale is set.\n let defaultLocale = marketSettings?.localeItems.find(localeItem => localeItem.isDefaultLocale);\n if (!defaultLocale) {\n defaultLocale = ArrayExtensions.hasElements(marketSettings?.localeItems) ? marketSettings?.localeItems[0] : undefined;\n } else {\n distributorURL = defaultLocale.localeBaseUrl;\n }\n }\n\n if (distributorURL) {\n if (!distributorURL.startsWith('https://')) {\n distributorURL = `https://${distributorURL}`;\n }\n window.location.href = distributorURL;\n } else if (telemetry) {\n telemetry.debug('redirectToDistributorURL: Distributor URL is empty');\n }\n };\n\n /**\n * Handle click on the distributor selector.\n * @returns : Promise void.\n */\n private handleDistributorSelectorClick = async () => {\n const distributorSelectorStateManager = this.props.data.distributorSelectorStateManager?.result;\n\n if (this.currentDistributor?.DistributorId) {\n if (distributorSelectorStateManager?.isDistributorDetailPopupOpen) {\n distributorSelectorStateManager?.closeDistributorDetailPopup();\n } else {\n await distributorSelectorStateManager?.openDistributorDetailPopup({\n parentElementRef: this.currentDistributorBtnRef\n });\n }\n return;\n }\n };\n\n /**\n * Filter distributors by payment types.\n * @param tenderTypeId -Delivery Code.\n */\n private readonly onFilteredPaymentType = (tenderTypeId: string) => {\n this.setState({ filteredPaymentTypeId: tenderTypeId });\n };\n\n /**\n * Creates the distributor details view props.\n * @param distributorDetails: Distributor details\n * @returns : View props for the distributor details.\n */\n private renderDistributorDetailsViewProps = (distributorDetails: IDistributorInfo | undefined) => {\n const {\n config: { switchDistributorText, distributorDetailsToBeShown },\n resources\n } = this.props;\n const distributorAddress = distributorDetails?.OrgUnit?.OrgUnitAddress?.FullAddress;\n const distributorPhoneNo = distributorDetails?.OrgUnit?.OrgUnitAddress?.Phone;\n const deliveryMethods = distributorDetails?.OrgUnitDeliveryOptions?.DeliveryOptions;\n\n const distributorDetailsViewProps = {\n distributorDetailsModalPopup: {\n tag: 'div',\n moduleProps: this.props,\n className: classname(`${this.mainClass}__details_dialog`)\n },\n distributorDetailsModalHeader: {\n tag: 'div',\n className: `${this.mainClass}__dialog__header`\n },\n distributorDetailsHeaderProps: (\n <>\n {distributorDetails?.OrgUnit?.OrgUnitName || ''}\n \n >\n ),\n distributorDetailsModalBody: {\n tag: 'div',\n className: `${this.mainClass}__dialog__body`\n },\n distributorDetailsModalBodyContainer: {\n tag: 'div',\n className: `${this.mainClass}__dialog__container`\n },\n distributorDetailsLocation: (this.state.showDistributorDetails ||\n (distributorDetailsToBeShown && distributorDetailsToBeShown.indexOf('location') > -1)) && (\n \n
{resources.locationHeadingText}\n {distributorAddress && (\n
\n \n {distributorAddress}\n
\n )}\n
\n ),\n distributorDetailsPrimaryContact: (this.state.showDistributorDetails ||\n (distributorDetailsToBeShown && distributorDetailsToBeShown?.indexOf('primaryContact') > -1)) && (\n \n
{resources.primaryContactText}\n {distributorPhoneNo && (\n
\n \n {distributorPhoneNo}\n
\n )}\n
\n ),\n distributorDetailsDeliveryMethods: (this.state.showDistributorDetails ||\n (distributorDetailsToBeShown && distributorDetailsToBeShown.indexOf('deliveryMethod') > -1)) && (\n \n
{resources.deliveryMethodHeadingText}\n {ArrayExtensions.hasElements(deliveryMethods) && (\n
\n <>\n {deliveryMethods?.map(deliveryMethod => {\n return (\n \n {deliveryMethod.Description}\n \n );\n })}\n >\n
\n )}\n
\n ),\n distributorDetailsViewAllDetails: (\n \n {resources.viewAllDistributorText}\n \n ),\n distributorDetailsChangeDistributor: (\n \n ),\n distributorDetailsModalFooter: {\n tag: 'div',\n className: `${this.mainClass}__dialog__footer`\n },\n distributorDetailsSliderWrapper: {\n tag: 'div',\n className: classname(\n `${this.mainClass}__details-slider-wrapper`,\n this.state.showDistributorDetails ? 'show' : '',\n this.state.distributorDetailsFromPopup ? 'no-header' : ''\n )\n }\n };\n return distributorDetailsViewProps;\n };\n\n private renderDistributorSliderViewProps = (\n distributorDetails: IDistributorInfo | undefined,\n isCurrentDistributorSelected: boolean\n ) => {\n const {\n resources,\n config: { selectDistributorText }\n } = this.props;\n const payLoad: IPayLoad = getPayloadObject('click', this.telemetryContent, TelemetryConstant.CurrentDistributor);\n const currentDistributorAttributes = getTelemetryAttributes(this.telemetryContent, payLoad);\n\n const distributorSliderViewProps = {\n distributorDetailsSliderDistributorName: (\n {distributorDetails?.OrgUnit?.OrgUnitName}
\n ),\n distributorDetailsSliderHeaderContent: (\n \n {resources.distributorSliderBackToSearch}\n \n ),\n distributorDetailsSliderHeaderContainer: {\n tag: 'div',\n className: `${this.mainClass}__details-slider-heading`\n },\n distributorDetailsSliderBodyContainer: {\n tag: 'div',\n className: `${this.mainClass}__details-slider-body`\n },\n distributorDetailsSliderFooterContainer: {\n tag: 'div',\n className: `${this.mainClass}__details-slider-footer`\n },\n distributorDetailsSliderInformationWrapper: {\n tag: 'div',\n className: `${this.mainClass}__details-slider-info-wrapper`\n },\n distributorDetailsSlidercurrentDistributorTitle: isCurrentDistributorSelected && (\n \n
{resources.currentDistributorText}
\n
\n ),\n distributorDetailsSliderSelectDistributor: !isCurrentDistributorSelected && (\n \n )\n };\n return distributorSliderViewProps;\n };\n\n /**\n * Method to be called on heading change.\n * @param event -Content Edit Event.\n */\n private handleHeadingChange = (event: Msdyn365.ContentEditableEvent): void => {\n if (this.state.showWarningDialog) {\n this.props.config.distributorWarningDialogHeading = event.target.value;\n } else {\n this.props.config.distributorSelectorHeading = event.target.value;\n }\n };\n\n /**\n * Method to be called on warning text change.\n * @param event -Content Edit Event.\n */\n private handleWarningTextChange = (event: Msdyn365.ContentEditableEvent): void => {\n this.props.config.distributorWarningContent = event.target.value;\n };\n\n /**\n * Method to be called on term of service text change.\n * @param event -Content Edit Event.\n */\n private handleLinkTextChange = (event: Msdyn365.ContentEditableEvent): void => {\n if (this.props.config.termsOfServiceLink) {\n this.props.config.termsOfServiceLink.linkText = event.target.value;\n }\n };\n\n /**\n * Method to be called on distributor text change.\n * @param event -Content Edit Event.\n */\n private handleSelectDistributorTextChange = (event: Msdyn365.ContentEditableEvent): void => {\n event.preventDefault();\n event.stopPropagation();\n if (this.props.config.selectDistributorText) {\n this.props.config.selectDistributorText = event.target.value;\n }\n };\n\n /**\n * Method to be called on link text change.\n * @param event -Content Edit Event.\n */\n private handleChangeDistributorTextChange = (event: Msdyn365.ContentEditableEvent): void => {\n event.preventDefault();\n event.stopPropagation();\n if (this.props.config.switchDistributorText) {\n this.props.config.switchDistributorText = event.target.value;\n }\n };\n\n private shouldShowDistributors = (user: Msdyn365.IRequestContextUser): boolean => {\n const isOboRequest = Msdyn365.isOboRequest(this.props.context.request);\n const isOBOAccountSelected = isOboRequest && !!this.props.context.request.cookies.getAccountSelectionCookie();\n return isOBOAccountSelected || (!isOboRequest && !!user.isSignedIn);\n };\n\n /**\n * If the user is authenticated but has no current distributor, open the distributor selector dialog.\n * @param user - IRequestContextUser\n */\n private checkUserStateAndOpenDialog = (user: Msdyn365.IRequestContextUser) => {\n if (!this.currentDistributor && this.shouldShowDistributors(user)) {\n const distributorSelectorStateManager = this.props.data.distributorSelectorStateManager.result;\n distributorSelectorStateManager?.openDistributorSelectorDialog({\n parentElementRef: this.currentDistributorBtnRef\n });\n }\n };\n\n /**\n * Get the distributor details from the distributorId\n * @param distributorId - Distributor Id\n * @returns - Returns the distributor info.\n */\n private getDistributorDetails = (distributorId: number | undefined): IDistributorInfo | undefined => {\n const {\n data: {\n distributorList: { result: distributorList }\n }\n } = this.props;\n\n return distributorList?.find(distributor => distributor.OrgUnit?.RecordId === distributorId);\n };\n\n /**\n * Method to be called updating the distributor list.\n */\n private readonly _getAndUpdateDistributorList = async (): Promise => {\n const {\n data: {\n distributorList: { result: distributorList }\n }\n } = this.props;\n\n this.setState({ isSearchInProgress: true });\n\n if (distributorList) {\n await this._updateDistributorListInStateManager(distributorList);\n }\n\n this.setState({ isSearchInProgress: false });\n };\n\n /**\n * Method to update the distributor state manager.\n * @param distributorList - distributor Info Object.\n * @returns Void promise.\n */\n private readonly _updateDistributorListInStateManager = async (distributorList: IDistributorInfo[]): Promise => {\n const {\n data: {\n distributorSelectorStateManager: { result: distributorSelectorStateManager }\n },\n telemetry\n } = this.props;\n\n if (!distributorSelectorStateManager || !distributorList) {\n return;\n }\n\n const currentDistributorId = this.currentDistributor?.DistributorId;\n const sortedDistributorList = this._sortDistributor(distributorList, currentDistributorId);\n\n // When serializing the distributor selector state manager, functions get stripped.\n if (distributorSelectorStateManager.setDistributorsList) {\n await distributorSelectorStateManager.setDistributorsList(sortedDistributorList).catch((error: Error) => {\n if (telemetry) {\n telemetry.error(error.message);\n telemetry.debug('Unable to Update distributor state');\n }\n });\n }\n };\n\n /**\n * Method will sort all distributor.\n * @param distributors - Distributor List.\n * @param currentDistributorId - Distributor Id.\n * @returns List of distributor.\n */\n private _sortDistributor(distributors: IDistributorInfo[], currentDistributorId: number | undefined): IDistributorInfo[] {\n const isCurrentDistributor = (value: IDistributorInfo) => currentDistributorId && value.OrgUnit?.RecordId === currentDistributorId;\n\n return [...distributors.filter(isCurrentDistributor), ...distributors.filter(distributor => !isCurrentDistributor(distributor))];\n }\n\n /**\n * Method to be called closing the distributor selector dialog.\n * @returns Void promise.\n */\n private readonly _closeDistributorSelectorDialog = async (): Promise => {\n const {\n data: {\n distributorSelectorStateManager: { result: distributorSelectorStateManager }\n }\n } = this.props;\n if (distributorSelectorStateManager) {\n distributorSelectorStateManager.distributorSelectorContext?.parentElementRef?.current?.focus();\n // Update the distributor map visibility to true.\n distributorSelectorStateManager.updateDistributorMapVisibility(true);\n await distributorSelectorStateManager.setSelectedDistributorId(undefined);\n await distributorSelectorStateManager.closeDistributorSelectorDialog();\n this.setState({\n searchTerm: '',\n showWarningDialog: false,\n currentSelectedDistributor: undefined,\n distributorDetailsFromPopup: false,\n showDistributorDetails: false,\n distributorId: undefined\n });\n }\n };\n\n /**\n * On Selecting distributor.\n * @param distributorId - Distributor Id.\n */\n private readonly _setSelectedDistributor = async (orgUnit: OrgUnit | undefined): Promise => {\n const {\n data: {\n distributorSelectorStateManager: { result: distributorSelectorStateManager }\n }\n } = this.props;\n\n if (!distributorSelectorStateManager || !orgUnit) {\n return;\n }\n\n await distributorSelectorStateManager.setSelectedDistributorId(orgUnit.RecordId);\n };\n\n /**\n * On Selecting Current Distributor.\n * @param distributorId - Distributor Id.\n */\n private readonly _setCurrentDistributor = async (distributorId: number | undefined): Promise => {\n if (!distributorId) {\n return;\n }\n\n const {\n data: {\n distributorSelectorStateManager: { result: distributorSelectorStateManager }\n }\n } = this.props;\n\n if (!distributorSelectorStateManager) {\n return;\n }\n const distributorList = distributorSelectorStateManager?.distributorList;\n const currentDistributor = distributorList?.find(distributor => distributor.OrgUnit?.RecordId === distributorId);\n if (distributorSelectorStateManager.hideDistributorWarning || !this.currentDistributor) {\n this.redirectToDistributorURL(currentDistributor);\n await this._closeDistributorSelectorDialog();\n } else {\n this.setState({ showWarningDialog: true, currentSelectedDistributor: currentDistributor });\n }\n };\n}\n\nexport default DistributorSelector;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport * as React from 'react';\nimport { Module, Node } from '@msdyn365-commerce-modules/utilities';\nimport { IDistributorSelectorViewProps } from './distributor-selector';\n\n/**\n * Render the body of the popup.\n * @param props -- Distributor selector view props.\n * @returns -- Returns the html.\n */\nconst renderDistributorSelectorBody: React.FC = props => {\n const {\n bodyContainerProps,\n state,\n spinner,\n distributorLinesViewProps,\n maps,\n bodyWrapperProps,\n distributorsResultContainerProps,\n distributorsResultWrapperProps,\n mapContainerProps,\n distributorCountMessage,\n searchForm,\n noDistributorsMessage\n } = props;\n\n return (\n \n \n {searchForm}\n \n {state.isSearchInProgress ? (\n spinner\n ) : (\n \n {distributorLinesViewProps ? (\n <>\n {distributorCountMessage}\n {distributorLinesViewProps}\n >\n ) : (\n <>{noDistributorsMessage}>\n )}\n \n )}\n \n {mapContainerProps ? (\n \n {maps}\n {distributorLinesViewProps}\n \n ) : (\n undefined\n )}\n \n \n );\n};\n\nconst renderDistributorDetails: React.FC = props => {\n const {\n distributorDetailsSliderWrapper,\n distributorDetailsSliderHeaderContainer,\n distributorDetailsSliderHeaderContent,\n distributorDetailsSliderBodyContainer,\n distributorDetailsSliderCurrentDistributorTitle,\n distributorDetailsSliderFooterContainer,\n distributorDetailsSliderDistributorName,\n distributorDetailsSliderInformationWrapper,\n distributorDetailsLocation,\n distributorDetailsPrimaryContact,\n distributorDetailsSliderSelectDistributor,\n terms,\n distributorDetailsChangeDistributor,\n state,\n distributorDetailsDeliveryMethods\n } = props;\n\n return (\n \n {!state.distributorDetailsFromPopup ? (\n {distributorDetailsSliderHeaderContent}\n ) : null}\n \n {distributorDetailsSliderCurrentDistributorTitle}\n {distributorDetailsSliderDistributorName}\n \n {distributorDetailsLocation}\n {distributorDetailsPrimaryContact}\n {distributorDetailsDeliveryMethods}\n \n {distributorDetailsSliderSelectDistributor}\n {state.distributorDetailsFromPopup ? distributorDetailsChangeDistributor : null}\n \n {terms}\n \n );\n};\n\nconst renderDistributorWarningBody: React.FC = props => {\n const { bodyContainerProps, distributorWarningContent } = props;\n\n return {distributorWarningContent};\n};\n\nconst renderDistributorSelectorModal: React.FC = props => {\n const { footerContainerProps, headerContainerProps, distributorSelectorHeaderProps, moduleProps, terms } = props;\n return (\n \n {renderDistributorDetails(props)}\n {distributorSelectorHeaderProps}\n {renderDistributorSelectorBody(props)}\n {terms}\n \n );\n};\n\nconst renderDistributorDetailsPopup = (props: IDistributorSelectorViewProps): JSX.Element | null => {\n const {\n distributorDetailsModalPopup,\n distributorDetailsModalHeader,\n distributorDetailsHeaderProps,\n distributorDetailsModalBody,\n distributorDetailsModalBodyContainer,\n distributorDetailsLocation,\n distributorDetailsPrimaryContact,\n distributorDetailsViewAllDetails,\n distributorDetailsChangeDistributor,\n distributorDetailsModalFooter,\n showDistributorDetailsPopup,\n distributorDetailsDeliveryMethods\n } = props;\n if (showDistributorDetailsPopup) {\n return (\n \n {distributorDetailsHeaderProps}\n \n \n {distributorDetailsLocation}\n {distributorDetailsPrimaryContact}\n {distributorDetailsDeliveryMethods}\n \n {distributorDetailsViewAllDetails}\n \n {distributorDetailsChangeDistributor}\n \n );\n }\n return null;\n};\n\nconst renderWarningDialog = (props: IDistributorSelectorViewProps): JSX.Element | undefined => {\n const {\n footerContainerProps,\n headerContainerProps,\n distributorWarningHeaderProps,\n moduleProps,\n distributorWarningButtonWrapper,\n distributorWarningDoNotShowAgain,\n distributorWarningContinue,\n distributorWarningCancel\n } = props;\n return (\n \n {distributorWarningHeaderProps}\n {renderDistributorWarningBody(props)}\n \n {distributorWarningDoNotShowAgain}\n \n {distributorWarningCancel} {distributorWarningContinue}\n \n \n \n );\n};\n\n/**\n * Distributor selector view props.\n * @param props - Distributor selector view props.\n * @returns - HTML.\n */\nconst DistributorSelectorView: React.FC = props => {\n const { currentDistributorContainer, currentDistributorButton, state } = props;\n\n return currentDistributorContainer ? (\n \n {currentDistributorButton}\n {renderDistributorDetailsPopup(props)}\n {state.showWarningDialog ? renderWarningDialog(props) : renderDistributorSelectorModal(props)}\n \n ) : null;\n};\n\nexport default DistributorSelectorView;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { IReviewModalViewProps } from '@msdyn365-commerce-modules/ratings-reviews';\nimport {\n IReportReviewModalViewProps,\n IReviewCardViewProps,\n IReviewsListState,\n IReviewsListViewProps\n} from '@msdyn365-commerce-modules/ratings-reviews/src/modules/reviews-list';\nimport { IModuleProps, Module, Node } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nconst ReviewsListview: React.FC = props => {\n const {\n averageRating,\n filterByDropdown,\n moduleProps,\n noReviewsMessage,\n noReviewsWithFilterMessage,\n pageControls,\n refineReviewsProps,\n reportReviewModal,\n reviewsListProps,\n reviewCards,\n reviewCount,\n reviewModal,\n sortByDropdown,\n state,\n userReview\n } = props;\n\n if (!userReview && reviewCards.length === 0 && !state.isFilterApplied) {\n return {noReviewsMessage};\n }\n\n return (\n \n {averageRating}\n {reviewCount}\n \n {sortByDropdown}\n {filterByDropdown}\n \n \n {userReview && buildReviewCard(userReview)}\n {reviewCards.map(review => {\n return buildReviewCard(review);\n })}\n \n {reviewCards.length === 0 && state.isFilterApplied && noReviewsWithFilterMessage}\n {pageControls}\n {createReviewModal(reviewModal, moduleProps)}\n {createReportModal(reportReviewModal, state)}\n \n );\n};\n\nconst buildReviewCard = (props: IReviewCardViewProps) => {\n return (\n \n \n {props.rating}\n {props.name}\n {props.date}\n \n \n \n {props.reviewTitle}\n {props.reviewText}\n \n \n {props.responseName}\n {props.responseDate}\n {props.responseText}\n \n \n {props.ratingHelpfulLabel}\n {props.like}\n {props.dislike}\n {props.edit}\n {props.report}\n \n \n \n );\n};\n\nconst createReviewModal = (props: IReviewModalViewProps, moduleProps: IModuleProps): JSX.Element => {\n return (\n \n {props.modalHeader}\n \n \n \n {props.rating}\n {props.ratingLabel}\n \n \n {props.titleLabel}\n {props.titleInput}\n \n \n {props.textLabel}\n {props.textInput}\n \n {props.privacyPolicyUrl}\n {props.error}\n \n \n \n {props.submitButton}\n {props.cancelButton}\n \n \n );\n};\n\nconst createReportModal = (props: IReportReviewModalViewProps, state: IReviewsListState): JSX.Element => {\n return (\n \n {state.reported ? props.headerSubmitted : props.header}\n \n {state.reported ? props.reportSubmittedMessage : [props.reportMessage, props.radioButtons, props.error]}\n \n {state.reported ? props.succesfulButton : [props.submitButton, props.cancelButton]}\n \n );\n};\n\nexport default ReviewsListview;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { StringExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport {\n getTelemetryObject,\n Heading,\n IComponentNodeProps,\n INodeProps,\n ISingleSlideCarouselProps,\n ITelemetryContent,\n NodeTag,\n SingleSlideCarousel\n} from '@msdyn365-commerce-modules/utilities';\nimport classnames from 'classnames';\nimport * as React from 'react';\n\nimport { ITileListProps, ITitleData } from './tile-list.props.autogenerated';\n\n/**\n * Tile-list view props.\n */\nexport interface ITileListViewProps extends ITileListProps<{}> {\n title?: React.ReactNode;\n tiles: React.ReactNode[];\n tileItemContainer: INodeProps;\n tileListContainer: INodeProps;\n tileListHeading: INodeProps;\n singleSlideCarouselComponentProps: INodeProps;\n}\n\n/**\n *\n * TileList component.\n * @extends {React.PureComponent>}\n */\nexport class TileList extends React.PureComponent> {\n private readonly _telemetryContent: ITelemetryContent = getTelemetryObject(\n this.props.context.request.telemetryPageName!,\n this.props.friendlyName,\n this.props.telemetry\n );\n private static _createHeading(heading?: ITitleData): React.ReactNode | null {\n if (!heading || !heading.text || StringExtensions.isNullOrWhitespace(heading.text)) {\n return null;\n }\n return ;\n }\n public constructor(props: ITileListProps<{}>) {\n super(props);\n }\n\n public render(): JSX.Element | null {\n const { resources } = this.props;\n const { title, className } = this.props.config;\n const propsCarousel: IComponentNodeProps = {\n tag: SingleSlideCarousel,\n className: this.props.config.className ?? '',\n flipperPrevLabel: resources.flipperPrevious,\n flipperNextLabel: resources.flipperNext,\n parentId: this.props.id,\n telemetryContent: this._telemetryContent,\n vertical: false\n };\n\n const viewProps = {\n ...this.props,\n title: TileList._createHeading(title),\n singleSlideCarouselComponentProps: propsCarousel,\n tileItemContainer: {\n tag: 'li' as NodeTag,\n className: 'ms-tile__item',\n role: 'listitem'\n },\n tileListContainer: { className: classnames('ms-tile-list', className) },\n tileListHeading: { className: 'ms-tile-list__heading' },\n tiles: this.props.slots.content\n };\n return this.props.renderView(viewProps) as React.ReactElement;\n }\n}\n\nexport default TileList;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { Node } from '@msdyn365-commerce-modules/utilities';\nimport React, { ReactNode } from 'react';\n\nimport { ITileListViewProps } from './tile-list';\n\n/**\n * View component.\n * @param props - The view properties.\n * @returns Returns props.\n */\nexport const tileListView: React.FC = props => {\n const { title, tiles, tileListContainer, tileListHeading, tileItemContainer, singleSlideCarouselComponentProps } = props;\n return (\n \n {title}\n \n {tiles.map((tileItem: ReactNode, index: number) => {\n const keyIndex = `tile-list-item__${index}`;\n return (\n \n {tileItem}\n \n );\n })}\n \n \n );\n};\n\nexport default tileListView;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport {\n IGroup,\n IGroupDelivery,\n IGroups,\n IHeader,\n IList,\n IOrderHistoryViewProps,\n IOrderInformation,\n ISalesOrder\n} from '@msdyn365-commerce-modules/order-management';\nimport { Module, Node } from '@msdyn365-commerce-modules/utilities';\nimport * as React from 'react';\n\nexport const OrderHistoryOrderInfomation: React.FC = ({\n orderInformationProps,\n salesId,\n receiptId,\n channelName,\n createdDate,\n count,\n amount,\n channelReferenceId\n}) => (\n \n {channelName}\n {salesId}\n {receiptId}\n {createdDate}\n {count}\n {amount}\n {channelReferenceId}\n \n);\n\nexport const OrderHistoryGroupDelivery: React.FC = ({\n deliveryProps,\n heading,\n count,\n processing,\n address,\n trackingInfo\n}) => (\n \n {heading}\n {count}\n {processing}\n {address}\n {trackingInfo}\n \n);\n\nexport const OrderHistoryGroup: React.FC = ({ groupProps, delivery, salesLinesProps, salesLines }) => (\n \n {salesLines && (\n \n {salesLines.map(salesLine => (\n {salesLine.salesLine}\n ))}\n \n )}\n \n);\n\nexport const OrderHistoryGroups: React.FC = ({ groupsProps, groups }) => (\n \n {groups.map((group, index) => (\n \n ))}\n \n);\n\nexport const OrderHistoryHeader: React.FC = ({ headerProps, heading, orderCountLabel, extraActions }) => (\n \n {heading}\n {orderCountLabel}\n {extraActions}\n \n);\n\nexport const OrderHistorySalesOder: React.FC = ({\n salesOrderProps,\n orderInfomation,\n groups,\n orderDetailsLink,\n expandProductsButton\n}) => (\n \n \n {orderInfomation.placedBy &&
{orderInfomation.placedBy}}\n
{orderInfomation && }
\n
\n {groups && }\n {expandProductsButton}\n {orderDetailsLink}\n \n);\n\nexport const OrderHistoryList: React.FC = ({ listProps, salesOrders }) => (\n \n {salesOrders && salesOrders.map((salesOrder, index) => )}\n \n);\n\nconst OrderHistoryView: React.FC = ({\n orderHistoryProps,\n header,\n alert,\n loading,\n emptyMessage,\n backToShoppingLink,\n list,\n table,\n moreButton\n}) => (\n \n {header && }\n {loading}\n {alert && (\n <>\n {alert}\n {backToShoppingLink}\n >\n )}\n {emptyMessage && (\n \n {emptyMessage}\n {backToShoppingLink}\n \n )}\n {list && }\n {table}\n {moreButton && moreButton}\n \n);\n\nexport default OrderHistoryView;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport { ISearchData, ISearchViewProps } from '@msdyn365-commerce-modules/search';\nimport { Node } from '@msdyn365-commerce-modules/utilities';\nimport React from 'react';\n\nimport { ISearchProps } from '../../definition-extensions/search.ext.props.autogenerated';\n\n/**\n * Render Categories heading.\n * @param inCategoriesHeading - The Keywords result heading.\n * @returns The JSX Element.\n */\nconst renderCategorySuggestionsTitle = (inCategoriesHeading: string): JSX.Element => {\n const categoryAutoSuggestionHeading = inCategoriesHeading ? inCategoriesHeading : 'In categories';\n\n return {categoryAutoSuggestionHeading}
;\n};\n\n/**\n * Render Categories suggestion result.\n * @param inCategoriesHeading - The Categories result heading.\n * @param noResultText - The \"No Result\" text.\n * @param props - The Categories suggestion result.\n * @param isLoadingAutoSuggest - The autosuggestion loading flag.\n * @param isLoadingNode - The autosuggestion loading node.\n * @returns The JSX Element.\n */\nexport const CategorySuggestionsComponent = (\n inCategoriesHeading: string,\n noResultText: string,\n props: ISearchViewProps & ISearchProps,\n isLoadingAutoSuggest?: boolean,\n isLoadingNode?: React.ReactNode\n): JSX.Element => {\n return props.autosuggestCategory ? (\n \n {renderCategorySuggestionsTitle(inCategoriesHeading)}\n \n {isLoadingAutoSuggest && isLoadingNode}\n {!isLoadingAutoSuggest &&\n props.autosuggestCategory.text.map(text => {\n return text;\n })}\n \n \n ) : (\n \n {renderCategorySuggestionsTitle(inCategoriesHeading)}\n \n {noResultText}\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 { IImageData, Image } from '@msdyn365-commerce/core';\nimport { ISearchData } from '@msdyn365-commerce-modules/search';\nimport { Node } from '@msdyn365-commerce-modules/utilities';\nimport React from 'react';\n\nimport { ISearchProps } from '../../definition-extensions/search.ext.props.autogenerated';\n\n/**\n * Render Products Suggestion result heading.\n * @param props -The props.\n * @returns The JSX Element.\n */\nconst renderProductNotFoundResultsImage = (props: ISearchProps): JSX.Element | null => {\n const noSearchResultImage: IImageData | undefined = props.config.noSearchResultImage;\n if (!noSearchResultImage || !noSearchResultImage.src) {\n return null;\n }\n const imageSettings = {\n lazyload: true,\n viewports: {\n xs: { w: 100, h: 100, q: 'w=100&h=100&q=60&m=6' }\n }\n };\n return (\n \n );\n};\n\n/**\n * Render Product suggestion result.\n * @param props -The props.\n * @returns The JSX Element.\n */\nexport const MobileAutoSuggestEmptyComponent = (props: ISearchProps): JSX.Element => {\n return (\n \n {renderProductNotFoundResultsImage(props)}
\n \n
{props.resources.emptyMobileSearchTextHeading}
\n
{props.resources.emptyMobileSearchText}
\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 { ISearchData, ISearchFormViewProps } from '@msdyn365-commerce-modules/search';\nimport { Button, INodeProps, Node } from '@msdyn365-commerce-modules/utilities';\nimport React from 'react';\n\nimport { ISearchProps } from '../../definition-extensions/search.ext.props.autogenerated';\nimport { MobileAutoSuggestEmptyComponent } from './search.mobile.empty';\n\n/**\n * Render Clear button for mobile viewport.\n * @param clearSearchButtonText -The Clear button text.\n * @param clearSearch -Clear Search callback.\n * @returns -The JSX Element.\n */\nconst renderClearButton = (clearSearchButtonText: string, clearSearch: () => void): JSX.Element => {\n return (\n \n );\n};\n\n/**\n * Render Search form.\n * @param form -Form view props.\n * @param searchForm -Search Form props.\n * @param formWrapper -Form Wrapper props.\n * @param isMobile -Is mobile viewport flag.\n * @param clearSearchButtonText -The Clear button text.\n * @param props -The props for resource.\n * @param isSearchText -Is SearchText flag for input text.\n * @param clearSearch -Clear Search callback.\n * @returns -The JSX Element.\n */\nexport const FormComponent = (\n form: ISearchFormViewProps,\n searchForm: INodeProps,\n formWrapper: INodeProps,\n isMobile: boolean,\n clearSearchButtonText: string,\n props: ISearchProps,\n isSearchText: boolean,\n clearSearch: () => void\n): JSX.Element => {\n const cancelButtonNode = (\n \n );\n\n return isMobile ? (\n \n {form.cancelBtn}\n \n {form.input}\n {isSearchText && renderClearButton(clearSearchButtonText, clearSearch)}\n {!isSearchText ? MobileAutoSuggestEmptyComponent(props) : null}\n \n \n ) : (\n \n \n {form.submitBtn}\n {form.input}\n {isSearchText && cancelButtonNode}\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 { ISearchKeywordViewProps } from '@msdyn365-commerce-modules/search';\nimport { INodeProps, Node } from '@msdyn365-commerce-modules/utilities';\nimport React from 'react';\n\n/**\n * Render keywords heading.\n * @param keywordsHeading -The Keywords result heading.\n * @returns The JSX Element.\n */\nconst renderKeywordSuggestionsTitle = (keywordsHeading: string): JSX.Element => {\n const categoryAutoSuggestionHeading = keywordsHeading ? keywordsHeading : 'Keywords';\n\n return {categoryAutoSuggestionHeading}
;\n};\n\n/**\n * Render keywords reults.\n * @param keywordSuggest -The Keywords suggest Node props.\n * @param ulKeyword -The List Node props.\n * @param keywordsHeading -The Keywords result heading.\n * @param noResultText -The \"No Result\" text.\n * @param keywordSuggestions -The Keywords suggestion result.\n * @param isLoadingAutoSuggest - The autosuggestion loading flag.\n * @param isLoadingNode - The autosuggestion loading node.\n * @returns -The JSX Element.\n */\nexport const KeywordSuggestionsComponent = (\n keywordSuggest: INodeProps,\n ulKeyword: INodeProps,\n keywordsHeading: string,\n noResultText: string,\n keywordSuggestions?: ISearchKeywordViewProps,\n isLoadingAutoSuggest?: boolean,\n isLoadingNode?: React.ReactNode\n): JSX.Element => {\n return keywordSuggestions ? (\n \n {renderKeywordSuggestionsTitle(keywordsHeading)}\n \n {isLoadingAutoSuggest && isLoadingNode}\n {!isLoadingAutoSuggest &&\n keywordSuggestions.text.map(text => {\n return text;\n })}\n \n \n ) : (\n \n {renderKeywordSuggestionsTitle(keywordsHeading)}\n \n {noResultText}\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 { IImageData, Image } from '@msdyn365-commerce/core';\nimport { ISearchData, ISearchProductViewProps } from '@msdyn365-commerce-modules/search';\nimport { INodeProps, Node } from '@msdyn365-commerce-modules/utilities';\nimport React from 'react';\n\nimport { ISearchProps } from '../../definition-extensions/search.ext.props.autogenerated';\n\n/**\n * Render Products Suggestion result heading.\n * @param productSuggestionsHeading -The products suggestion result heading.\n * @returns The JSX Element.\n */\nconst renderProductSuggestionsTitle = (productSuggestionsHeading: string): JSX.Element => {\n const productAutoSuggestionHeading = productSuggestionsHeading ? productSuggestionsHeading : 'Products';\n\n return {productAutoSuggestionHeading}
;\n};\n\n/**\n * Render Products Suggestion result heading.\n * @param props -The props.\n * @returns The JSX Element.\n */\nconst renderProductNotFoundResultsImage = (props: ISearchProps): JSX.Element | null => {\n const noSearchResultImage: IImageData | undefined = props.config.noSearchResultImage;\n if (!noSearchResultImage || !noSearchResultImage.src) {\n return null;\n }\n return (\n \n );\n};\n\n/**\n * Render Products No result section.\n * @param props -The props.\n * @returns The JSX Element.\n */\nconst renderProductNotFoundResults = (props: ISearchProps): JSX.Element => {\n return (\n \n {renderProductNotFoundResultsImage(props)}
\n {props.resources.noResultContentHeadingText}
\n \n {props.resources.noResultContentParagraphText}\n
\n \n );\n};\n\n/**\n * Render Product suggestion result.\n * @param productSuggest -The product suggest Node props.\n * @param ulProduct -The List Node props.\n * @param props -The props.\n * @param productSuggestions -The Product suggestion result.\n * @param isLoadingAutoSuggest - The autosuggestion loading flag.\n * @param isLoadingNode - The autosuggestion loading node.\n * @returns The JSX Element.\n */\nexport const ProductSuggestionsComponent = (\n productSuggest: INodeProps,\n ulProduct: INodeProps,\n props: ISearchProps,\n productSuggestions?: ISearchProductViewProps,\n isLoadingAutoSuggest?: boolean,\n isLoadingNode?: React.ReactNode\n): JSX.Element => {\n const liProduct: INodeProps = {\n tag: 'li',\n className: 'msc-no-result-content'\n };\n return productSuggestions ? (\n \n {renderProductSuggestionsTitle(props.resources.productSuggestionHeading)}\n \n {isLoadingAutoSuggest && isLoadingNode}\n {!isLoadingAutoSuggest &&\n productSuggestions.items.map((item, index) => {\n return (\n \n \n {item.thumbnail}\n {item.text}\n {item.price}\n \n \n );\n })}\n \n \n ) : (\n \n {renderProductSuggestionsTitle(props.resources.productSuggestionHeading)}\n \n {renderProductNotFoundResults(props)}\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 { StringExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport { ISearchData, ISearchFormViewProps, ISearchViewProps } from '@msdyn365-commerce-modules/search';\nimport { Button, format, isMobile, Module, Node, VariantType } from '@msdyn365-commerce-modules/utilities';\nimport React, { useCallback, useEffect, useState } from 'react';\n\nimport { ISearchProps } from '../definition-extensions/search.ext.props.autogenerated';\nimport { CategorySuggestionsComponent } from './components/search.categorysuggest';\nimport { FormComponent } from './components/search.form';\nimport { KeywordSuggestionsComponent } from './components/search.keywordsuggest';\nimport { ProductSuggestionsComponent } from './components/search.productsuggest';\n\n/**\n * Render Title for AutoSuggest.\n * @param searchSuggestionHeading -The heading resource string.\n * @param searchText -The search string.\n * @returns -The JSX Element.\n */\nconst renderTitle = (searchSuggestionHeading: string, searchText: string): JSX.Element => {\n const searchTextString = '\"'.concat(searchText.concat('\"'));\n const searchAutoSuggestionHeading = searchSuggestionHeading\n ? format(searchSuggestionHeading, searchTextString)\n : `Search for ${searchTextString}`;\n\n return {searchAutoSuggestionHeading};\n};\n\n/**\n * Search View.\n * @param props - The view props.\n * @returns The JSX Element.\n */\nconst SearchView: React.FC> = (\n props: ISearchViewProps & ISearchProps\n): JSX.Element => {\n const {\n Search,\n AutoSuggestAriaLabel,\n AutoSuggestAriaLabelText,\n searchText,\n AutoSuggest,\n KeywordSuggest,\n ProductSuggest,\n UlKeyword,\n UlProduct,\n form,\n autosuggestKeyword,\n autosuggestProduct,\n SearchForm,\n FormWrapper,\n label,\n context,\n isLoadingAutoSuggest,\n isLoadingNode,\n callbacks: { handleCancelSearchFocused }\n } = props;\n\n const { searchSuggestionHeading, categorySuggestionHeading, keywordsHeading, noResultText, clearSearchButtonText } = props.resources;\n\n const [searchTextString, setSearchTextString] = useState();\n const [isMobilePort, setIsMobile] = useState(false);\n\n useEffect(() => {\n setSearchTextString(searchText);\n }, [searchText]);\n\n /**\n * ClearSearch callback method to clear search string.\n */\n const clearSearch = (): void => {\n setSearchTextString('');\n\n const propsForm = props.form as ISearchFormViewProps;\n const propsFormInput = propsForm.input as React.DetailedHTMLProps, HTMLInputElement>;\n const propsFormInputCurrent = (propsFormInput.ref as React.RefObject).current;\n\n if (propsFormInputCurrent) {\n propsFormInputCurrent.value = '';\n }\n\n propsFormInput.value = '';\n props.searchText = '';\n props.FormWrapper.action = '';\n };\n\n const isMobileViewport = useCallback(() => {\n const isMobileView = isMobile({ variant: VariantType.Browser, context: context.request }) === 'xs';\n setIsMobile(isMobileView);\n }, [context]);\n\n useEffect(() => {\n window.addEventListener('resize', isMobileViewport);\n isMobileViewport();\n }, [isMobileViewport]);\n\n const viewport = isMobile({ variant: VariantType.Browser, context: context.request });\n\n const isMobileView = viewport === 'sm' || viewport === 'xs';\n\n AutoSuggest.className = !StringExtensions.isNullOrEmpty(searchTextString)\n ? `${AutoSuggest.className} show`\n : `${AutoSuggest.className} hide`;\n const isSearchText: boolean = !StringExtensions.isNullOrEmpty(searchTextString);\n\n return (\n \n {label}\n {FormComponent(\n form as ISearchFormViewProps,\n SearchForm,\n FormWrapper,\n isMobilePort,\n clearSearchButtonText,\n props,\n isSearchText,\n clearSearch\n )}\n {!isMobileView && (\n \n {!StringExtensions.isNullOrEmpty(searchTextString) ? (\n {AutoSuggestAriaLabelText}\n ) : (\n ''\n )}\n {!StringExtensions.isNullOrEmpty(searchTextString) ? (\n <>\n \n \n {renderTitle(searchSuggestionHeading, searchText)}\n \n \n \n {CategorySuggestionsComponent(\n categorySuggestionHeading,\n noResultText,\n props,\n isLoadingAutoSuggest,\n isLoadingNode\n )}\n {KeywordSuggestionsComponent(\n KeywordSuggest,\n UlKeyword,\n keywordsHeading,\n noResultText,\n autosuggestKeyword,\n isLoadingAutoSuggest,\n isLoadingNode\n )}\n \n {ProductSuggestionsComponent(\n ProductSuggest,\n UlProduct,\n props,\n autosuggestProduct,\n isLoadingAutoSuggest,\n isLoadingNode\n )}\n \n >\n ) : null}\n \n )}\n {isMobileView && props.isSearchFormExpanded && (\n \n {!StringExtensions.isNullOrEmpty(searchTextString) ? (\n {AutoSuggestAriaLabelText}\n ) : (\n ''\n )}\n {!StringExtensions.isNullOrEmpty(searchTextString) ? (\n <>\n \n {(form as ISearchFormViewProps).cancelBtn}\n {renderTitle(searchSuggestionHeading, searchText)}\n \n \n \n {CategorySuggestionsComponent(\n categorySuggestionHeading,\n noResultText,\n props,\n isLoadingAutoSuggest,\n isLoadingNode\n )}\n {KeywordSuggestionsComponent(\n KeywordSuggest,\n UlKeyword,\n keywordsHeading,\n noResultText,\n autosuggestKeyword,\n isLoadingAutoSuggest,\n isLoadingNode\n )}\n \n {ProductSuggestionsComponent(\n ProductSuggest,\n UlProduct,\n props,\n autosuggestProduct,\n isLoadingAutoSuggest,\n isLoadingNode\n )}\n \n >\n ) : null}\n \n )}\n \n );\n};\nexport default SearchView;\n","'use strict';\nvar $ = require('../internals/export');\nvar global = require('../internals/global');\n\n// `globalThis` object\n// https://tc39.es/ecma262/#sec-globalthis\n$({ global: true, forced: global.globalThis !== global }, {\n globalThis: global\n});\n","'use strict';\n// TODO: Remove from `core-js@4`\nrequire('../modules/es.global-this');\n"],"names":["StoreType","Map","React","constructor","props","super","pushpinMap","globalThis","selectedPushPin","undefined","clusterClickHandler","cachedOrgUnitFoundCount","mapRef","handleHeadingChange","event","this","config","heading","text","target","value","_initMap","context","actionContext","requestContext","channel","data","storeSelectorStateManager","result","isMapApiLoaded","map","Microsoft","Maps","current","credentials","BingMapsApiKey","pushpinAccessible","labelOverlay","LabelOverlay","hidden","showMapTypeSelector","showLocateMeButton","showTrafficButton","navigationBarMode","enableInertia","customMapStyle","elements","countryRegion","labelVisible","version","_updateMapForOrgUnitChanges","_this$props$data$stor","_storeSelectorStateMa","pushpinOptions","orgUnitStoreInformation","selectedStoreLocationId","positionUser","lastInlineShownStoreInfo","positionUserChanged","firstOrgUnitsRender","cachedLastInlineShownStoreInfo","checkSameLocation","_this$map","currentLayer","layers","clear","storeLocationList","filter","store","OrgUnitAvailability","length","firstThreeLocations","slice","reduce","acc","org","_org$OrgUnitAvailabil","storeLocation","OrgUnitLocation","Latitude","Longitude","push","Location","index","unitStoreInfo","entries","_unitStoreInfo$OrgUni","OrgUnitNumber","isSelectedLocation","storeType","OrgUnitName","startsWith","Retailer","VenchiStore","options","_getPushpinOptions","resources","pushpin","Pushpin","Events","addHandler","handleClickEventOnPushPinStore","set","currentLocation","boundLocations","setView","bounds","LocationRect","fromLocations","padding","pushpinObject","getZoom","center","getLocation","zoom","fromShapes","Array","from","values","pushpinData","loadModule","clusterLayer","removeHandler","size","pushpins","ClusterLayer","clusteredPinCallback","customizeClusteredPin","gridSize","clusteringEnabled","setOptions","clusterClicked","insert","_updateMapForSelectedStore","_this$props$data$stor2","_getPushpinColorAndIcon","currentPushpin","get","_this$map2","mapLayer","containedPushpins","getPrimitives","mapBounds","getBounds","includes","contains","currentZoom","getZoomRange","max","nextZoom","cluster","e","locs","i","len","orgUnitNumber","setSelectedStoreLocationId","color","selectionColor_retailer","color_retailer","selectionColor_store","color_store","icon","mapResources","title","storeLabelRetailer","storeLabelVenchi","componentDidMount","_this$props$data$stor3","telemetry","BingMapsEnabled","when","_this$props$data$stor4","setMapModuleLoaded","_this$props$data$stor5","reaction","_this$props$data$stor6","loadMapApi","_this$props$data$stor7","_this$props$context","key","lang","locale","market","ChannelCountryRegionISOCode","_this$props$data$stor8","_this$props$data$stor9","_this$props$data$stor10","error","render","className","shouldDisplayMap","listMapViewState","displayMap","viewProps","_objectSpread","ModuleProps","tag","moduleProps","classname","show","Header","headerProps","Msdyn365","Object","assign","editProps","onEdit","request","MapProps","ref","renderView","input","secondInput","__decorate","observer","MapHeader","_ref","Node","_ref2","Module","Quantity","inputRef","_validateMin","minValue","min","isNaN","state","currentInput","setState","onChange","currentCount","isUpdateing","_onIncrement","bind","_onDecrement","_handleChange","payLoad","getPayloadObject","telemetryContent","componentDidUpdate","prevProps","disabled","glyphMinusClassName","decrementGlyphClass","glyphPlusClassName","incrementGlyphClass","decrementDisabled","isGiftCard","incrementDisabled","currentValue","contentAction","etext","TelemetryConstant","DecrementQuantity","decrementAttributes","getTelemetryAttributes","IncrementQuantity","incrementAttributes","extraClassDecrement","extraClassIncrement","id","decrementButtonAriaLabel","onClick","tabIndex","type","pattern","onBlur","inputQuantityAriaLabel","role","incrementButtonAriaLabel","invokeCallback","currQuantity","updatedQuantity","parseInt","inputElement","HTMLInputElement","_debounce","setAttribute","toString","defaultProps","getStar","star","_renderStars","_renderTextBlock","textBlocks","_renderPrice","_props$data$productPr2","_props$data$productPr3","_props$data$productPr4","_props$data$productPr5","_props$data$productPr6","custom_price","cultureFormatter","formatCurrency","productPrice","AdjustedPrice","toFixed","custom_discount_percentage","discountLines","normalizedDiscountedPrice","accumulator","discountLine","percentage","Percentage","Math","round","getCustomDiscountPercentage","DiscountLines","custom_discounted_price","CustomerContextualPrice","attributes","productSpecificationData","omnibus_price","attribute","Name","omnibus_price_currency","CurrencyValue","CurrencyCode","omnibus_recent_price_label","style","textDecoration","_renderCartAndActions","addToCart","addToOrderTemplate","addToWishlist","_addToCart$button","_props$context","_props$context2","_props$context3","_props$context4","_props$context5","_props$data3","_props$data4","_props$context6","button","localeString","toLowerCase","sitePath","substring","url","requestUrl","hostname","errorBlock","_renderAddToBackInStore","customerId","channelId","itemid","dimensions","emailAddress","cust","item","dims","message","backInStockMessage","toHide","forEach","dim","_dim$DimensionValue","_dim$DimensionValue2","DimensionTypeValue","DimensionValue","DimensionId","_dim$DimensionValue3","_dim$DimensionValue4","_dim$DimensionValue5","_dim$DimensionValue6","_dim$DimensionValue7","_dim$DimensionValue8","stockMessage","setStockMessage","inactiveAccount","async","insertBackInStock_CAPAsync_v2","callerContext","then","Error","outOfStockText","notifyMeWhenAvailable","user","customerAccountNumber","apiSettings","product","ItemId","Dimensions","backInStockAgreement","_renderCartAndActionsPM","_addToCart$button2","_props$data5","_props$context7","_addToCart$button3","_props$data6","_props$data7","_props$data8","_props$data9","_props$data10","productId","RecordId","categoryPathLookups","ProductId","catUrl","setCatUrl","isPm","setIsPm","_props$context8","_categoryPathResults$","categoryPathResults","getCategoryPathsAsync","CategoryPath","catPath","_props$context9","categoryUrl","getCategoriesUrlSync","Url","_productCategory","product_qty","quantity","_addToPM","PrimaryImageUrl","Qty","localPm","localStorage","getItem","localPmProds","JSON","stringify","pmProductsList","parse","_addToPm","pQuantity","Price","Id","Item","UOM","Description","DataAreaId","window","setItem","location","_addToPickAndMix","addToPickAndMix","_renderConfigure","configure","ContainerProps","dropdowns","_renderConfigureDropdown","dropdown","LabelContainerProps","errors","select","_renderQuantity","quantityComponent","callbacks","extentionResources","quantityLimitsMessages","isCustomPriceSelected","newValue","updateQuantity","minQuantityText","maxQuantityText","_renderKeyInPrice","keyInPrice","_renderBadge","badge","_badge$image$imageSet","_badge$image","imgSettings","image","imageSettings","Image","fallBackSrc","altText","gridSettings","loadFailureBehavior","label","_getProductLabels","baseImagePath","results","imgBaseUrlArray","decodeURIComponent","split","pop","imgUrls","join","response","axios","status","_renderSocialShare","socialShare","_productAvailableQuan","_props$config","_props$config2","_props$data","_props$slots","_props$slots$productS","_props$slots2","_props$slots3","_props$slots$productS2","_props$slots4","_labels$product_speci","_labels$product_speci2","_labels$product_speci3","_props$data$product$r","_props$data$product$r2","_props$data2","_props$rating$props$a","_props$rating","_props$rating$props$r","_props$rating2","_props$resources$buyb","_props$resources","_badgesItems$filter","_props$data$product$r3","_props$data$product$r4","_props$slots5","MediaGalleryContainerProps","ProductInfoContainerProps","rating","inventoryLabel","productAvailableQuantity","availibilityCode","StockLevelCode","badgesItems","badgeItems","badgeName","badgeLabel","badgeLabelColor","badgeImage","badgesTag","maxBadges","badgeMaxItems","Number","replace","badgesToShow","row","_row$Name","attributeName","trim","BooleanValue","productSpecificationResult","specificationsList","specificationsListOrder","Reassurance","Ingredients","Labels","ingredientsAllAttributesList","labels","pSpecifications","ingredientsArray","ingredientsString","reassuranceItems","slots","productSpecification","reassurance","reassuranceTitle","description","reassuranceDescription","reassuranceImage","isProductAccordionOpened","productDescriptionAccordionOpened","accordionsState","setAccordionsState","fetchingLabels","setFetchingLabels","productLabels","setProductLabels","imgLink","TextValue","name","order","sort","a","b","productSku","productPrimaryImageUrl","addToCartGA","_props$data$productPr","_window$dataLayer","_window$dataLayer$pus","output","names","document","getElementsByClassName","_item$getAttribute","getAttribute","categoryGA","productInfo","dataLayer","call","currencyCode","addEventListener","scrollToRevews","y","getBoundingClientRect","top","pageYOffset","scrollTo","behavior","isAccordionExpanded","accordion","normalizeData","resultData","qty1Value","category","subcategory","subRow","newProductLabels","_","productShortDescription","productDesc","avgRating","totRatingsLabel","ratingCount","buyboxReviewLabel","mediaGallery","_labels","titleId","titleLabel","accordionContent","jData","normalizedData","_labels$row$label","_labels$row$qty1Label","_row$qty1Value","_row$qty1Unit","_row$qty2Value","_row$qty2Unit","qty1Label","qty1Unit","qty2Value","qty2Unit","_labels$subRow$label","_subRow$qty1Value","_subRow$qty1Unit","_renderNutritionalValues","nutritionalValueJSONType","_row$image$imageSetti","_row$image","isLast","_renderReassurance","_labels$product_speci4","href","_renderProductLabels","accordionOnClick","DeliveryOptionList","DeliveryOptionsList","list","deliveryOptions","sortedDeliveryOptions","deliveryOption","sortedDeliveryOption","find","deliveryOptionEdit","code","Code","DeliveryOption","radioButton","price","DeliveryOptionSelected","CheckoutDeliveryOptions","checkoutErrorRef","viewState","deliveryOptionsData","deliveryOptionSelected","alert","waiting","saveButton","editButton","cancelButton","extraTextField","paragraph","extraText","isLoading","isError","isShowList","isShowSelected","isShowSaveButton","isShowEditButton","isShowCancelButton","CheckInConfirmationComponent","confirmationText","shouldShowQrCode","channelReferenceIdLabel","channelReferenceId","QRCode","CheckInErrorComponent","errorMessage","CheckInForPickup","checkInForOrderPickup","query","packingSlipId","additionalInformationToSubmit","additionalInformationList","additionalInformationKeyValuePair","_additionalInformatio","formKey","resourceId","extensionPropertyList","ObjectExtensions","isNullOrUndefined","additionalInformation","Key","Value","StringValue","SalesOrdersDataActions","queryResultSettings","headerErrorMessage","genericErrorMessage","isCheckedIn","Promise","resolve","_onInit","_this$props$context$r","_this$props$context$r2","_this$props$context$r3","_this$props$context$r4","params","isEditor","isPreview","requiredParameterMissingErrorMessage","additionalInformationKeys","ArrayExtensions","hasElements","_this$props$context$r5","isHeaderError","headerError","confirmationComponent","defaultConfirmationText","confirmationIdLabel","additionalInformationValues","shouldComponentUpdate","nextProps","nextState","additionalInformationHeading","_props$config$additio","FormBuilder","additionalInformationDefaultHeading","submitButtonText","additionalInformationSubmitButtonText","keys","requiredValueMissingErrorMessage","onSubmit","DistributorSelectorCountMessage","distributors","distributorCountMessage","DistributorSelectorTermsOfService","link","onTextChange","editableLink","ariaLabel","linkText","linkUrl","destinationUrl","openInNewTab","DistributorSelectorWaiting","classnames","DistributorSelectorDoNotShowAgain","_ref3","doNotShowAgainMessage","DistributorSelectorButton","_ref4","DistributorEmptyMessage","_ref5","emptyLocationsText","onSetCurrentDistributorClickHandler","_props$distributor$Or","handlers","onSetAsCurrentDistributor","distributor","OrgUnit","onViewAllDistributorDetailsClickHandler","_props$distributor$Or2","onViewAllDistributorDetails","DistributorSelectorLineItemComponent","_distributor$OrgUnit","_distributor$OrgUnit2","_distributor$OrgUnit3","_distributor$OrgUnit4","_distributor$OrgUnitD","currentDistributorId","shouldShowIndex","selectDistributorText","distributorDetailsToBeShown","mainClassName","distributorName","isCurrentDistributor","CurrentDistributor","currentDistributorAttributes","distributorAddress","OrgUnitAddress","FullAddress","distributorPhoneNo","Phone","deliveryMethods","OrgUnitDeliveryOptions","DeliveryOptions","currentDistributorText","indexOf","locationHeadingText","primaryContactText","deliveryMethodHeadingText","deliveryMethod","viewAllDistributorText","DistributorSelectorLines","onDistributorSelected","orgUnit","_scrollIntoView","_selectedDistributorD","selectedDistributorDiv","selectedDistributorRef","parent","shouldDisplayList","parentElement","scrollTop","offsetTop","clientHeight","scrollLeft","offsetLeft","distributorCounter","setTimeout","previousProps","selectedDistributorId","_renderDistributor","selected","observable","DistributorPaymentOptionList","_renderTenderTypes","isExpandOptionsState","isFilterExpanded","handleFilterSelection","preventDefault","paymentCode","currentTarget","selectedPaymentTypes","_distributorPaymentTypesMenu","_paymentTypesList$fin","paymentTypesMenuText","paymentTypesList","defaultOptionText","selectedPaymentTypesDesc","payment","TenderTypeId","tenderType","onKeyDown","DistributorSelectorSearchForm","_onChangeHandler","onPaymentFilterSelected","tenderTypeId","renderPaymentTypeList","paymentTypesOptions","paymentFilterMenuHeading","paymentFilterByHeading","filteredPaymentType","ToggleMapView","toggleMapViewAttributes","viewMapText","viewListText","showLocatorView","paymentTypes","showPaymentTypeFilter","onToggleListMapViewState","toggleButtonText","toggleButtonClass","DistributorSelector","mainClass","headerClass","currentDistributorBtnRef","toggleListMapViewState","distributorSelectorStateManager","onChangeForDoNotShow","warningDialogState","checked","onSelectDistributor","distributorId","_setCurrentDistributor","onChangeDistributorClick","setSelectedDistributorId","isDistributorDetailPopupOpen","closeDistributorDetailPopup","isDistributorSelectorDialogOpen","showDistributorDetails","distributorDetailsFromPopup","openDistributorSelectorDialog","parentElementRef","onDistributorCloseButtonClick","continueButtonClick","cookies","currentDistributor","currentSelectedDistributor","hideWarningMessage","isConsentGiven","_closeDistributorSelectorDialog","redirectToDistributorURL","cancelButtonClick","showWarningDialog","backToSearchClick","onViewAllDistributorDetailsFromPopup","_this$currentDistribu","_this$currentDistribu2","_this$currentDistribu3","DistributorId","getCurrentDistributor","isAuthenticated","_this$props$data$dist","distributorList","_distributor$MarketSe","MarketSettings","localeItems","some","localeBaseUrl","_currentDistributor$O","_currentDistributor$O2","DistributorName","getUniquePaymentTypes","uniquePaymentTypes","Set","_distributor$PaymentT","PaymentTypes","paymentType","add","filterDistributorsByPaymentTypes","filteredPaymentTypeId","_distributor$PaymentT2","marketSettings","currentLocale","localeItem","distributorURL","defaultLocale","isDefaultLocale","debug","handleDistributorSelectorClick","_this$props$data$dist2","_this$currentDistribu4","openDistributorDetailPopup","onFilteredPaymentType","renderDistributorDetailsViewProps","distributorDetails","_distributorDetails$O","_distributorDetails$O2","_distributorDetails$O3","_distributorDetails$O4","switchDistributorText","distributorDetailsModalPopup","distributorDetailsModalHeader","distributorDetailsHeaderProps","closeDistributorDetailPopupButtonAriaLabel","distributorDetailsModalBody","distributorDetailsModalBodyContainer","distributorDetailsLocation","distributorDetailsPrimaryContact","distributorDetailsDeliveryMethods","distributorDetailsViewAllDetails","distributorDetailsChangeDistributor","handleChangeDistributorTextChange","distributorDetailsModalFooter","distributorDetailsSliderWrapper","renderDistributorSliderViewProps","isCurrentDistributorSelected","_distributorDetails$O5","distributorDetailsSliderDistributorName","distributorDetailsSliderHeaderContent","distributorSliderBackToSearch","distributorDetailsSliderHeaderContainer","distributorDetailsSliderBodyContainer","distributorDetailsSliderFooterContainer","distributorDetailsSliderInformationWrapper","distributorDetailsSlidercurrentDistributorTitle","distributorDetailsSliderSelectDistributor","handleSelectDistributorTextChange","distributorWarningDialogHeading","distributorSelectorHeading","handleWarningTextChange","distributorWarningContent","handleLinkTextChange","termsOfServiceLink","stopPropagation","shouldShowDistributors","isOboRequest","getAccountSelectionCookie","isSignedIn","checkUserStateAndOpenDialog","getDistributorDetails","_getAndUpdateDistributorList","isSearchInProgress","_updateDistributorListInStateManager","_this$currentDistribu5","sortedDistributorList","_sortDistributor","setDistributorsList","catch","_distributorSelectorS","distributorSelectorContext","focus","updateDistributorMapVisibility","closeDistributorSelectorDialog","searchTerm","_setSelectedDistributor","hideDistributorWarning","getTelemetryObject","telemetryPageName","friendlyName","_this$props$data$dist3","_this$props$data$dist4","_this$props$context$a","_this$currentDistribu6","_this$currentDistribu7","_distributorSelectorS2","_distributorSelectorS3","doNotShowAgainCheckbox","noDistributorFoundText","maps","mapSlot","currentDistributorName","headerText","headerCurrentDistributorText","distributorInfoList","hasMapSlot","isMobileDevice","isMobile","variant","VariantType","Viewport","shouldOpenDistributorSelectorDialog","shouldOpenDistributorDetailPopup","displayList","canShowLocationView","showMapViewLink","isMapModuleLoaded","showDistributorDetailsOnMap","showDistributorDetailsPopup","currentDistributorContainer","currentDistributorButton","headerCurrentDistributorAriaLabel","Modal","autoFocus","fade","isOpen","onClosed","horizontalPosition","verticalPosition","toggle","isMobileView","headerContainerProps","ModalHeader","distributorSelectorHeaderProps","distributorWarningHeaderProps","footerContainerProps","ModalFooter","bodyContainerProps","ModalBody","bodyWrapperProps","distributorsResultContainerProps","distributorsResultWrapperProps","mapContainerProps","searchForm","spinner","distributorLinesViewProps","isLocationDisabled","noDistributorsMessage","terms","distributorWarningButtonWrapper","distributorWarningDoNotShowAgain","distributorWarningContinue","distributorWarningCancel","_value$OrgUnit","renderDistributorSelectorModal","distributorDetailsSliderCurrentDistributorTitle","renderDistributorDetails","renderDistributorSelectorBody","renderWarningDialog","renderDistributorWarningBody","renderDistributorDetailsPopup","buildReviewCard","cardProps","date","cardBodyProps","reviewProps","reviewTitle","reviewText","responseProps","responseName","responseDate","responseText","controlsProps","ratingHelpfulLabel","like","dislike","edit","report","createReviewModal","modal","modalHeader","modalBody","form","inputRow","ratingLabel","titleInput","textLabel","textInput","privacyPolicyUrl","modalFooter","submitButton","createReportModal","reported","headerSubmitted","header","reportSubmittedMessage","reportMessage","radioButtons","succesfulButton","averageRating","filterByDropdown","noReviewsMessage","noReviewsWithFilterMessage","pageControls","refineReviewsProps","reportReviewModal","reviewsListProps","reviewCards","reviewCount","reviewModal","sortByDropdown","userReview","isFilterApplied","review","TileList","_telemetryContent","StringExtensions","isNullOrWhitespace","Heading","headingTag","_this$props$config$cl","propsCarousel","SingleSlideCarousel","flipperPrevLabel","flipperPrevious","flipperNextLabel","flipperNext","parentId","vertical","_createHeading","singleSlideCarouselComponentProps","tileItemContainer","tileListContainer","tileListHeading","tiles","content","tileListView","tileItem","keyIndex","OrderHistoryOrderInfomation","orderInformationProps","salesId","receiptId","channelName","createdDate","count","amount","OrderHistoryGroupDelivery","deliveryProps","processing","address","trackingInfo","OrderHistoryGroup","groupProps","delivery","salesLinesProps","salesLines","salesLine","LineId","OrderHistoryGroups","groupsProps","groups","group","OrderHistoryHeader","orderCountLabel","extraActions","OrderHistorySalesOder","_ref6","salesOrderProps","orderInfomation","orderDetailsLink","expandProductsButton","placedBy","OrderHistoryList","_ref7","listProps","salesOrders","salesOrder","_ref8","orderHistoryProps","loading","emptyMessage","backToShoppingLink","table","moreButton","renderCategorySuggestionsTitle","inCategoriesHeading","categoryAutoSuggestionHeading","CategorySuggestionsComponent","noResultText","isLoadingAutoSuggest","isLoadingNode","autosuggestCategory","CategorySuggest","UlCategory","MobileAutoSuggestEmptyComponent","noSearchResultImage","src","lazyload","viewports","xs","w","h","q","renderProductNotFoundResultsImage","emptyMobileSearchTextHeading","emptyMobileSearchText","FormComponent","formWrapper","clearSearchButtonText","isSearchText","clearSearch","cancelButtonNode","Button","cancelBtnAriaLabel","cancelBtn","renderClearButton","submitBtn","renderKeywordSuggestionsTitle","keywordsHeading","KeywordSuggestionsComponent","keywordSuggest","ulKeyword","keywordSuggestions","renderProductSuggestionsTitle","productSuggestionsHeading","productAutoSuggestionHeading","renderProductNotFoundResults","noResultContentHeadingText","noResultContentParagraphText","ProductSuggestionsComponent","productSuggest","ulProduct","productSuggestions","productSuggestionHeading","items","_item$id","LiProduct","AProduct","thumbnail","renderTitle","searchSuggestionHeading","searchText","searchTextString","concat","searchAutoSuggestionHeading","format","Search","AutoSuggestAriaLabel","AutoSuggestAriaLabelText","AutoSuggest","KeywordSuggest","ProductSuggest","UlKeyword","UlProduct","autosuggestKeyword","autosuggestProduct","SearchForm","FormWrapper","handleCancelSearchFocused","categorySuggestionHeading","setSearchTextString","useState","isMobilePort","setIsMobile","useEffect","propsFormInput","propsFormInputCurrent","action","isMobileViewport","useCallback","Browser","viewport","isNullOrEmpty","isSearchFormExpanded","$","global","forced"],"sourceRoot":""}