\r\n \r\n {renderProductPlacementImage(\r\n imageSettings, context.request.gridSettings, product.PrimaryImageUrl, product.Name, context.actionContext.requestContext)}\r\n
\r\n \r\n
\r\n {product.Name}\r\n
\r\n {isUnitOfMeasureEnabled && renderProductUnitOfMeasure(product.DefaultUnitOfMeasure)}\r\n {renderDescription(product.Description)}\r\n \r\n \r\n {quickViewButton && renderQuickView(quickViewButton, product.RecordId)}\r\n \r\n );\r\n};\r\n\r\nfunction renderLabel(name?: string, price?: string, rating?: number, ratingAriaLabel?: string): string {\r\n name = name || '';\r\n price = price || '';\r\n return (`${name} ${price} ${getRatingAriaLabel(rating, ratingAriaLabel)}`);\r\n}\r\n\r\nfunction renderDescription(description?: string): JSX.Element | null {\r\n return (\r\n {description}\r\n
);\r\n}\r\n\r\nfunction renderQuickView(quickview: React.ReactNode, item?: number): JSX.Element | undefined {\r\n if (quickview === null) {\r\n return undefined;\r\n }\r\n return React.cloneElement(quickview as React.ReactElement, { selectedProductId: item });\r\n}\r\n\r\nfunction getRatingAriaLabel(rating?: number, ratingAriaLabel?: string): string {\r\n if (rating && ratingAriaLabel) {\r\n const roundedRating = rating.toFixed(2);\r\n return format(ratingAriaLabel || '', roundedRating, '5');\r\n }\r\n return '';\r\n}\r\n\r\nfunction updateProductUrl(productUrl: string, context: ICoreContext): string {\r\n const srcUrl = new URL(productUrl, context.request.apiSettings.baseUrl);\r\n const queryString = 'back=true';\r\n if (srcUrl.search) {\r\n srcUrl.search += `&${queryString}`;\r\n } else {\r\n srcUrl.search += queryString;\r\n }\r\n\r\n const updatedUrl = new URL(srcUrl.href);\r\n return updatedUrl.pathname + srcUrl.search;\r\n}\r\n\r\nfunction renderProductPlacementImage(\r\n imageSettings?: IImageSettings, gridSettings?: IGridSettings, imageUrl?: string, altText?: string, context?: IRequestContext): JSX.Element | null {\r\n\r\n if (!imageUrl || !gridSettings || !imageSettings) {\r\n return null;\r\n }\r\n const img: IImageData = {\r\n src: imageUrl,\r\n altText: altText ? altText : ''\r\n };\r\n const imageProps = {\r\n gridSettings,\r\n imageSettings\r\n };\r\n imageProps.imageSettings.cropFocalRegion = true;\r\n return (\r\n \r\n );\r\n}\r\n\r\nexport const ProductComponent: React.FunctionComponent = msdyn365Commerce.createComponent(\r\n 'Product',\r\n { component: ProductCard, ...PriceComponentActions }\r\n);\r\n","/**\r\n * Copyright (c) Microsoft Corporation\r\n * All rights reserved. See License.txt in the project root for license information.\r\n * ICittaProductCollection containerModule Interface Properties\r\n * THIS FILE IS AUTO-GENERATED - MANUAL MODIFICATIONS WILL BE LOST\r\n */\r\n\r\nimport * as Msdyn365 from '@msdyn365-commerce/core';\r\nimport * as React from 'react';\r\n\r\nexport const enum layout {\r\n carousel = 'carousel',\r\n grid = 'grid'\r\n}\r\n\r\nexport interface ICittaProductCollectionConfig extends Msdyn365.IModuleConfig {\r\n heading?: IHeadingData;\r\n layout?: layout;\r\n allowBackNavigation?: boolean;\r\n imageSettings?: Msdyn365.IImageSettings;\r\n clientRender?: boolean;\r\n enableAffiliationBasedPricing?: boolean;\r\n className?: string;\r\n}\r\n\r\nexport interface ICittaProductCollectionResources {\r\n priceFree: string;\r\n ratingAriaLabel: string;\r\n flipperNext: string;\r\n flipperPrevious: string;\r\n originalPriceText: string;\r\n currentPriceText: string;\r\n}\r\n\r\nexport const enum HeadingTag {\r\n h1 = 'h1',\r\n h2 = 'h2',\r\n h3 = 'h3',\r\n h4 = 'h4',\r\n h5 = 'h5',\r\n h6 = 'h6'\r\n}\r\n\r\nexport interface IHeadingData {\r\n text: string;\r\n tag?: HeadingTag;\r\n}\r\n\r\nexport interface ICittaProductCollectionProps extends Msdyn365.IModule {\r\n resources: ICittaProductCollectionResources;\r\n config: ICittaProductCollectionConfig;\r\n slots: {\r\n quickview: React.ReactNode[];\r\n };\r\n}\r\n","/*--------------------------------------------------------------\r\n * Copyright (c) Microsoft Corporation. All rights reserved.\r\n * See License.txt in the project root for license information.\r\n *--------------------------------------------------------------*/\r\n\r\n/* eslint-disable no-duplicate-imports */\r\n// import { ProductComponent } from '@msdyn365-commerce/components';\r\nimport * as Msdyn365 from '@msdyn365-commerce/core';\r\nimport { getCartFromCustomer } from '@msdyn365-commerce/global-state';\r\nimport { ProductPrice, ProductSearchResult, ProjectionDomain } from '@msdyn365-commerce/retail-proxy';\r\nimport {\r\n getActivePricesAsync\r\n} from '@msdyn365-commerce/retail-proxy/dist/DataActions/ProductsDataActions.g';\r\nimport { getTelemetryObject, IComponentNodeProps, IModuleProps, INodeProps, ISingleSlideCarouselProps, ITelemetryContent, NodeTag, SingleSlideCarousel } from '@msdyn365-commerce-modules/utilities';\r\nimport classnames from 'classnames';\r\nimport * as React from 'react';\r\nimport { ICittaProductCollectionData } from './citta-product-collection.data';\r\nimport { ProductComponent } from './components/product-component';\r\n\r\nimport { ICittaProductCollectionProps, layout } from './citta-product-collection.props.autogenerated';\r\n\r\nexport interface IProductCollectionViewProps extends ICittaProductCollectionProps {\r\n heading?: React.ReactNode;\r\n ProductCollectionContainer: IModuleProps;\r\n SingleSlideCarouselComponentProps: INodeProps;\r\n GridComponentProps: INodeProps;\r\n products: IProductComponentViewProps[];\r\n isCarousel: boolean;\r\n productPrices?: ProductPrice[];\r\n}\r\n\r\nexport interface IProductComponentViewProps {\r\n ProductContainer: INodeProps;\r\n productComponent: React.ReactNode;\r\n}\r\nexport interface IProductComponentState {\r\n products: ProductSearchResult[];\r\n}\r\n\r\n/**\r\n * ProductCollection component.\r\n */\r\nclass ProductCollection extends React.PureComponent, IProductComponentState> {\r\n private readonly telemetryContent: ITelemetryContent;\r\n\r\n private productPrices: ProductPrice[];\r\n\r\n constructor(props: ICittaProductCollectionProps) {\r\n super(props);\r\n this.productPrices = [];\r\n this.telemetryContent = getTelemetryObject(this.props.context.request.telemetryPageName!,\r\n this.props.friendlyName,\r\n this.props.telemetry);\r\n }\r\n\r\n public componentDidMount(): void {\r\n if (this.props.config.enableAffiliationBasedPricing &&\r\n this.props.context.actionContext.requestContext?.user?.isAuthenticated) {\r\n this._getActivePrice();\r\n }\r\n }\r\n\r\n public render(): JSX.Element | null {\r\n const { heading, className } = this.props.config;\r\n const { \r\n resources,\r\n data: {\r\n catelogfeed\r\n }\r\n } = this.props;\r\n const products = catelogfeed && catelogfeed.result;\r\n\r\n const isCarousel = this.props.config.layout === layout.carousel;\r\n const headingComponent = heading && (\r\n \r\n );\r\n\r\n const productCollectionViewProps = {\r\n ...this.props,\r\n heading: headingComponent,\r\n SingleSlideCarouselComponentProps: {\r\n tag: SingleSlideCarousel,\r\n className: '',\r\n flipperPrevLabel: resources.flipperPrevious,\r\n flipperNextLabel: resources.flipperNext,\r\n parentId: this.props.id,\r\n telemetryContent: this.telemetryContent\r\n } as IComponentNodeProps,\r\n ProductCollectionContainer: {\r\n moduleProps: this.props,\r\n className: classnames('ms-product-collection', className)\r\n },\r\n GridComponentProps: {\r\n tag: 'ul' as NodeTag,\r\n className: 'ms-product-collection__items'\r\n },\r\n isCarousel,\r\n products: products && products.length > 0 && products.map((item: ProductSearchResult, index: number) => this._getProduct(item, index)),\r\n productPrices: this.productPrices\r\n };\r\n return this.props.renderView(productCollectionViewProps) as React.ReactElement;\r\n }\r\n\r\n public handleHeadingChange = (event: Msdyn365.ContentEditableEvent) => this.props.config.heading!.text = event.target.value;\r\n\r\n private readonly _getProduct = (product: ProductSearchResult, index: number): IProductComponentViewProps | null => {\r\n if (!product || !product.Name) {\r\n this.props.telemetry.trace('[product-collection] Product or product name is null');\r\n return null;\r\n }\r\n const telemetryContent = getTelemetryObject(this.props.context.request.telemetryPageName!,\r\n this.props.friendlyName,\r\n this.props.telemetry);\r\n const { imageSettings, allowBackNavigation } = this.props.config;\r\n const resources = this.props.resources;\r\n const breaCrumbType = this.props.context.app.config.breadcrumbType;\r\n const allowBack = allowBackNavigation && (breaCrumbType === 'back' || breaCrumbType === 'categoryAndBack');\r\n const quickviewSlot = this.props.slots && this.props.slots.quickview && this.props.slots.quickview.length > 0 ? this.props.slots.quickview[0] : null;\r\n return {\r\n ProductContainer: {\r\n tag: 'li' as NodeTag,\r\n className: 'ms-product-collection__item',\r\n role: 'listitem',\r\n key: index\r\n },\r\n productComponent: (\r\n \r\n )\r\n };\r\n };\r\n\r\n private readonly _getActivePrice = async (): Promise => {\r\n let products = (this.state.products) || [];\r\n const productRecIds = (products && products.length > 0) ? products.map(prod => prod.RecordId) : [];\r\n const projectDomain: ProjectionDomain = { ChannelId: this.props.context.request.apiSettings.channelId, CatalogId: this.props.context.request.apiSettings.catalogId };\r\n const cart = await getCartFromCustomer(this.props.context.actionContext);\r\n const affliations = cart?.AffiliationLines;\r\n\r\n await getActivePricesAsync(\r\n { callerContext: this.props.context.actionContext, queryResultSettings: {} },\r\n projectDomain,\r\n productRecIds,\r\n new Date(),\r\n null,\r\n affliations,\r\n true\r\n ).then((activePricesResponse: ProductPrice[]) => {\r\n this.productPrices = activePricesResponse;\r\n products = products.map(prod => {\r\n const activePrice = activePricesResponse.find(price => price.ProductId === prod.RecordId);\r\n if (activePrice) {\r\n prod.Price = activePrice.CustomerContextualPrice ?? prod.Price;\r\n prod.BasePrice = Math.max(activePrice.BasePrice || 0, activePrice.TradeAgreementPrice || 0, activePrice.AdjustedPrice || 0);\r\n }\r\n return prod;\r\n });\r\n this.setState({\r\n products\r\n });\r\n })\r\n .catch((error: Error) => {\r\n this.props.context.actionContext.trace(error.message);\r\n this.props.context.actionContext.telemetry.exception(error);\r\n this.props.context.actionContext.telemetry.debug('[get Affiliation based price on Product Collection]Error executing action');\r\n throw new Error('[get Affiliation based price on Product Collection]Error executing action');\r\n });\r\n };\r\n}\r\n\r\nexport default ProductCollection;\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\nimport { observer } from 'mobx-react';\r\nimport * as React from 'react';\r\n\r\nimport { IModuleProps, INodeProps } from '@msdyn365-commerce-modules/utilities';\r\nimport { ICittaProductpdfSpecificationData } from './citta-productpdf-specification.data';\r\nimport { ICittaProductpdfSpecificationProps } from './citta-productpdf-specification.props.autogenerated';\r\n\r\nexport interface ICittaProductpdfSpecificationViewProps extends ICittaProductpdfSpecificationProps {\r\n PdfSpecificationContainer: IModuleProps;\r\n PdfSpecificationContentContainer: INodeProps;\r\n PdfSpecificationContent: INodeProps;\r\n PdfSpecificationContentShow: boolean;\r\n ProductSku: string | undefined;\r\n}\r\n\r\n/**\r\n *\r\n * CittaProductpdfSpecification component\r\n * @extends {React.Component>}\r\n */\r\n\r\n@observer\r\nclass CittaProductpdfSpecification extends React.Component> {\r\n public render(): JSX.Element | null {\r\n const { config } = this.props;\r\n\r\n const content: ICittaProductpdfSpecificationData = this.props.data;\r\n\r\n const pdfSpecificationContent = this._getProductSpecificationContent(content, config.pdfSpecificationTitle ? config.pdfSpecificationTitle : '');\r\n const productSku = content && content.product && content.product.result && content.product.result.ItemId;\r\n const CittaProductpdfSpecificationViewProps = {\r\n ...this.props,\r\n PdfSpecificationContainer: {\r\n moduleProps: this.props,\r\n className: 'pdf-specification'\r\n },\r\n PdfSpecificationContentContainer: {\r\n className: 'pdf-specification-content',\r\n 'aria-label': config.pdfSpecificationTitle\r\n },\r\n PdfSpecificationContent: {\r\n tag: 'a',\r\n href: pdfSpecificationContent,\r\n 'aria-label': `Click here to read ${config.pdfSpecificationTitle}`,\r\n target: '_blank',\r\n rel: \"noopener\"\r\n },\r\n PdfSpecificationContentShow : pdfSpecificationContent ? true : false,\r\n ProductSku: productSku\r\n };\r\n\r\n return this.props.renderView(CittaProductpdfSpecificationViewProps) as React.ReactElement;\r\n }\r\n\r\n private _getProductSpecificationContent(content: ICittaProductpdfSpecificationData, specificationTitle: string): string {\r\n const productSpec = content.productSpecificationData.result;\r\n let contentText = '';\r\n if (productSpec) {\r\n productSpec.some(spec => {\r\n if (spec.TextValue && spec.Name === specificationTitle) {\r\n contentText = spec.TextValue;\r\n return true;\r\n }\r\n return false;\r\n });\r\n }\r\n return contentText;\r\n }\r\n}\r\n\r\nexport default CittaProductpdfSpecification;\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/* eslint-disable no-duplicate-imports */\r\nimport { Module } from '@msdyn365-commerce-modules/utilities';\r\nimport * as React from 'react';\r\nimport { ICittaProductAttributeCompanionProductViewProps } from './citta-product-attribute-companion-product';\r\n\r\nconst ContentBlockView: React.FC = (props) => {\r\n const {\r\n contentBlockContainer,\r\n linkItem\r\n } = props;\r\n\r\n if (linkItem) {\r\n return (\r\n \r\n { /* @ts-ignore */ }\r\n {linkItem}\r\n \r\n );\r\n } else {\r\n return (null);\r\n }\r\n};\r\n\r\nexport default ContentBlockView;\r\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\nexport interface IBusinessPartnerPromotionTermsParagraphProp {\n description: string;\n className: string;\n title?: string;\n titleClassName?: string;\n}\n\nexport const BusinessPartnerPromotionTermsParagraph: React.FC = ({\n title,\n description,\n className,\n titleClassName\n}) => {\n return (\n \n {title && {title}
}\n {description}
\n \n );\n};\n\nexport default BusinessPartnerPromotionTermsParagraph;\n","/*!\n * Copyright (c) Microsoft Corporation.\n * All rights reserved. See LICENSE in the project root for license information.\n */\n\nimport classnames from 'classnames';\nimport * as React from 'react';\n\nimport * as MsDyn365 from '@msdyn365-commerce/core';\nimport { Button, Alert, IModuleProps, Modal, ModalBody, ModalHeader } from '@msdyn365-commerce-modules/utilities';\nimport { promoteToSellerAsync } from '@msdyn365-commerce/retail-proxy/dist/DataActions/BusinessPartnersDataActions.g';\nimport { BusinessPartnerUser } from '@msdyn365-commerce/retail-proxy';\nimport { ObjectExtensions, StringExtensions } from '@msdyn365-commerce-modules/retail-actions';\nimport { Text } from '@msdyn365-commerce/core';\nimport { IBusinessPartnerPromotionData } from './business-partner-promotion.data';\nimport { IBusinessPartnerPromotionProps } from './business-partner-promotion.props.autogenerated';\nimport { BusinessPartnerPromotionTermsParagraph } from './components';\n\nexport interface IBusinessPartnerPromotionViewProps extends IBusinessPartnerPromotionProps {\n businessPartnerPromotionProps: IModuleProps;\n heading: React.ReactNode;\n notificationMessage?: React.ReactNode;\n sellerDescriptions: React.ReactNode[];\n termsOfServiceCheckbox: React.ReactNode;\n termsOfServiceModal: React.ReactNode;\n submitButton: React.ReactNode;\n}\n\nexport interface IBusinessPartnerPromotionState {\n showTermsOfService: boolean;\n showSubmitButton: boolean;\n termsOfServiceChecked: boolean;\n termsOfServiceModalOpened: boolean;\n errorMessage?: string;\n notificationMessage?: string;\n}\n\n/**\n * The class name root for the module.\n */\nexport const moduleClassName: string = 'ms-business-partner-promotion';\n\n/**\n *\n * BusinessPartnerPromotion component\n * @extends {React.PureComponent>}\n */\nclass BusinessPartnerPromotion extends React.Component<\n IBusinessPartnerPromotionProps,\n IBusinessPartnerPromotionState\n> {\n constructor(props: IBusinessPartnerPromotionProps) {\n super(props);\n this.state = {\n showTermsOfService: true,\n showSubmitButton: true,\n termsOfServiceChecked: false,\n termsOfServiceModalOpened: false,\n errorMessage: undefined,\n notificationMessage: undefined\n };\n }\n\n public render(): JSX.Element | null {\n const {\n showSubmitButton,\n showTermsOfService,\n termsOfServiceChecked,\n termsOfServiceModalOpened,\n errorMessage,\n notificationMessage\n } = this.state;\n const { resources, data, config } = this.props;\n const { heading, termsOfService } = config;\n const { authorizationErrorMessage } = resources;\n const { b2bUserInformation } = data;\n const canSubmit = this.isAdminUser(b2bUserInformation.result);\n let error: string | undefined = errorMessage;\n\n // do not show error message when the API is still in loading.\n if (!canSubmit && b2bUserInformation.status !== 'LOADING') {\n error = authorizationErrorMessage;\n }\n const btnEnabled = canSubmit && termsOfServiceChecked;\n\n const viewProps: IBusinessPartnerPromotionViewProps = {\n ...this.props,\n businessPartnerPromotionProps: {\n moduleProps: this.props,\n className: classnames(moduleClassName, moduleClassName)\n },\n heading: ,\n notificationMessage: this.renderNotificationBar(error, notificationMessage),\n sellerDescriptions: this.renderSellerDescriptions(),\n termsOfServiceCheckbox: showTermsOfService && (\n \n ),\n termsOfServiceModal: (\n \n {resources.termsOfServiceModalHeading}\n \n \n \n \n ),\n submitButton: showSubmitButton && (\n \n \n {resources.submitRequestLabel}\n \n
\n )\n };\n\n return this.props.renderView(viewProps);\n }\n\n private renderNotificationBar(errorMessage: string | undefined, notificationMessage: string | undefined): React.ReactNode {\n let notificationBar: React.ReactNode = null;\n if (errorMessage) {\n notificationBar = {errorMessage};\n } else if (notificationMessage) {\n notificationBar = {notificationMessage};\n }\n return notificationBar;\n }\n\n private renderSellerDescriptions(): React.ReactNode[] {\n const { config } = this.props;\n const results: React.ReactNode[] = [];\n const sellerDescriptions = config.sellerDescriptions;\n\n if (!sellerDescriptions) {\n return results;\n }\n\n return sellerDescriptions.map((description, idx1) => {\n return (\n \n
\n
\n {description.bulletPoints?.map((bulletPoint, idx2) => {\n return (\n \n );\n })}\n
\n