\r\n {showMobileSelectedFacets &&\r\n
\r\n
\r\n Clear Filters\r\n \r\n {\r\n mergedAttributeValueArrays.map((attribute, i) => {\r\n return (\r\n
\r\n );\r\n })\r\n }\r\n
\r\n
\r\n }\r\n
\r\n );\r\n }\r\n}\r\n\r\nMobileSelectedFacets.propTypes = {\r\n attributes: PropTypes.arrayOf(PropTypes.shape({\r\n Name: PropTypes.string,\r\n DisplayName: PropTypes.string,\r\n Values: PropTypes.arrayOf(PropTypes.shape({\r\n Name: PropTypes.string,\r\n Checked: PropTypes.bool,\r\n Count: PropTypes.number\r\n }))\r\n })).isRequired,\r\n onAttributeChange: PropTypes.func.isRequired,\r\n onClearAttributes: PropTypes.func.isRequired\r\n};\r\n\r\nexport default MobileSelectedFacets;","import React from 'react';\r\nimport Collapse from 'reactstrap/lib/Collapse';\r\n\r\nconst Category = ({ item, onSelect, isOpen, toggleOpen, onCategoryPage }) => {\r\n const Count = ({number}) =>
({number})\r\n return (\r\n
\r\n
\r\n
\r\n {onCategoryPage ?\r\n
\r\n {item.DisplayName}\r\n \r\n :
onSelect(item.Selected ? null : item)}>\r\n {item.DisplayName}\r\n \r\n }\r\n {item.Children && item.Children.length > 0 &&\r\n
\r\n {isOpen\r\n ? \r\n : \r\n }\r\n \r\n }\r\n
\r\n
\r\n {item.Children && item.Children.length > 0 &&\r\n
\r\n \r\n {item.Children.map(c =>\r\n
\r\n {onCategoryPage ?\r\n
\r\n {c.DisplayName}\r\n \r\n :
onSelect(c.Selected ? null : c)}>\r\n {c.DisplayName}\r\n \r\n }\r\n
\r\n )}\r\n
\r\n }\r\n
\r\n )\r\n}\r\n\r\nexport default Category;","import React from 'react';\r\nimport { translateResourceString } from '../../../util/translationUtility';\r\nimport Category from './Category';\r\n\r\nconst CategoriesContainer = ({categories, onSelect, openCategories, onToggleCategoryOpen, onCategoryPage}) => {\r\n return (\r\n
\r\n
\r\n {translateResourceString(\"/SearchApp/ProductCategoriesHeader\")}\r\n
\r\n {categories.map(c => \r\n
onToggleCategoryOpen(c.CategoryContentLinkId)}\r\n isOpen={openCategories.indexOf(c.CategoryContentLinkId) > -1}\r\n onCategoryPage={onCategoryPage}\r\n />\r\n )}\r\n \r\n )\r\n}\r\n\r\nexport default CategoriesContainer; ","import React, { useState } from 'react';\r\nimport Facets from '../Facets/Facets';\r\nimport PaginationContainer from '../Pagination/PaginationContainer';\r\nimport ProductTileContainer from './ProductTileContainer';\r\nimport PropTypes from 'prop-types';\r\nimport MoreButton from '../../components/MoreButton';\r\nimport MoreLink from '../../components/MoreLink';\r\nimport MobileSelectedFacets from '../Facets/MobileSelectedFacets';\r\nimport CategoriesList from '../Categories/CategoriesList';\r\nimport { translateResourceString } from '../../../util/translationUtility';\r\nimport DropdownOption from '../../components/DropdownOption';\r\n\r\nconst ProductSearchResultsContainer = ({ attributes,\r\n onAttributeChange,\r\n onClearAttributes,\r\n paginationViewModel,\r\n onCurrentItemsPerPageChange,\r\n onCurrentSortByChange,\r\n products,\r\n recommendedProducts,\r\n onResultClick,\r\n onShowMobileFacetsChange,\r\n expandedFacets,\r\n onToggleFacetExpanded,\r\n showMoreFacets,\r\n onToggleShowMoreFacet,\r\n promotionalArea,\r\n categories,\r\n onCategoryPage,\r\n onCategorySelect,\r\n selectedCategory,\r\n openCategories,\r\n onToggleCategoryOpen,\r\n searchString,\r\n onCurrentItemsPerPageChangeHref\r\n}) => {\r\n //const showClearAttributes = attributes.filter(\r\n // attribute => attribute.Values.filter(\r\n // value => value.Checked).length > 0).length > 0;\r\n const perMoreAmount = 10;\r\n const nextRequest = Math.min(paginationViewModel.CurrentItemsOnPage + perMoreAmount, paginationViewModel.ResultsTotal);\r\n const showMore = paginationViewModel.ResultsTotal > paginationViewModel.CurrentItemsOnPage;\r\n var recommendationsHeading = \"Trending in Category\";\r\n const promotionalAreaHtml = {\r\n __html: promotionalArea\r\n };\r\n const [isFacetsVisible, setIsFacetsVisible] = useState(false);\r\n const toggleFacetsVisibility = () => {\r\n setIsFacetsVisible(prevState => !prevState);\r\n };\r\n let product_sort_options = [\r\n new DropdownOption(translateResourceString(\"/SearchApp/SortOptions/Relevancy/Display\"), 'Relevancy', translateResourceString(\"/SearchApp/SortOptions/Relevancy/FullDisplay\")),\r\n new DropdownOption(translateResourceString(\"/SearchApp/SortOptions/NameAZ/Display\"), 'NameAZ', translateResourceString(\"/SearchApp/SortOptions/NameAZ/FullDisplay\")),\r\n new DropdownOption(translateResourceString(\"/SearchApp/SortOptions/NameZA/Display\"), 'NameZA', translateResourceString(\"/SearchApp/SortOptions/NameZA/FullDisplay\")),\r\n new DropdownOption(translateResourceString(\"/SearchApp/SortOptions/References/Display\"), 'References', translateResourceString(\"/SearchApp/SortOptions/References/FullDisplay\")),\r\n ];\r\n\r\n return (\r\n
\r\n
\r\n
\r\n \r\n Refine\r\n \r\n
\r\n
\r\n
\r\n
\r\n {promotionalArea &&
}\r\n
\r\n
\r\n {recommendedProducts && recommendedProducts.length > 0 &&\r\n
\r\n
\r\n
\r\n
{recommendationsHeading}
\r\n \r\n
\r\n
\r\n
\r\n }\r\n
\r\n {/* Not needed */}\r\n {/*
*/}\r\n
\r\n {showMore &&\r\n
\r\n
\r\n {\r\n evt.preventDefault();\r\n onCurrentItemsPerPageChange(nextRequest);\r\n }}\r\n href={onCurrentItemsPerPageChangeHref}\r\n >\r\n {translateResourceString(\"/SearchApp/LoadMoreProducts\")}\r\n \r\n
\r\n
\r\n }\r\n
\r\n
\r\n
\r\n );\r\n};\r\n\r\nProductSearchResultsContainer.propType = {\r\n attributes: PropTypes.arrayOf(PropTypes.shape({\r\n Name: PropTypes.string,\r\n DisplayName: PropTypes.string,\r\n Values: PropTypes.arrayOf(PropTypes.shape({\r\n Name: PropTypes.string,\r\n Checked: PropTypes.bool,\r\n Count: PropTypes.number\r\n }))\r\n })),\r\n onAttributeChange: PropTypes.func,\r\n onClearAttributes: PropTypes.func,\r\n paginationViewModel: PropTypes.shape({\r\n ResultsTotal: PropTypes.number,\r\n CurrentSortBy: PropTypes.string,\r\n CurrentItemsOnPage: PropTypes.number,\r\n ItemsPerPageIncrement: PropTypes.number\r\n }),\r\n onCurrentItemsPerPageChange: PropTypes.func,\r\n onCurrentSortByChange: PropTypes.func,\r\n products: PropTypes.arrayOf(PropTypes.shape({\r\n Name: PropTypes.string,\r\n Url: PropTypes.string,\r\n Image: PropTypes.shape({\r\n Url: PropTypes.string,\r\n Alt: PropTypes.string\r\n }),\r\n Description: PropTypes.string\r\n })),\r\n recommendedProducts: PropTypes.arrayOf(PropTypes.shape({\r\n RecommendationId: PropTypes.number,\r\n Name: PropTypes.string,\r\n Url: PropTypes.string,\r\n Image: PropTypes.shape({\r\n Url: PropTypes.string,\r\n Alt: PropTypes.string\r\n }),\r\n Description: PropTypes.string\r\n })),\r\n onShowMobileFacetsChange: PropTypes.func.isRequired,\r\n expandedFacets: PropTypes.arrayOf(PropTypes.string),\r\n onToggleFacetExpanded: PropTypes.func,\r\n showMoreFacets: PropTypes.arrayOf(PropTypes.string),\r\n onToggleShowMoreFacet: PropTypes.func,\r\n promotionalArea: PropTypes.string,\r\n onCurrentItemsPerPageChangeHref: PropTypes.string\r\n};\r\n\r\nexport default ProductSearchResultsContainer;\r\n","export const ARTICLES = 'articles';\r\nexport const PRODUCTS = 'products';\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { ARTICLES } from '../../constants/index.js';\r\nimport { translateResourceString } from '../../../util/translationUtility';\r\n\r\nconst ProductSearchResultsNonFound = ({\r\n zeroProductResultsMessage,\r\n popularCategories,\r\n suggestions,\r\n articlePaginationViewModel,\r\n onChangeView,\r\n searchString\r\n}) =>\r\n{ \r\n return (\r\n
\r\n {articlePaginationViewModel.ResultsTotal > 0 ?
: \"\"}\r\n
\r\n {suggestions && suggestions.length > 0 &&\r\n
\r\n
\r\n
\r\n
\r\n Did you mean {suggestions.map((suggestion, i) => {\r\n return (\r\n \r\n {suggestion.Text}\r\n {i + 1 < suggestions.length ? \", \" : \"\"}\r\n \r\n );\r\n })}\r\n
\r\n
\r\n
\r\n
\r\n }\r\n
\r\n
\r\n
{translateResourceString(\"/SearchApp/PopularCategoriesHeadline\")}
\r\n
\r\n {popularCategories.map((category, i) => \r\n (
\r\n ))}\r\n
\r\n
\r\n
\r\n
\r\n );\r\n};\r\n\r\nProductSearchResultsNonFound.propType = {\r\n onChangeView: PropTypes.func,\r\n};\r\n\r\nexport default ProductSearchResultsNonFound;\r\n\r\n","import React from 'react';\r\nimport ProductSearchResultsContainer from './ProductSearchResultsContainer';\r\nimport ProductSearchResultsNonFound from './ProductSearchResultsNonFound';\r\nimport PropTypes from 'prop-types';\r\nimport { translateResourceString } from '../../../util/translationUtility';\r\n\r\nconst ProductSearchResults = ({\r\n attributes,\r\n articlePaginationViewModel,\r\n onAttributeChange,\r\n onClearAttributes,\r\n paginationViewModel,\r\n onCurrentItemsPerPageChange,\r\n onCurrentSortByChange,\r\n onCurrentPageIndexChange,\r\n onChangeView,\r\n products,\r\n recommendedProducts,\r\n onResultClick,\r\n onShowMobileFacetsChange,\r\n expandedFacets,\r\n onToggleFacetExpanded,\r\n categoryName,\r\n categoryImageUrl,\r\n categoryImageAltText,\r\n categoryDescription,\r\n showMoreFacets,\r\n onToggleShowMoreFacet,\r\n promotionalArea,\r\n categories,\r\n onCategoryPage,\r\n onCategorySelect,\r\n selectedCategory,\r\n openCategories,\r\n onToggleCategoryOpen,\r\n searchString,\r\n zeroProductResultsMessage,\r\n popularCategories,\r\n suggestions,\r\n onCurrentItemsPerPageChangeHref\r\n}) => {\r\n return (\r\n
\r\n {searchString &&\r\n
{paginationViewModel.ResultsTotal} {translateResourceString(\"/SearchApp/ProductResultsText\")} '{searchString}'
\r\n }\r\n {onCategoryPage || products.length > 0 ?\r\n
\r\n :
\r\n }\r\n
\r\n );\r\n};\r\n\r\nProductSearchResults.propType = {\r\n attributes: PropTypes.arrayOf(PropTypes.shape({\r\n Name: PropTypes.string,\r\n DisplayName: PropTypes.string,\r\n Values: PropTypes.arrayOf(PropTypes.shape({\r\n Name: PropTypes.string,\r\n Checked: PropTypes.bool,\r\n Count: PropTypes.number\r\n }))\r\n })),\r\n onAttributeChange: PropTypes.func,\r\n onClearAttributes: PropTypes.func,\r\n paginationViewModel: PropTypes.shape({\r\n ResultsTotal: PropTypes.number,\r\n CurrentItemsPerPage: PropTypes.number,\r\n CurrentPageIndex: PropTypes.number,\r\n CurrentSortBy: PropTypes.string,\r\n CurrentItemsOnPage: PropTypes.number,\r\n ItemsPerPageIncrement: PropTypes.number\r\n }),\r\n articlePaginationViewModel: PropTypes.shape({\r\n CurrentPageIndex: PropTypes.number,\r\n CurrentItemsPerPage: PropTypes.number,\r\n ResultsTotal: PropTypes.number,\r\n CurrentItemsOnPage: PropTypes.number,\r\n ItemsPerPageIncrement: PropTypes.number\r\n }),\r\n onCurrentItemsPerPageChange: PropTypes.func,\r\n onCurrentSortByChange: PropTypes.func,\r\n onCurrentPageIndexChange: PropTypes.func,\r\n products: PropTypes.arrayOf(PropTypes.shape({\r\n Name: PropTypes.string,\r\n Url: PropTypes.string,\r\n Image: PropTypes.shape({\r\n Url: PropTypes.string,\r\n Alt: PropTypes.string\r\n }),\r\n Description: PropTypes.string\r\n })),\r\n recommendedProducts: PropTypes.arrayOf(PropTypes.shape({\r\n RecommendationId: PropTypes.number,\r\n Name: PropTypes.string,\r\n Url: PropTypes.string,\r\n Image: PropTypes.shape({\r\n Url: PropTypes.string,\r\n Alt: PropTypes.string\r\n }),\r\n Description: PropTypes.string\r\n })),\r\n expandedFacets: PropTypes.arrayOf(PropTypes.string),\r\n onToggleFacetExpanded: PropTypes.func,\r\n showMoreFacets: PropTypes.arrayOf(PropTypes.string),\r\n onToggleShowMoreFacet: PropTypes.func,\r\n promotionalArea: PropTypes.string,\r\n onCategoryPage: PropTypes.bool,\r\n onCategorySelect: PropTypes.func,\r\n onChangeView: PropTypes.func,\r\n onCurrentItemsPerPageChangeHref: PropTypes.string\r\n};\r\n\r\nexport default ProductSearchResults;\r\n","import React from 'react';\r\nconst Loading = ({children}) =>\r\n
\r\n {/*
\r\n \r\n
*/}\r\n {children}\r\n
;\r\n\r\nexport default Loading;","import React from 'react';\r\nimport Loading from './Loading';\r\nimport PropTypes from 'prop-types';\r\n\r\nconst WithLoading = function(Component) {\r\n let withLoading = function({ isLoading, ...rest }) {\r\n return (\r\n isLoading\r\n ?
\r\n \r\n \r\n :
\r\n );\r\n };\r\n withLoading.displayName = `WithLoading${Component.displayName}`;\r\n return withLoading;\r\n};\r\n\r\nWithLoading.propTypes = {\r\n Component: PropTypes.shape({\r\n isLoading: PropTypes.bool\r\n })\r\n};\r\n\r\nexport default WithLoading;","import React from 'react';\r\nimport ArticleSearchResults from '../Articles/ArticleSearchResults';\r\nimport ProductSearchResults from '../Products/ProductSearchResults';\r\nimport PropTypes from 'prop-types';\r\nimport {\r\n ARTICLES,\r\n PRODUCTS\r\n} from '../../constants/index.js';\r\nimport WithLoading from '../../components/WithLoading';\r\nimport { TabContent, TabPane } from 'reactstrap';\r\nimport { translateResourceString } from '../../../util/translationUtility';\r\n\r\nconst CombinedSearchResults = ({ articles,\r\n articlePaginationViewModel,\r\n onArticleCurrentItemsPerPageChange,\r\n onArticleCurrentPageIndexChange,\r\n onResultClick,\r\n attributes,\r\n onAttributeChange,\r\n onClearAttributes,\r\n onProductCurrentItemsPerPageChange,\r\n onProductCurrentSortByChange,\r\n onArticleCurrentSortByChange,\r\n onProductCurrentPageIndexChange,\r\n productPaginationViewModel,\r\n products,\r\n view,\r\n onChangeView,\r\n isLoading,\r\n onShowMobileFacetsChange,\r\n expandedFacets,\r\n onToggleFacetExpanded,\r\n showMoreFacets,\r\n onToggleShowMoreFacet,\r\n categories,\r\n onCategoryPage,\r\n onCategorySelect,\r\n selectedCategory,\r\n openCategories,\r\n onToggleCategoryOpen,\r\n searchString,\r\n articleAttributes,\r\n onArticleAttributeChange,\r\n expandedArticleFacets,\r\n zeroProductResultsMessage,\r\n popularCategories,\r\n zeroResourceResultsMessage,\r\n featuredResources,\r\n resourceTypes,\r\n suggestions,\r\n onCurrentProductsPerPageChangeHref,\r\n onCurrentArticlesPerPageChangeHrf\r\n}) => {\r\n const showArticles = view === ARTICLES;\r\n const showProducts = !showArticles;\r\n\r\n return (\r\n
\r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n );\r\n};\r\n\r\nconst ArticleSearchResultsWithLoading = WithLoading(ArticleSearchResults);\r\nconst ProductSearchResultsWithLoading = WithLoading(ProductSearchResults);\r\n\r\nCombinedSearchResults.propType = {\r\n articles: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n Title: PropTypes.string,\r\n Link: PropTypes.string,\r\n Description: PropTypes.string\r\n })\r\n ),\r\n articlePaginationViewModel: PropTypes.shape({\r\n CurrentPageIndex: PropTypes.number,\r\n CurrentItemsPerPage: PropTypes.number,\r\n ResultsTotal: PropTypes.number,\r\n CurrentItemsOnPage: PropTypes.number,\r\n ItemsPerPageIncrement: PropTypes.number\r\n }),\r\n onArticleCurrentItemsPerPageChange: PropTypes.func,\r\n onArticleCurrentPageIndexChange: PropTypes.func,\r\n onResultClick: PropTypes.func,\r\n attributes: PropTypes.arrayOf(PropTypes.shape({\r\n Name: PropTypes.string,\r\n DisplayName: PropTypes.string,\r\n Values: PropTypes.arrayOf(PropTypes.shape({\r\n Name: PropTypes.string,\r\n Checked: PropTypes.bool,\r\n Count: PropTypes.number\r\n }))\r\n })),\r\n onAttributeChange: PropTypes.func,\r\n onClearAttributes: PropTypes.func,\r\n onProductCurrentItemsPerPageChange: PropTypes.func, \r\n onProductCurrentSortByChange: PropTypes.func, \r\n onProductCurrentPageIndexChange: PropTypes.func, \r\n productPaginationViewModel: PropTypes.shape({\r\n ResultsTotal: PropTypes.number,\r\n CurrentItemsPerPage: PropTypes.number,\r\n CurrentPageIndex: PropTypes.number,\r\n CurrentSortBy: PropTypes.string,\r\n CurrentItemsOnPage: PropTypes.number,\r\n ItemsPerPageIncrement: PropTypes.number\r\n }),\r\n products: PropTypes.arrayOf(PropTypes.shape({\r\n Name: PropTypes.string,\r\n Url: PropTypes.string,\r\n Image: PropTypes.shape({\r\n Url: PropTypes.string,\r\n Alt: PropTypes.string\r\n }),\r\n Description: PropTypes.string\r\n })),\r\n view: PropTypes.string,\r\n onChangeView: PropTypes.func,\r\n onShowMobileFacetsChange: PropTypes.func.isRequired,\r\n expandedFacets: PropTypes.arrayOf(PropTypes.string),\r\n onToggleFacetExpanded: PropTypes.func,\r\n showMoreFacets: PropTypes.arrayOf(PropTypes.string),\r\n onToggleShowMoreFacet: PropTypes.func,\r\n categories: PropTypes.arrayOf(PropTypes.shape({})),\r\n onCategoryPage: PropTypes.bool,\r\n onCategorySelect: PropTypes.func,\r\n onCurrentProductsPerPageChangeHref: PropTypes.string\r\n};\r\n\r\nexport default CombinedSearchResults;\r\n","export function buildAttributesQueryString(attributes) {\r\n let attributeString = attributes.map(x => `${x.name};${x.value}`).reduce((prev, current) => prev + '|' + current, '');\r\n return attributeString;\r\n}\r\n\r\nexport function buildQueryString(searchString, attributes, productPaginationViewModel, articlePaginationViewModel, view, selectedCategory, articleAttributes) {\r\n let queryParams = {};\r\n if (searchString)\r\n queryParams.searchString = searchString;\r\n if (productPaginationViewModel.CurrentPageIndex)\r\n queryParams.p = productPaginationViewModel.CurrentPageIndex;\r\n if (productPaginationViewModel.CurrentItemsPerPage)\r\n queryParams.q = productPaginationViewModel.CurrentItemsPerPage;\r\n if (productPaginationViewModel.CurrentSortBy)\r\n queryParams.s = productPaginationViewModel.CurrentSortBy;\r\n const attributesQueryString = buildAttributesQueryString(attributes);\r\n if (attributesQueryString && attributesQueryString.length > 0)\r\n queryParams.c = attributesQueryString;\r\n if (articlePaginationViewModel && articlePaginationViewModel.CurrentPageIndex)\r\n queryParams.articlePageIndex = articlePaginationViewModel.CurrentPageIndex;\r\n if (articlePaginationViewModel && articlePaginationViewModel.CurrentItemsPerPage)\r\n queryParams.articlePageSize = articlePaginationViewModel.CurrentItemsPerPage;\r\n if (articlePaginationViewModel && articlePaginationViewModel.CurrentSortBy)\r\n queryParams.t = articlePaginationViewModel.CurrentSortBy;\r\n if (view)\r\n queryParams.view = view;\r\n if (selectedCategory)\r\n queryParams.categoryContentLinkId = selectedCategory.CategoryContentLinkId;\r\n const articleAttributesQueryString = buildAttributesQueryString(articleAttributes);\r\n if (articleAttributesQueryString && articleAttributesQueryString.length > 0)\r\n queryParams.r = articleAttributesQueryString;\r\n return serialize(queryParams);\r\n}\r\n\r\nexport function serialize(obj) {\r\n return '?' + Object.keys(obj).reduce(function (a, k) { a.push(k + '=' + encodeURIComponent(obj[k])); return a; }, []).join('&');\r\n}","export function buildSelectedAttributesFromModel(attributes) {\r\n const selectedAttributes = [];\r\n\r\n attributes.forEach(attribute => {\r\n if (attribute.Values) {\r\n const attributeValues = attribute.Values.filter(\r\n value => value.Checked && value.Checked === true);\r\n\r\n attributeValues.forEach(attributeValue => {\r\n selectedAttributes.push({\r\n name: attribute.Name,\r\n value: attributeValue.Name\r\n });\r\n });\r\n }\r\n });\r\n\r\n return selectedAttributes;\r\n}\r\n\r\nexport function buildFacetNamesFromModel(attributes) {\r\n if (!attributes) {\r\n return [];\r\n }\r\n\r\n return attributes.filter(attribute => attribute.Name)\r\n .map(attribute => attribute.Name);\r\n}\r\n\r\nexport function buildStateFromModel({\r\n SearchString,\r\n Products,\r\n Recommendations,\r\n View,\r\n FindClickTracking,\r\n Suggestions,\r\n Articles,\r\n PromotionalArea,\r\n ZeroProductResultsMessage,\r\n PopularCategories,\r\n ZeroResourceResultsMessage,\r\n FeaturedResources,\r\n ResourceTypes\r\n}) {\r\n const selectedCategory = Products && Products.CategoryFilters && Products.CategoryFilters.length > 0 ? getSelectedCategory(Products.CategoryFilters) : null;\r\n\r\n const selectedParentCategory = Products && Products.CategoryFilters \r\n ? Products && Products.CategoryFilters.find(c => c.Selected || c.Children.find(c => c.Selected))\r\n : null;\r\n\r\n const defaultOpenCategory = selectedParentCategory\r\n ? selectedParentCategory.CategoryContentLinkId\r\n : null;\r\n\r\n const productAttributes = getAttributes(Products);\r\n const articleAttributes = getAttributes(Articles);\r\n const selectedAttributes = buildSelectedAttributesFromModel(productAttributes);\r\n\r\n const state = {\r\n // Search and other search related state\r\n searchString: SearchString ? SearchString : SearchString,\r\n suggestions: Suggestions,\r\n promotionalArea: PromotionalArea,\r\n view: View,\r\n isLoading: false,\r\n findClickTrackingViewModel: FindClickTracking,\r\n showMobileFacets: false,\r\n zeroProductResultsMessage: ZeroProductResultsMessage,\r\n zeroResourceResultsMessage: ZeroResourceResultsMessage,\r\n\r\n // Products\r\n selectedAttributes: selectedAttributes,\r\n attributes: productAttributes,\r\n expandedFacets: expandedFacets(productAttributes, selectedAttributes),\r\n showMoreFacets: [],\r\n products: Products && Products.ProductItems ? Products.ProductItems : [],\r\n recommendedProducts: Recommendations ? getRecommendedProducts(Recommendations) : [],\r\n productPaginationViewModel: Products && Products.PaginationViewModel ? Products.PaginationViewModel : null,\r\n popularCategories: PopularCategories,\r\n onCurrentProductsPerPageChangeHref: \"\",\r\n \r\n // Product - Category Filters\r\n categories: Products && Products.CategoryFilters ? Products.CategoryFilters : [],\r\n selectedCategory: selectedCategory,\r\n openCategories: defaultOpenCategory ? [defaultOpenCategory] : [],\r\n\r\n // Article\r\n articles: Articles && Articles.ArticleItemViewModels ? Articles.ArticleItemViewModels : [],\r\n articleAttributes: articleAttributes,\r\n selectedArticleAttributes: buildSelectedAttributesFromModel(articleAttributes),\r\n articleShowMoreFacets: [],\r\n expandedArticleFacets: expandedArticleFacets(articleAttributes),\r\n articlePaginationViewModel: Articles && Articles.PaginationViewModel ? Articles.PaginationViewModel : null,\r\n featuredResources: FeaturedResources,\r\n resourceTypes: ResourceTypes,\r\n onCurrentArticlesPerPageChangeHrf: \"\"\r\n };\r\n\r\n return state;\r\n}\r\n\r\nfunction getRecommendedProducts(recommendations) {\r\n return recommendations.slice(0, 3).map(({ RecommendationId, TileViewModel }) => {\r\n return {\r\n RecommendationId,\r\n Name: TileViewModel.Name,\r\n Url: TileViewModel.Url,\r\n Image: TileViewModel.Image,\r\n Description: TileViewModel.Description\r\n };\r\n });\r\n}\r\n\r\nexport function getSelectedCategory(categories) {\r\n const flattenedCategories = flattenCategories(categories);\r\n const selected = flattenedCategories.filter(category => category.Selected && category.Selected === true);\r\n return selected.length > 0 ? selected[0] : null;\r\n}\r\n\r\nfunction flattenCategories(categories) {\r\n const flattenedCategories = [];\r\n categories.forEach(category => {\r\n flattenedCategories.push(category);\r\n if (category.Children && category.Children.length > 0) {\r\n flattenedCategories.push(...flattenCategories(category.Children.map(child => ({ ...child, ParentCategory: category }))));\r\n }\r\n });\r\n return flattenedCategories;\r\n}\r\n\r\nexport function getAttributes(viewModel) {\r\n return viewModel && viewModel.Filters && viewModel.Filters.Attributes ? viewModel.Filters.Attributes : [];\r\n}\r\n\r\nexport function expandedFacets(attributes, selectedAttributes) {\r\n const selectedAttributeNames = selectedAttributes.map(attribute => attribute.name);\r\n const orderedFacets = selectedAttributeNames\r\n .concat(attributes.filter(a => selectedAttributeNames.indexOf(a.Name) < 0).map(a => a.Name));\r\n const minLength = selectedAttributes.length;\r\n const maxLength = Math.min(3, attributes.length);\r\n const length = Math.max(maxLength, minLength);\r\n return orderedFacets.splice(0, length);\r\n}\r\n\r\nexport function expandedArticleFacets(articleAttributes){\r\n return articleAttributes.map(attribute => attribute.Name);\r\n}","import React from 'react';\r\n\r\n\r\nconst CategoryDetails = ({ name, description }) => {\r\n\r\n return (\r\n
\r\n
\r\n {name}\r\n
\r\n
\r\n
\r\n\r\n );\r\n}\r\n\r\nexport default CategoryDetails;\r\n","import React from 'react';\r\nimport CombinedSearchResults from './Features/Combined/CombinedSearchResults';\r\nimport createHistory from 'history/createBrowserHistory';\r\nimport fetch from 'cross-fetch';\r\nimport {\r\n ARTICLES,\r\n PRODUCTS\r\n} from './constants/index.js';\r\nimport {\r\n buildQueryString,\r\n} from './Infrastructure/urlBuilder.js';\r\nimport {\r\n buildStateFromModel,\r\n buildSelectedAttributesFromModel,\r\n buildFacetNamesFromModel,\r\n getSelectedCategory,\r\n getAttributes,\r\n expandedFacets,\r\n expandedArticleFacets\r\n} from './Infrastructure/modelBuilder.js';\r\nimport { trackClick } from './Infrastructure/find.js';\r\nimport ProductSearchResults from './Features/Products/ProductSearchResults';\r\nimport CategoryDetails from './Features/Categories/CategoryDetails';\r\nimport WithLoading from './components/WithLoading';\r\nimport { addResourceStrings, translateResourceString } from '../util/translationUtility'\r\n\r\nclass SearchApp extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = buildStateFromModel(props);\r\n\r\n this.onAttributeChange = this.onAttributeChange.bind(this);\r\n this.onArticleAttributeChange = this.onArticleAttributeChange.bind(this);\r\n this.setProducts = this.updateState.bind(this);\r\n this.onClearAttributes = this.onClearAttributes.bind(this);\r\n this.onProductCurrentItemsPerPageChange = this.onProductCurrentItemsPerPageChange.bind(this);\r\n this.onProductCurrentSortByChange = this.onProductCurrentSortByChange.bind(this);\r\n this.onArticleCurrentSortByChange = this.onArticleCurrentSortByChange.bind(this);\r\n this.onProductCurrentPageIndexChange = this.onProductCurrentPageIndexChange.bind(this);\r\n this.onArticleCurrentItemsPerPageChange = this.onArticleCurrentItemsPerPageChange.bind(this);\r\n this.onArticleCurrentPageIndexChange = this.onArticleCurrentPageIndexChange.bind(this);\r\n this.onChangeView = this.onChangeView.bind(this);\r\n this.onResultClick = this.onResultClick.bind(this);\r\n this.onShowMobileFacetsChange = this.onShowMobileFacetsChange.bind(this);\r\n this.onShowMobileFacetsToggle = this.onShowMobileFacetsToggle.bind(this);\r\n this.onToggleFacetExpanded = this.onToggleFacetExpanded.bind(this);\r\n this.anyProductsOrArticles = this.anyProductsOrArticles.bind(this);\r\n this.hasSearchString = this.hasSearchString.bind(this);\r\n this.isCategory = this.isCategory.bind(this);\r\n this.apiEndpoint = props.ApiEndpoint;\r\n this.clickTrackingApiEndpoint = props.ClickTrackingApiEndpoint;\r\n this.trackId = props.TrackId;\r\n this.twoLetterLanguageCode = props.TwoLetterLanguageCode;\r\n this.siteDefinitionId = props.SiteDefinitionId;\r\n this.onToggleShowMoreFacet = this.onToggleShowMoreFacet.bind(this);\r\n this.onCategorySelect = this.onCategorySelect.bind(this);\r\n this.onToggleCategoryOpen = this.onToggleCategoryOpen.bind(this);\r\n this.getInitialProductHref = this.getInitialProductHref.bind(this);\r\n this.getCurrentItemsPerPageChangeRequestedPageIndex = this.getCurrentItemsPerPageChangeRequestedPageIndex.bind(this);\r\n this.getInitialArticleHref = this.getInitialArticleHref.bind(this);\r\n this.getInitialRequestedItemsPerPageValue = this.getInitialRequestedItemsPerPageValue.bind(this);\r\n\r\n this.state.onCurrentProductsPerPageChangeHref = this.getInitialProductHref();\r\n this.state.onCurrentArticlesPerPageChangeHrf = this.getInitialArticleHref();\r\n\r\n // Category - not in state\r\n this.categoryName = props.Name;\r\n this.contentLinkId = props.ContentLinkId;\r\n this.categoryImageUrl = props.ImageUrl;\r\n this.categoryImageAltText = props.ImageAltText;\r\n this.categoryDescription = props.Description;\r\n\r\n addResourceStrings(props.LocalizationItems);\r\n }\r\n\r\n componentDidMount() {\r\n require('./SearchApp.css');\r\n this.history = createHistory();\r\n this.history.listen((location, action) => {\r\n if (location.state && location.state.view) {\r\n this.setState({ view: location.state.view });\r\n }\r\n this.fetchProductsUsingUrl(location.search);\r\n });\r\n }\r\n\r\n getInitialProductHref(){\r\n const {searchString, selectedAttributes, productPaginationViewModel, articlePaginationViewModel, selectedCategory, selectedArticleAttributes } = this.state;\r\n const requestedItemsPerPage = this.getInitialRequestedItemsPerPageValue(productPaginationViewModel);\r\n let tempProductPaginationViewModel = Object.assign({}, productPaginationViewModel);\r\n const requestedPageIndex = this.getCurrentItemsPerPageChangeRequestedPageIndex(tempProductPaginationViewModel, requestedItemsPerPage);\r\n tempProductPaginationViewModel.CurrentPageIndex = requestedPageIndex;\r\n tempProductPaginationViewModel.CurrentItemsPerPage = requestedItemsPerPage;\r\n\r\n return buildQueryString(searchString, selectedAttributes, tempProductPaginationViewModel, articlePaginationViewModel, PRODUCTS, selectedCategory, selectedArticleAttributes);\r\n }\r\n\r\n getInitialRequestedItemsPerPageValue(paginationViewModel) {\r\n const numberOfItemsToLoad = paginationViewModel?.ItemsPerPageIncrement || 10;\r\n if (paginationViewModel == null) {\r\n return numberOfItemsToLoad;\r\n }\r\n return Math.min(paginationViewModel.CurrentItemsOnPage + numberOfItemsToLoad, paginationViewModel.ResultsTotal);\r\n }\r\n\r\n getInitialArticleHref(){\r\n const {searchString, selectedAttributes, productPaginationViewModel, articlePaginationViewModel, selectedCategory, selectedArticleAttributes } = this.state;\r\n const requestedItemsPerPage = this.getInitialRequestedItemsPerPageValue(articlePaginationViewModel);\r\n let tempArticlePaginationViewModel = Object.assign({}, articlePaginationViewModel);\r\n const requestedPageIndex = this.getCurrentItemsPerPageChangeRequestedPageIndex(tempArticlePaginationViewModel, requestedItemsPerPage);\r\n tempArticlePaginationViewModel.CurrentPageIndex = requestedPageIndex;\r\n tempArticlePaginationViewModel.CurrentItemsPerPage = requestedItemsPerPage;\r\n\r\n return buildQueryString(searchString, selectedAttributes, productPaginationViewModel, tempArticlePaginationViewModel, ARTICLES, selectedCategory, selectedArticleAttributes);\r\n }\r\n\r\n updateState(searchResults) {\r\n const productAttributes = getAttributes(searchResults.Products);\r\n const articleAttributes = getAttributes(searchResults.Articles);\r\n\r\n const selectedAttributes = buildSelectedAttributesFromModel(productAttributes);\r\n\r\n this.setState({\r\n attributes: productAttributes,\r\n products: searchResults.Products.ProductItems ? searchResults.Products.ProductItems : [],\r\n productPaginationViewModel: searchResults.Products && searchResults.Products.PaginationViewModel ? searchResults.Products.PaginationViewModel : null,\r\n articlePaginationViewModel: searchResults.Articles && searchResults.Articles.PaginationViewModel ? searchResults.Articles.PaginationViewModel : null,\r\n selectedAttributes: selectedAttributes,\r\n expandedFacets: expandedFacets(productAttributes, selectedAttributes),\r\n isLoading: false,\r\n articles: searchResults.Articles && searchResults.Articles.ArticleItemViewModels ? searchResults.Articles.ArticleItemViewModels : [],\r\n categories: searchResults.Products.CategoryFilters ? searchResults.Products.CategoryFilters : [],\r\n selectedCategory: searchResults.Products.CategoryFilters && searchResults.Products.CategoryFilters.length > 0 ? getSelectedCategory(searchResults.Products.CategoryFilters) : null,\r\n articleAttributes: articleAttributes,\r\n selectedArticleAttributes: buildSelectedAttributesFromModel(articleAttributes),\r\n expandedArticleFacets: expandedArticleFacets(articleAttributes)\r\n });\r\n\r\n this.updateLoadMoreHrefStates(this.state.searchString, this.state.selectedAttributes, this.state.productPaginationViewModel,\r\n this.state.articlePaginationViewModel, this.state.view, this.state.selectedCategory, this.state.selectedArticleAttributes);\r\n\r\n this.updatePageCanonicals(this.state.view, this.state.productPaginationViewModel, this.state.articlePaginationViewModel);\r\n }\r\n\r\n updateLoadMoreHrefStates(searchString, selectedAttributes, productPaginationViewModel, articlePaginationViewModel, view, selectedCategory, selectedArticleAttributes) {\r\n // Need to keep the load more \"button\" href values up to date with the latest values\r\n // creating temp values because the load more buttons are future state of button click\r\n let tempProductPaginationViewModel = Object.assign({}, productPaginationViewModel);\r\n tempProductPaginationViewModel.CurrentItemsPerPage += tempProductPaginationViewModel.ItemsPerPageIncrement;\r\n const productsQueryString = buildQueryString(searchString, selectedAttributes, tempProductPaginationViewModel, articlePaginationViewModel, PRODUCTS, selectedCategory, selectedArticleAttributes);\r\n let tempArticlePaginationViewModel = Object.assign({}, articlePaginationViewModel);\r\n tempArticlePaginationViewModel.CurrentItemsPerPage += tempArticlePaginationViewModel.ItemsPerPageIncrement;\r\n const articlesQueryString = buildQueryString(searchString, selectedAttributes, productPaginationViewModel, tempArticlePaginationViewModel, ARTICLES, selectedCategory, selectedArticleAttributes);\r\n this.setState({ onCurrentProductsPerPageChangeHref: productsQueryString, onCurrentArticlesPerPageChangeHrf: articlesQueryString });\r\n }\r\n\r\n updatePageCanonicals(view, productPaginationViewModel, articlePaginationViewModel) {\r\n if (view === ARTICLES) {\r\n this.updateCanonicals(articlePaginationViewModel, 'articlePageSize');\r\n this.cleanupCanonicalPaginationString('q');\r\n } else {\r\n this.updateCanonicals(productPaginationViewModel, 'q');\r\n this.cleanupCanonicalPaginationString('articlePageSize');\r\n }\r\n }\r\n\r\n updateUrl({ searchString, selectedAttributes, productPaginationViewModel, articlePaginationViewModel, view, selectedCategory, selectedArticleAttributes }) {\r\n\r\n const queryString = buildQueryString(searchString, selectedAttributes, productPaginationViewModel, articlePaginationViewModel, view, selectedCategory, selectedArticleAttributes);\r\n\r\n this.updateLoadMoreHrefStates(searchString, selectedAttributes, productPaginationViewModel, articlePaginationViewModel, view, selectedCategory, selectedArticleAttributes);\r\n\r\n // Going to let history listener take care of it\r\n this.history.push({\r\n search: queryString,\r\n state: { view: view }\r\n });\r\n\r\n this.updatePageCanonicals(view, productPaginationViewModel, articlePaginationViewModel);\r\n }\r\n\r\n updateCanonicals({ CurrentItemsPerPage, ItemsPerPageIncrement, ResultsTotal }, paginationQueryString) {\r\n const canonicalElement = document.querySelector(\"link[rel='canonical']\"),\r\n canonicalNextElement = document.querySelector(\"link[rel='next']\"),\r\n canonicalPreviousElement = document.querySelector(\"link[rel='prev']\");\r\n\r\n // canonical\r\n if (canonicalElement) {\r\n const canonicalHref = new URL(canonicalElement.getAttribute('href'));\r\n if (CurrentItemsPerPage > ItemsPerPageIncrement) {\r\n canonicalHref.searchParams.set(paginationQueryString, CurrentItemsPerPage);\r\n } else {\r\n canonicalHref.searchParams.delete(paginationQueryString);\r\n }\r\n canonicalElement.setAttribute('href', canonicalHref.toString());\r\n }\r\n\r\n // canonical next\r\n const nextPageItems = Math.min(CurrentItemsPerPage + ItemsPerPageIncrement, ResultsTotal);\r\n if (canonicalNextElement) {\r\n const nextHref = new URL(canonicalNextElement.getAttribute('href'));\r\n\r\n if (CurrentItemsPerPage >= ResultsTotal) {\r\n canonicalNextElement.remove();\r\n } else {\r\n nextHref.searchParams.set(paginationQueryString, nextPageItems);\r\n canonicalNextElement.setAttribute('href', nextHref.toString());\r\n }\r\n } else {\r\n if (CurrentItemsPerPage < ResultsTotal) {\r\n let newCanonicalNextElement = document.createElement('link');\r\n\r\n // get href for canonical to create previous href\r\n const nextHref = new URL(canonicalElement.getAttribute('href'));\r\n nextHref.searchParams.set(paginationQueryString, nextPageItems);\r\n\r\n newCanonicalNextElement.setAttribute('href', nextHref.toString());\r\n newCanonicalNextElement.setAttribute('rel', 'next');\r\n\r\n // add the next canonical before canonical\r\n canonicalElement.before(newCanonicalNextElement);\r\n }\r\n }\r\n\r\n // canonical prev\r\n const previousPageItems = Math.ceil(CurrentItemsPerPage / ItemsPerPageIncrement) * ItemsPerPageIncrement - ItemsPerPageIncrement;\r\n if (canonicalPreviousElement) {\r\n if (CurrentItemsPerPage <= ItemsPerPageIncrement) {\r\n canonicalPreviousElement.remove();\r\n } else {\r\n const previousHref = new URL(canonicalPreviousElement.getAttribute('href'));\r\n\r\n if (previousPageItems > ItemsPerPageIncrement) {\r\n previousHref.searchParams.set(paginationQueryString, previousPageItems);\r\n } else {\r\n previousHref.searchParams.delete(paginationQueryString);\r\n }\r\n\r\n canonicalPreviousElement.setAttribute('href', previousHref.toString());\r\n }\r\n } else {\r\n // no previous canonical link so add if we are on page 2 or higher\r\n if (previousPageItems >= ItemsPerPageIncrement) {\r\n let newCanonicalPreviousElement = document.createElement('link');\r\n\r\n // get href for canonical to create previous href\r\n const previousHref = new URL(canonicalElement.getAttribute('href'));\r\n\r\n // if we are on page 3 or higher then add search query\r\n if (previousPageItems >= (ItemsPerPageIncrement * 2)) {\r\n previousHref.searchParams.set(paginationQueryString, previousPageItems);\r\n } else {\r\n previousHref.searchParams.delete(paginationQueryString);\r\n }\r\n\r\n newCanonicalPreviousElement.setAttribute('href', previousHref.toString());\r\n newCanonicalPreviousElement.setAttribute('rel', 'prev');\r\n\r\n // add the previous canonical before next if it exist otherwise before canonical\r\n if (canonicalNextElement) {\r\n canonicalNextElement.before(newCanonicalPreviousElement);\r\n } else {\r\n canonicalElement.before(newCanonicalPreviousElement);\r\n }\r\n }\r\n }\r\n }\r\n\r\n cleanupCanonicalPaginationString(paginationQueryStringToRemove) {\r\n const canonicalElement = document.querySelector(\"link[rel='canonical']\"),\r\n canonicalNextElement = document.querySelector(\"link[rel='next']\"),\r\n canonicalPreviousElement = document.querySelector(\"link[rel='prev']\"),\r\n removeQueryParam = (canonicalElement) => {\r\n if (canonicalElement) {\r\n const canonicalHref = new URL(canonicalElement.getAttribute('href'));\r\n canonicalHref.searchParams.delete(paginationQueryStringToRemove);\r\n canonicalElement.setAttribute('href', canonicalHref.toString());\r\n }\r\n };\r\n\r\n \r\n removeQueryParam(canonicalElement);\r\n removeQueryParam(canonicalNextElement);\r\n removeQueryParam(canonicalPreviousElement);\r\n }\r\n\r\n fetchProductsUsingUrl(queryString) {\r\n if(this.contentLinkId)\r\n {\r\n if(queryString && queryString.indexOf(\"?\") > -1)\r\n {\r\n queryString = `${queryString}&contentLinkId=${this.contentLinkId}`;\r\n }\r\n else\r\n {\r\n queryString = `?contentLinkId=${this.contentLinkId}`;\r\n }\r\n }\r\n this.setState({ isLoading: true });\r\n const url = `${this.apiEndpoint}${queryString}`;\r\n fetch(url)\r\n .then(response => response.json())\r\n .then(result => this.updateState(result));\r\n }\r\n\r\n onAttributeChange(name, value) {\r\n let found = false;\r\n let selectedAttributes = this.state.selectedAttributes;\r\n selectedAttributes.forEach((selectedAttribute, i) => {\r\n if (selectedAttribute.name === name && selectedAttribute.value === value) {\r\n found = true;\r\n\r\n // Remove it\r\n selectedAttributes.splice(i, 1);\r\n }\r\n });\r\n\r\n if (!found) {\r\n // Add it\r\n selectedAttributes.push({\r\n name: name,\r\n value: value\r\n });\r\n }\r\n\r\n const changes = {\r\n selectedAttributes: selectedAttributes\r\n };\r\n\r\n const newOptions = { ...this.state, ...changes };\r\n this.updateUrl(newOptions);\r\n }\r\n\r\n onArticleAttributeChange(name, value) {\r\n let found = false;\r\n const selectedArticleAttributes = this.state.selectedArticleAttributes;\r\n selectedArticleAttributes.forEach((selectedAttribute, i) => {\r\n if (selectedAttribute.name === name && selectedAttribute.value === value) {\r\n found = true;\r\n\r\n // Remove it\r\n selectedArticleAttributes.splice(i, 1);\r\n }\r\n });\r\n\r\n if (!found) {\r\n // Add it\r\n selectedArticleAttributes.push({\r\n name: name,\r\n value: value\r\n });\r\n }\r\n\r\n const newOptions = {\r\n ...this.state,\r\n selectedArticleAttributes: selectedArticleAttributes\r\n };\r\n\r\n this.updateUrl(newOptions);\r\n }\r\n\r\n onProductCurrentSortByChange(requestedSortBy) {\r\n const productPaginationViewModel = this.state.productPaginationViewModel;\r\n productPaginationViewModel.CurrentSortBy = requestedSortBy;\r\n const newOptions = { ...this.state, productPaginationViewModel };\r\n this.updateUrl(newOptions);\r\n }\r\n\r\n onArticleCurrentSortByChange(requestedSortBy) {\r\n const articlePaginationViewModel = this.state.articlePaginationViewModel;\r\n articlePaginationViewModel.CurrentSortBy = requestedSortBy;\r\n this.updateUrl({\r\n ...this.state,\r\n articlePaginationViewModel\r\n });\r\n }\r\n\r\n onClearAttributes() {\r\n const changes = { selectedAttributes: [] };\r\n const newOptions = { ...this.state, ...changes };\r\n this.updateUrl(newOptions);\r\n }\r\n\r\n getCurrentItemsPerPageChangeRequestedPageIndex(paginationViewModel, requestedItemsPerPage) {\r\n const { ResultsTotal = 0, CurrentPageIndex = 0 } = paginationViewModel || {};\r\n const firstItemNumberOnNewPage = (CurrentPageIndex || 0) * requestedItemsPerPage + 1;\r\n const requestedPageIndex = firstItemNumberOnNewPage > ResultsTotal\r\n ? Math.floor(ResultsTotal / requestedItemsPerPage)\r\n : CurrentPageIndex;\r\n\r\n return requestedPageIndex;\r\n }\r\n\r\n onProductCurrentItemsPerPageChange(requestedItemsPerPage) {\r\n // Need to possibly update the page request too\r\n const { productPaginationViewModel } = this.state;\r\n const requestedPageIndex = this.getCurrentItemsPerPageChangeRequestedPageIndex(productPaginationViewModel, requestedItemsPerPage);\r\n productPaginationViewModel.CurrentPageIndex = requestedPageIndex;\r\n productPaginationViewModel.CurrentItemsPerPage = requestedItemsPerPage;\r\n const newOptions = { ...this.state, productPaginationViewModel }\r\n\r\n this.updateUrl(newOptions);\r\n }\r\n\r\n onProductCurrentPageIndexChange(requestedPageIndex) {\r\n const { productPaginationViewModel } = this.state;\r\n productPaginationViewModel.CurrentPageIndex = requestedPageIndex;\r\n const newOptions = { ...this.state, productPaginationViewModel };\r\n this.updateUrl(newOptions);\r\n }\r\n\r\n onArticleCurrentItemsPerPageChange(requestedItemsPerPage) {\r\n // Need to possibly update the page request too\r\n const { articlePaginationViewModel } = this.state;\r\n const requestedPageIndex = this.getCurrentItemsPerPageChangeRequestedPageIndex(articlePaginationViewModel, requestedItemsPerPage);\r\n articlePaginationViewModel.CurrentPageIndex = requestedPageIndex;\r\n articlePaginationViewModel.CurrentItemsPerPage = requestedItemsPerPage;\r\n const newOptions = { ...this.state, articlePaginationViewModel }\r\n\r\n this.updateUrl(newOptions);\r\n }\r\n\r\n onArticleCurrentPageIndexChange(requestedPageIndex) {\r\n const { articlePaginationViewModel } = this.state;\r\n articlePaginationViewModel.CurrentPageIndex = requestedPageIndex;\r\n const newOptions = { ...this.state, articlePaginationViewModel };\r\n this.updateUrl(newOptions);\r\n }\r\n\r\n onCategorySelect(selectedCategory) {\r\n if(!this.isCategory()) {\r\n const changes = { selectedCategory: selectedCategory };\r\n if (this.state.productPaginationViewModel)\r\n changes.productPaginationViewModel = { ...this.state.productPaginationViewModel, \r\n CurrentItemsPerPage: this.state.productPaginationViewModel.ItemsPerPageIncrement };\r\n\r\n if(selectedCategory) {\r\n // reset open categories when setting since we only want selected category\r\n // to be open after selecting\r\n let newOpenCategories = [selectedCategory.CategoryContentLinkId];\r\n // check if selected category is a parent category\r\n if (this.state.categories &&\r\n this.state.categories.findIndex(parent => \r\n parent.CategoryContentLinkId === selectedCategory.CategoryContentLinkId) < 0) {\r\n // selected category is not a parent category so we need to find the parent\r\n // category to make sure it stays open but close all other open categories\r\n const parentCategory = this.state.categories.find(parent => \r\n parent.Children.findIndex(child => child.CategoryContentLinkId === selectedCategory.CategoryContentLinkId) >= 0);\r\n if (parentCategory) {\r\n newOpenCategories = [...newOpenCategories, parentCategory.CategoryContentLinkId];\r\n }\r\n }\r\n this.setState((prevState) =>({\r\n openCategories: newOpenCategories\r\n }));\r\n } else {\r\n changes.selectedAttributes = [];\r\n }\r\n const newOptions = { ...this.state, ...changes };\r\n this.updateUrl(newOptions);\r\n }\r\n }\r\n\r\n onToggleCategoryOpen(categoryContentLinkId) {\r\n this.setState((prevState) =>({\r\n openCategories: prevState.openCategories.indexOf(categoryContentLinkId) > -1\r\n ? prevState.openCategories.filter(id => id !== categoryContentLinkId)\r\n : [...prevState.openCategories, categoryContentLinkId]\r\n }));\r\n }\r\n\r\n /**\r\n * Updates current view (Products vs Articles)\r\n * @param {string} view Current View Name.\r\n * @returns {void}\r\n */\r\n onChangeView(view) {\r\n const changes = { view: view };\r\n const newOptions = { ...this.state, ...changes };\r\n this.updateUrl(newOptions);\r\n }\r\n\r\n /**\r\n * Tracking for Find\r\n * @param {string} hitId HitId for Find result.\r\n * @returns {void}\r\n */\r\n onResultClick(hitId) {\r\n // Call tracking api\r\n if (typeof this.state.findClickTrackingViewModel !== \"undefined\") {\r\n const { TrackId, TwoLetterLanguageCode, SiteDefinitionId, ClickTrackingApiEndpoint, SearchTerm } = this.state.findClickTrackingViewModel;\r\n trackClick(ClickTrackingApiEndpoint, hitId, TrackId, TwoLetterLanguageCode, SiteDefinitionId, SearchTerm);\r\n }\r\n }\r\n\r\n onShowMobileFacetsChange(showMobileFacets) {\r\n this.setState({ showMobileFacets });\r\n }\r\n\r\n onShowMobileFacetsToggle() {\r\n const { showMobileFacets } = this.state;\r\n this.setState({ showMobileFacets: !showMobileFacets });\r\n }\r\n\r\n onToggleFacetExpanded(facetName) {\r\n const { expandedFacets } = this.state;\r\n const index = expandedFacets.indexOf(facetName);\r\n if (index > -1) {\r\n expandedFacets.splice(index, 1);\r\n } else {\r\n expandedFacets.push(facetName);\r\n }\r\n this.setState({ expandedFacets });\r\n }\r\n\r\n onToggleShowMoreFacet(facetName) {\r\n const { showMoreFacets } = this.state;\r\n const index = showMoreFacets.indexOf(facetName);\r\n if (index > -1) {\r\n showMoreFacets.splice(index, 1);\r\n } else {\r\n showMoreFacets.push(facetName);\r\n }\r\n this.setState({ showMoreFacets });\r\n }\r\n\r\n anyProductsOrArticles() {\r\n const {\r\n articles,\r\n products\r\n } = this.state;\r\n\r\n const anyArticles = articles && articles.length > 0;\r\n const anyProducts = products && products.length > 0;\r\n return anyArticles || anyProducts;\r\n }\r\n\r\n hasSearchString() {\r\n const { searchString } = this.state;\r\n return searchString && searchString.length > 0;\r\n }\r\n\r\n isCategory() {\r\n return this.categoryName && this.categoryName.length > 0;\r\n }\r\n\r\n render() {\r\n const {\r\n searchString,\r\n attributes,\r\n products,\r\n productPaginationViewModel,\r\n isLoading,\r\n view,\r\n articles,\r\n articlePaginationViewModel,\r\n suggestions,\r\n showMobileFacets,\r\n expandedFacets,\r\n showMoreFacets,\r\n promotionalArea,\r\n categories,\r\n selectedCategory,\r\n openCategories,\r\n articleAttributes,\r\n expandedArticleFacets,\r\n zeroProductResultsMessage,\r\n popularCategories,\r\n zeroResourceResultsMessage,\r\n featuredResources,\r\n resourceTypes,\r\n onCurrentProductsPerPageChangeHref,\r\n onCurrentArticlesPerPageChangeHrf\r\n } = this.state;\r\n const isCategory = this.isCategory();\r\n const anyProductsOrArticles = this.anyProductsOrArticles();\r\n const hasSearchString = this.hasSearchString();\r\n\r\n return (\r\n
\r\n {/*
\r\n {showMobileFacets &&\r\n
this.onShowMobileFacetsChange(false)}\r\n />\r\n }\r\n */}\r\n
\r\n {isCategory ?\r\n
\r\n \r\n \r\n \r\n :\r\n
\r\n }\r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nconst ProductSearchResultsWithLoading = WithLoading(ProductSearchResults);\r\n\r\nexport default SearchApp;\r\n","import fetch from 'cross-fetch';\r\nimport {serialize} from './urlBuilder.js';\r\n\r\n/**\r\n * \r\n * @param {string} clickTrackingApiEndpoint Url for API Call.\r\n * @param {string} hitId HitId for Find Result.\r\n * @param {string} trackId TrackId for Find Search.\r\n * @param {string} twoLetterLanguageCode Two letter language code IE 'en' for Find search.\r\n * @param {string} siteDefinitionId GUID for site where search took place.\r\n * @param {string} searchTerm Term used in search.\r\n * @returns {void}\r\n */\r\nexport function trackClick(clickTrackingApiEndpoint, hitId, trackId, twoLetterLanguageCode, siteDefinitionId, searchTerm) {\r\n const queryParameters = {\r\n trackId: trackId,\r\n twoLetterLanguageCode: twoLetterLanguageCode,\r\n siteDefinitionId: siteDefinitionId,\r\n searchTerm: searchTerm,\r\n hitId: hitId\r\n };\r\n const queryString = serialize(queryParameters);\r\n const url = `${clickTrackingApiEndpoint}${queryString}`;\r\n fetch(url);\r\n}","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport { Button } from 'reactstrap'\r\n\r\nconst EditListModalLink = ({\r\n AdditionalClasses = \"\",\r\n Color = \"\",\r\n Size = \"\",\r\n ToggleEditListModal,\r\n Name\r\n}) => {\r\n\r\n return (\r\n\r\n
\r\n );\r\n};\r\n\r\nEditListModalLink.propType = {\r\n AdditionalClasses: PropTypes.string,\r\n Color: PropTypes.string,\r\n Size: PropTypes.string,\r\n ToggleEditListModal: PropTypes.func.isRequired,\r\n Name: PropTypes.string.isRequired\r\n};\r\n\r\nexport default EditListModalLink;\r\n","import React from 'react'\r\nimport { Tab } from 'react-tabs'\r\nimport PropTypes from 'prop-types'\r\nimport EditListModalLink from './Features/EditList/EditListModalLink'\r\n\r\nconst WishlistsTab = ({ \r\n Name, \r\n IsActive, \r\n ToggleEditListModal \r\n}) => {\r\n return (\r\n
\r\n {Name}
\r\n \r\n \r\n );\r\n};\r\n\r\nWishlistsTab.propType = {\r\n Name: PropTypes.string.isRequired,\r\n IsActive: PropTypes.bool,\r\n ToggleEditListModal: PropTypes.func\r\n};\r\n\r\nexport default WishlistsTab;\r\n","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport { translateResourceString } from '../../../util/translationUtility';\r\n\r\nconst NewListModalLink = ({\r\n ToggleNewListModal\r\n}) => {\r\n\r\n return (\r\n
\r\n );\r\n};\r\n\r\nNewListModalLink.propType = {\r\n ToggleNewListModal: PropTypes.func.isRequired\r\n};\r\n\r\nexport default NewListModalLink;\r\n","import React from 'react'\r\nimport { TabList } from 'react-tabs'\r\nimport PropTypes from 'prop-types'\r\nimport WishlistsTab from './WishlistsTab'\r\nimport NewListModalLink from './Features/NewList/NewListModalLink';\r\n\r\nconst WishlistsTabList = ({\r\n Lists = [],\r\n ToggleNewListModal,\r\n ToggleEditListModal,\r\n ActiveTabIndex\r\n}) => {\r\n return (\r\n
\r\n \r\n {\r\n Lists.map((list, i) =>\r\n \r\n )\r\n }\r\n \r\n\r\n \r\n
\r\n );\r\n};\r\n\r\nWishlistsTabList.propType = {\r\n Lists: PropTypes.array.isRequired,\r\n ToggleNewListModal: PropTypes.func.isRequired,\r\n ToggleEditListModal: PropTypes.func.isRequired,\r\n ActiveTabIndex: PropTypes.number.isRequired\r\n};\r\n\r\nexport default WishlistsTabList;\r\n","import React, { useRef } from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport { Button } from 'reactstrap'\r\nimport { translateResourceString } from '../util/translationUtility'\r\n\r\nconst WishlistProduct = ({\r\n Id,\r\n Name,\r\n ImageUrl,\r\n SKU,\r\n Link,\r\n Price,\r\n ListPrice,\r\n Quantity,\r\n ListIndex,\r\n RemoveProduct,\r\n ToggleCopyModal,\r\n ProductCommand,\r\n ListId,\r\n PricesAreHidden,\r\n UpdateQty,\r\n AddToCart,\r\n TotalPrice,\r\n isUpdating,\r\n GoogleTagManagerProductFieldObject\r\n\r\n}) => {\r\n\r\n const qty = useRef(Quantity)\r\n\r\n const prepareCopyData = (e, removeAfter = false) => {\r\n e.preventDefault()\r\n ProductCommand({\r\n ListId: ListId,\r\n ProductId: Id,\r\n RemoveAfter: removeAfter\r\n })\r\n ToggleCopyModal(true)\r\n }\r\n\r\n const onQuantityChange = () => {\r\n if (parseInt(qty.current.value) === 0) {\r\n RemoveProduct(SKU, ListIndex)\r\n qty.current.value = 1\r\n } else {\r\n UpdateQty(SKU, ListId, qty.current.value)\r\n }\r\n }\r\n\r\n return (\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n
{SKU}\r\n
\r\n {translateResourceString(\"/Wishlists/Items/QuantityLabel\")}:\r\n { onQuantityChange(); }}\r\n />\r\n \r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n {translateResourceString(\"/Wishlists/Items/UnitPriceLabel\")}: {ListPrice &&
{ListPrice}}{Price}\r\n
{translateResourceString(\"/Wishlists/Items/TotalPriceLabel\")}: {TotalPrice}
\r\n
\r\n\r\n
\r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n );\r\n};\r\n\r\nWishlistProduct.propType = {\r\n AddToCartEndpoint: PropTypes.string.isRequired,\r\n Id: PropTypes.number,\r\n ImageUrl: PropTypes.string,\r\n Link: PropTypes.string,\r\n ListId: PropTypes.string.isRequired,\r\n ListIndex: PropTypes.number,\r\n ListPrice: PropTypes.string,\r\n Name: PropTypes.string,\r\n Price: PropTypes.string,\r\n PricesAreHidden: PropTypes.bool.isRequired,\r\n ProductCommand: PropTypes.shape({\r\n ListId: PropTypes.string.isRequired,\r\n ProductId: PropTypes.number.isRequired,\r\n RemoveAfter: PropTypes.bool.isRequired\r\n }).isRequired,\r\n Quantity: PropTypes.number,\r\n RemoveProduct: PropTypes.func,\r\n SKU: PropTypes.string,\r\n ToggleCopyModal: PropTypes.func\r\n};\r\n\r\nexport default WishlistProduct;\r\n","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport { Button } from 'reactstrap'\r\n\r\nconst ListsModalLink = ({\r\n AdditionalClasses = \"\",\r\n Color = \"\",\r\n Size = \"\",\r\n LinkText,\r\n ToggleListsModal\r\n}) => {\r\n\r\n return (\r\n
\r\n );\r\n};\r\n\r\nListsModalLink.propType = {\r\n AdditionalClasses: PropTypes.string,\r\n LinkText: PropTypes.string.isRequired,\r\n ToggleListsModal: PropTypes.func.isRequired\r\n};\r\n\r\nexport default ListsModalLink;\r\n","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport { Button } from 'reactstrap'\r\n\r\nconst PrintModalLink = ({\r\n TogglePrintModal\r\n}) => {\r\n\r\n return (\r\n
\r\n );\r\n};\r\n\r\nPrintModalLink.propType = {\r\n TogglePrintModal: PropTypes.func.isRequired\r\n};\r\n\r\nexport default PrintModalLink;\r\n","const miniCart = window && window.MiniCart || {}\r\nconst client = {\r\n refresh() {\r\n return miniCart.refresh && miniCart.refresh();\r\n },\r\n show() {\r\n miniCart.show && miniCart.show();\r\n },\r\n hide() {\r\n miniCart.hide && miniCart.hide();\r\n },\r\n refreshAndShow() {\r\n miniCart.refreshAndShow && miniCart.refreshAndShow();\r\n }\r\n}\r\n\r\nexport default client;","import React, { useState, useEffect } from 'react'\r\nimport { TabPanel } from 'react-tabs'\r\nimport { Button } from 'reactstrap'\r\nimport axios from 'axios';\r\nimport PropTypes from 'prop-types'\r\nimport WishlistProduct from './WishlistProduct'\r\nimport ListsModalLink from './Features/ListsModal/ListsModalLink'\r\nimport PrintModalLink from './Features/PrintModal/PrintModalLink'\r\nimport EditListModalLink from './Features/EditList/EditListModalLink'\r\nimport miniCartClient from '../util/miniCartClient'\r\nimport { translateResourceString } from '../util/translationUtility';\r\n\r\nconst WishlistsTabPanels = ({\r\n Lists = [],\r\n ToggleEditListModal,\r\n ToggleListsModal,\r\n UpdateLists,\r\n ToggleCopyModal,\r\n ProductCommand,\r\n TogglePrintModal,\r\n PricesAreHidden = false,\r\n AddToCartEndpoint,\r\n AddListToCartEndpoint,\r\n UpdateProductEndpoint,\r\n RemoveItemEndpoint\r\n}) => {\r\n const [itemsUpdating, setItemsUpdating] = useState([]);\r\n const [quantityUpdateRequests, setQuantityUpdateRequests] = useState([]);\r\n\r\n useEffect(() => {\r\n handleUpdateQtyRequest();\r\n });\r\n\r\n const removeProduct = (sku, listIndex) => {\r\n if (Lists[listIndex].Items && Lists[listIndex].Items.length > 0) {\r\n if (window.confirm('Are you sure you wish to delete this product?')) {\r\n Remove(RemoveItemEndpoint, sku, listIndex)\r\n }\r\n }\r\n }\r\n\r\n const updateProducts = (sku, listIndex) => {\r\n let newItems = Lists[listIndex].Items.filter(product => product.SKU !== sku)\r\n let newList = [...Lists.slice(0, listIndex), { Name: Lists[listIndex].Name, Items: newItems }, ...Lists.slice(listIndex + 1, Lists.length)]\r\n UpdateLists(newList)\r\n }\r\n\r\n const Remove = (endpoint, sku, listIndex) => {\r\n axios.post(endpoint, {\r\n listName: Lists[listIndex].Name,\r\n sku: sku\r\n })\r\n .then(function (response) {\r\n switch (response.data) {\r\n case 'OK':\r\n updateProducts(sku, listIndex)\r\n break\r\n case 'BadRequest':\r\n alert('Invalid parameters')\r\n break\r\n case 'InternalServerError':\r\n alert('Something went wrong')\r\n break\r\n default:\r\n console.error('Unhandled Response.')\r\n break \r\n }\r\n })\r\n .catch(function (error) {\r\n console.log(error)\r\n });\r\n }\r\n\r\n const AddToCart = (sku, quantity, listIndex) => {\r\n axios.post(AddToCartEndpoint, {\r\n code: sku,\r\n quantity: quantity\r\n },\r\n {\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'X-Requested-With': 'XMLHttpRequest',\r\n }\r\n })\r\n .then(function (response) {\r\n //console.log(response.data);\r\n if (response.status === 200) {\r\n if (response.data && response.data.hasError) {\r\n const message = response.data[\"errorMessage\"];\r\n if (message)\r\n alert(message)\r\n else\r\n alert('Unable to add product to cart')\r\n } else {\r\n if(window.gtmWishListProducts){\r\n const wishListGtm = window.gtmWishListProducts.filter(x => x.wishListName == Lists[listIndex].Name);\r\n const productGtm = wishListGtm[0].GtmProducts.filter(x => x.id == sku);\r\n window.gtm.addToCart(quantity, productGtm[0]);\r\n miniCartClient.refreshAndShow();\r\n }\r\n }\r\n }\r\n })\r\n .catch(function (error) {\r\n console.log(error)\r\n })\r\n }\r\n\r\n const setItemUpdating = (itemSku, isUpdating) => {\r\n if (isUpdating && !itemsUpdating.includes(itemSku)) {\r\n setItemsUpdating([...itemsUpdating, itemSku]);\r\n }\r\n if (!isUpdating && itemsUpdating.includes(itemSku)) {\r\n setItemsUpdating(itemsUpdating.filter(x => { return x !== itemSku; }));\r\n }\r\n }\r\n\r\n const UpdateQty = (sku, listName, quantity) => {\r\n setItemUpdating(sku, true);\r\n setQuantityUpdateRequests([...quantityUpdateRequests, { sku, listName, quantity: parseInt(quantity) }]);\r\n }\r\n\r\n const handleUpdateQtyRequest = async () => {\r\n if (quantityUpdateRequests.length > 0) {\r\n let request = quantityUpdateRequests.shift();\r\n\r\n let response = await axios.post(UpdateProductEndpoint, {\r\n listName: request.listName,\r\n sku: request.sku,\r\n newQuantity: request.quantity\r\n });\r\n\r\n handleUpdateQtyResponse(response, request.sku, request.listName, request.quantity);\r\n }\r\n }\r\n\r\n const handleUpdateQtyResponse = (response, sku, listName, quantity) => {\r\n switch (response.data) {\r\n case 'OK':\r\n updateProductQty(listName, sku, quantity)\r\n break\r\n case 'BadRequest':\r\n alert('Invalid parameters')\r\n break\r\n case 'InternalServerError':\r\n alert('Something went wrong')\r\n break\r\n default:\r\n console.error('Unhandled Response.')\r\n break\r\n }\r\n\r\n setItemUpdating(sku, false);\r\n }\r\n\r\n const updateProductQty = (listName, sku, quantity) => {\r\n let listIndex = Lists.findIndex(x => x.Name === listName)\r\n let productIndex = Lists[listIndex].Items.findIndex(x => x.SKU === sku)\r\n let product = Lists[listIndex].Items[productIndex]\r\n product.Quantity = quantity\r\n const replace = Number(product.Price.replace(/[^0-9.]/g, ''));\r\n if (!isNaN(replace)) {\r\n product.TotalPrice = (replace * quantity).toLocaleString('en-us', { style: 'currency', currency: 'USD' })\r\n } else {\r\n product.TotalPrice = \"Nan\";\r\n }\r\n\r\n let newItems = [\r\n ...Lists[listIndex].Items.slice(0, productIndex),\r\n product,\r\n ...Lists[listIndex].Items.slice(productIndex + 1, Lists[listIndex].Items.length)\r\n ]\r\n\r\n let newList = [\r\n ...Lists.slice(0, listIndex),\r\n {\r\n Name: Lists[listIndex].Name,\r\n Items: newItems\r\n },\r\n ...Lists.slice(listIndex + 1, Lists.length)\r\n ]\r\n\r\n UpdateLists(newList)\r\n }\r\n\r\n const addListToCart = (listName) => {\r\n axios.post(AddListToCartEndpoint, { listName: listName },\r\n {\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'X-Requested-With': 'XMLHttpRequest',\r\n }\r\n })\r\n .then(function (response) {\r\n //console.log(response.data);\r\n if (response.status === 200) {\r\n if (response.data && response.data.hasError) {\r\n const message = response.data[\"errorMessages\"];\r\n if (message)\r\n alert(message)\r\n else\r\n alert('Unable to add list to cart')\r\n } else {\r\n if(window.gtmWishListProducts){\r\n const wishList = window.gtmWishListProducts.filter(x => x.wishListName == listName);\r\n window.gtm.bulkAddToCart(wishList[0].GtmProducts);\r\n }\r\n\r\n miniCartClient.refreshAndShow();\r\n }\r\n }\r\n })\r\n .catch(function (error) {\r\n console.log(error)\r\n })\r\n }\r\n\r\n return (\r\n
\r\n {\r\n Lists.map((list, i) =>\r\n
\r\n \r\n
{list.Name}
\r\n
\r\n
\r\n
\r\n {/*
*/}\r\n
\r\n
\r\n
\r\n - \r\n {\r\n list.Items.map((item, j) =>\r\n \r\n )\r\n }\r\n
\r\n
\r\n \r\n )\r\n }\r\n
\r\n );\r\n};\r\n\r\nWishlistsTabPanels.propType = {\r\n Lists: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n Name: PropTypes.string,\r\n Items: PropTypes.array\r\n })\r\n ),\r\n ToggleEditListModal: PropTypes.func.isRequired,\r\n ToggleListsModal: PropTypes.func.isRequired,\r\n UpdateLists: PropTypes.func.isRequired,\r\n ToggleCopyModal: PropTypes.func.isRequired,\r\n ProductCommand: PropTypes.shape({\r\n ListId: PropTypes.string.isRequired,\r\n ProductId: PropTypes.number.isRequired,\r\n RemoveAfter: PropTypes.bool.isRequired\r\n }).isRequired,\r\n TogglePrintModal: PropTypes.func.isRequired,\r\n PricesAreHidden: PropTypes.bool,\r\n AddToCartEndpoint: PropTypes.string.isRequired,\r\n AddListToCartEndpoint: PropTypes.string.isRequired,\r\n UpdateProductEndpoint: PropTypes.string.isRequired,\r\n RemoveItemEndpoint: PropTypes.string.isRequired\r\n};\r\n\r\nexport default WishlistsTabPanels;\r\n","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport { Modal, ModalHeader, ModalBody } from 'reactstrap'\r\nimport NewListInput from '../../Components/NewListInput';\r\n\r\nconst NewListModal = ({\r\n Lists,\r\n UpdateLists,\r\n IsOpen,\r\n ToggleNewListModal,\r\n SelectActiveTab = null,\r\n CreateListEndpoint\r\n}) => {\r\n return (\r\n
ToggleNewListModal(false)} centered={true} contentClassName=\"list-modal new-list-modal form-gray p-0\" role=\"document\">\r\n ToggleNewListModal(false)} wrapTag=\"div\" tag=\"span\" className=\"headline headline-sm\">\r\n Create a List\r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nNewListModal.propType = {\r\n Lists: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n Name: PropTypes.string\r\n })\r\n ).isRequired,\r\n UpdateLists: PropTypes.func.isRequired,\r\n IsOpen: PropTypes.bool.isRequired,\r\n ToggleNewListModal: PropTypes.func.isRequired,\r\n SelectActiveTab: PropTypes.func,\r\n CreateListEndpoint: PropTypes.string.isRequired\r\n};\r\n\r\nexport default NewListModal;\r\n","import React from 'react'\r\nimport { Tab } from 'react-tabs'\r\nimport PropTypes from 'prop-types'\r\n\r\nconst ModalTab = ({ \r\n Name, \r\n IsActive \r\n}) => {\r\n return (\r\n
\r\n {Name}
\r\n \r\n );\r\n};\r\n\r\nModalTab.propType = {\r\n Name: PropTypes.string.isRequired,\r\n IsActive: PropTypes.bool\r\n};\r\n\r\nexport default ModalTab;","import React from 'react'\r\nimport { TabList } from 'react-tabs'\r\nimport PropTypes from 'prop-types'\r\nimport ModalTab from './ModalTab'\r\nimport NewListInput from '../../Components/NewListInput'\r\nimport { translateResourceString } from '../../../util/translationUtility'\r\n\r\nconst ModalTabList = ({\r\n Lists = [],\r\n UpdateLists,\r\n ActiveTabIndex,\r\n SelectActiveTab = null,\r\n CreateListEndpoint\r\n}) => {\r\n return (\r\n
\r\n \r\n {\r\n Lists.map((list, i) =>\r\n \r\n )\r\n }\r\n
\r\n \r\n
{translateResourceString(\"/Wishlists/ViewAndAddModal/CreateListLabel\")}
\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nModalTabList.propType = {\r\n Lists: PropTypes.array.isRequired,\r\n UpdateLists: PropTypes.func.isRequired,\r\n ActiveTabIndex: PropTypes.number.isRequired,\r\n SelectActiveTab: PropTypes.func,\r\n CreateListEndpoint: PropTypes.string.isRequired\r\n};\r\n\r\nexport default ModalTabList;\r\n","import React from 'react'\r\nimport { TabPanel } from 'react-tabs'\r\nimport PropTypes from 'prop-types'\r\nimport ProductItem from '../../Components/ProductItem'\r\n\r\nconst ModalTabPanels = ({\r\n Lists = []\r\n}) => {\r\n return (\r\n
\r\n {\r\n Lists.map((list, i) =>\r\n
\r\n {\r\n list.Items.map((item, j) =>\r\n \r\n )\r\n }\r\n \r\n )\r\n }\r\n
\r\n );\r\n};\r\n\r\nModalTabPanels.propType = {\r\n Lists: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n Name: PropTypes.string,\r\n Items: PropTypes.array\r\n })\r\n ).isRequired\r\n};\r\n\r\nexport default ModalTabPanels;","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport { Tabs } from 'react-tabs'\r\nimport ModalTab from './ModalTab'\r\nimport ModalTabList from './ModalTabList'\r\nimport ModalTabPanels from './ModalTabPanels'\r\nimport { Modal, ModalHeader, ModalBody } from 'reactstrap'\r\nimport { translateResourceString } from '../../../util/translationUtility'\r\n\r\nconst ListsModal = ({\r\n Lists = [],\r\n UpdateLists,\r\n ListsModalIsOpen,\r\n ToggleListsModal,\r\n ActiveTabIndex = 0,\r\n SelectActiveTab = null,\r\n CreateListEndpoint\r\n}) => {\r\n return (\r\n
ToggleListsModal(false)}\r\n centered={true}\r\n className=\"modal-lg\"\r\n contentClassName=\"list-modal\"\r\n role=\"document\">\r\n ToggleListsModal(false)} wrapTag=\"div\" tag=\"span\" className=\"headline headline-sm\">{translateResourceString(\"/Wishlists/ViewAndAddModal/Header\")}\r\n \r\n \r\n
\r\n { SelectActiveTab(index); ToggleListsModal(false); }}>\r\n {ModalTabPanels({ Lists: Lists })}\r\n {ModalTabList({ \r\n Lists: Lists, \r\n UpdateLists: UpdateLists,\r\n ActiveTabIndex: ActiveTabIndex,\r\n SelectActiveTab: SelectActiveTab,\r\n CreateListEndpoint: CreateListEndpoint\r\n })}\r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nEditListModal.propType = {\r\n Lists: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n Name: PropTypes.string\r\n })\r\n ).isRequired,\r\n ListName: PropTypes.string.isRequired,\r\n UpdateLists: PropTypes.func.isRequired,\r\n EditListModalIsOpen: PropTypes.bool.isRequired,\r\n ToggleEditListModal: PropTypes.func.isRequired,\r\n CreateListEndpoint: PropTypes.string.isRequired,\r\n RenameListEndpoint: PropTypes.string.isRequired,\r\n DeleteListEndpoint: PropTypes.string.isRequired,\r\n AddItemEndpoint: PropTypes.string.isRequired\r\n};\r\n\r\nexport default EditListModal;\r\n","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\n\r\nconst CopyModalTab = ({ \r\n Name,\r\n CopyProduct\r\n }) => {\r\n return (\r\n CopyProduct(Name)}>\r\n {Name}
\r\n \r\n );\r\n};\r\n\r\nCopyModalTab.propType = {\r\n Name: PropTypes.string.isRequired,\r\n CopyProduct: PropTypes.func\r\n};\r\n\r\nexport default CopyModalTab;","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport CopyModalTab from './CopyModalTab'\r\nimport NewListInput from '../../Components/NewListInput'\r\nimport ProductItem from '../../Components/ProductItem'\r\nimport { Modal, ModalHeader, ModalBody } from 'reactstrap'\r\nimport axios from 'axios';\r\nimport { translateResourceString } from '../../../util/translationUtility';\r\n\r\nconst CopyModal = ({\r\n Lists = [],\r\n UpdateLists,\r\n CopyModalIsOpen,\r\n ToggleCopyModal,\r\n ProductCommand,\r\n ToggleNotification,\r\n CopyItemNotificationText,\r\n MoveItemNotificationText,\r\n AddItemEndpoint,\r\n RemoveItemEndpoint,\r\n CreateListEndpoint\r\n}) => {\r\n\r\n let product = null\r\n const originalListIndex = Lists.findIndex(x => x.Name === ProductCommand.ListId)\r\n if (originalListIndex !== -1) product = Lists[originalListIndex].Items.find(x => x.Id === ProductCommand.ProductId)\r\n\r\n const copyProduct = (targetListName) => {\r\n axios.post(AddItemEndpoint, {\r\n listName: targetListName,\r\n skus: { [product.SKU]: product.Quantity }\r\n })\r\n .then(function (response) {\r\n switch (response.data) {\r\n case 'OK':\r\n const index = Lists.findIndex(x => x.Name === targetListName)\r\n let newItems = []\r\n\r\n if (Lists[index].Items.some(x => x.SKU === product.SKU)) {\r\n let productIndex = Lists[index].Items.findIndex(x => x.SKU === product.SKU)\r\n let existingProduct = Lists[index].Items[productIndex]\r\n existingProduct.Quantity += product.Quantity\r\n newItems = Lists[index].Items;\r\n } else {\r\n // Create a copy of the product so changes don't affect each other.\r\n newItems = [JSON.parse(JSON.stringify(product)), ...Lists[index].Items];\r\n }\r\n\r\n const newList = [\r\n ...Lists.slice(0, index),\r\n {\r\n Name: targetListName,\r\n Items: newItems\r\n },\r\n ...Lists.slice(index + 1, Lists.length)\r\n ]\r\n\r\n closeModal(newList, ProductCommand.RemoveAfter, targetListName)\r\n break\r\n case 'BadRequest':\r\n alert('Invalid parameters')\r\n break\r\n case 'InternalServerError':\r\n alert('Something went wrong')\r\n break\r\n default:\r\n console.error('Unhandled Response.')\r\n break\r\n }\r\n })\r\n .catch(function (error) {\r\n console.log(error)\r\n });\r\n }\r\n\r\n const addProduct = (targetListName) => {\r\n axios.post(AddItemEndpoint, {\r\n listName: targetListName,\r\n skus: { [product.SKU]: product.Quantity }\r\n })\r\n .then(function (response) {\r\n switch (response.data) {\r\n case 'OK':\r\n const newList = [{\r\n Name: targetListName,\r\n Items: [product]\r\n }, ...Lists]\r\n closeModal(newList, ProductCommand.RemoveAfter, targetListName)\r\n break\r\n case 'BadRequest':\r\n alert('Invalid parameters')\r\n break\r\n case 'InternalServerError':\r\n alert('Something went wrong')\r\n break\r\n default:\r\n console.error('Unhandled Response.')\r\n break\r\n }\r\n })\r\n .catch(function (error) {\r\n console.log(error)\r\n });\r\n }\r\n\r\n const closeModal = (newList, removeAfter, targetListName) => {\r\n if (removeAfter) {\r\n removeProduct(newList, ProductCommand.ListId)\r\n } else {\r\n UpdateLists(newList)\r\n ToggleCopyModal(false)\r\n }\r\n\r\n ToggleNotification({\r\n IsOpen: true,\r\n Message: removeAfter ? MoveItemNotificationText : CopyItemNotificationText,\r\n TargetListName: targetListName\r\n })\r\n }\r\n\r\n const removeProduct = (newList, listName) => {\r\n axios.post(RemoveItemEndpoint, {\r\n listName: listName,\r\n sku: product.SKU\r\n })\r\n .then(function (response) {\r\n switch (response.data) {\r\n case 'OK':\r\n const listIndex = newList.findIndex(x => x.Name === ProductCommand.ListId)\r\n const list = [\r\n ...newList.slice(0, listIndex),\r\n {\r\n Name: ProductCommand.ListId,\r\n Items: newList[listIndex].Items.filter(x => x.SKU !== product.SKU)\r\n },\r\n ...newList.slice(listIndex + 1, newList.length)\r\n ]\r\n UpdateLists(list)\r\n ToggleCopyModal(false)\r\n break\r\n case 'BadRequest':\r\n alert('Invalid parameters')\r\n break\r\n case 'InternalServerError':\r\n alert('Something went wrong')\r\n break\r\n default:\r\n console.error('Unhandled Response.')\r\n break\r\n }\r\n })\r\n .catch(function (error) {\r\n console.log(error)\r\n });\r\n }\r\n\r\n return (\r\n ToggleCopyModal(false)}\r\n centered={true}\r\n className=\"modal-lg\"\r\n contentClassName=\"list-modal\"\r\n role=\"document\">\r\n ToggleCopyModal(false)} wrapTag=\"div\" tag=\"span\" className=\"headline headline-sm\">Select a List\r\n \r\n \r\n
\r\n
\r\n\r\n
\r\n
\r\n {\r\n Lists.map((list, i) =>\r\n \r\n )\r\n }\r\n
\r\n
\r\n
{translateResourceString('/Wishlists/ViewAndAddModal/CreateListLabel')}
\r\n \r\n \r\n
\r\n
\r\n
{message}
\r\n \r\n );\r\n};\r\n\r\nNotification.propType = {\r\n ToggleNotification: PropTypes.func.isRequired,\r\n IsHidden: PropTypes.bool.isRequired,\r\n ListName: PropTypes.string.isRequired,\r\n Text: PropTypes.string.isRequired\r\n};\r\n\r\nexport default Notification;","import React, { Fragment, useState } from 'react'\r\nimport { Tabs } from 'react-tabs'\r\nimport PropTypes from 'prop-types'\r\nimport WishlistsTabList from './WishlistsTabList'\r\nimport WishlistsTabPanels from './WishlistsTabPanels'\r\nimport WishlistsTab from './WishlistsTab'\r\nimport NewListModal from './Features/NewList/NewListModal'\r\nimport ListsModal from './Features/ListsModal/ListsModal'\r\nimport EditListModal from './Features/EditList/EditListModal'\r\nimport CopyModal from './Features/CopyModal/CopyModal'\r\nimport PrintModal from './Features/PrintModal/PrintModal'\r\nimport Notification from './Components/Notification'\r\nimport { addResourceStrings, translateResourceString } from '../util/translationUtility'\r\n\r\nconst WishlistsApp = ({\r\n Wishlists,\r\n AddToCartEndpoint,\r\n AddListToCartEndpoint,\r\n UpdateProductEndpoint,\r\n AddItemEndpoint,\r\n RemoveItemEndpoint,\r\n CreateListEndpoint,\r\n RenameListEndpoint,\r\n DeleteListEndpoint,\r\n LocalizationItems\r\n}) => {\r\n const [Lists, updateLists] = useState(Wishlists)\r\n const [NewListModalIsOpen, toggleNewListModal] = useState(false)\r\n const [ListsModalIsOpen, toggleListsModal] = useState(false)\r\n const [CopyModalIsOpen, toggleCopyModal] = useState(false)\r\n const [PrintModalIsOpen, togglePrintModal] = useState(false)\r\n const [PricesAreHidden, hidePrices] = useState(false)\r\n const [{ EditListModalIsOpen, ListName }, toggleEditListModal] = useState({ EditListModalIsOpen: false, ListName: \"\" })\r\n const [ActiveTabIndex, selectActiveTab] = useState(0)\r\n const [{ ListId, ProductId, RemoveAfter }, ProductCommand] = useState({ ListId: 0, ProductId: 0, RemoveAfter: false })\r\n const [{ IsOpen, Message, TargetListName }, toggleNotification] = useState({ IsOpen: false, Message: \"\", TargetListName: \"\" })\r\n \r\n addResourceStrings(LocalizationItems);\r\n\r\n return (\r\n \r\n \r\n\r\n selectActiveTab(index)}>\r\n {WishlistsTabList({\r\n Lists: Lists,\r\n ToggleNewListModal: toggleNewListModal,\r\n ToggleEditListModal: toggleEditListModal,\r\n ActiveTabIndex: ActiveTabIndex\r\n })}\r\n {WishlistsTabPanels({\r\n Lists: Lists,\r\n ToggleEditListModal: toggleEditListModal,\r\n ToggleListsModal: toggleListsModal,\r\n UpdateLists: updateLists,\r\n ToggleCopyModal: toggleCopyModal,\r\n ProductCommand: ProductCommand,\r\n TogglePrintModal: togglePrintModal,\r\n PricesAreHidden: PricesAreHidden,\r\n AddToCartEndpoint: AddToCartEndpoint,\r\n AddListToCartEndpoint: AddListToCartEndpoint,\r\n UpdateProductEndpoint: UpdateProductEndpoint,\r\n RemoveItemEndpoint: RemoveItemEndpoint\r\n })}\r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n \r\n );\r\n};\r\n\r\nWishlistsTab.tabsRole = 'Tab';\r\nWishlistsTabList.tabsRole = 'TabList';\r\nWishlistsTabPanels.tabsRole = 'TabPanel';\r\n\r\nWishlistsApp.propType = {\r\n Wishlists: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n Name: PropTypes.string,\r\n Items: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n SKU: PropTypes.string,\r\n Name: PropTypes.string,\r\n ImageUrl: PropTypes.string,\r\n Link: PropTypes.string,\r\n StockAvailability: PropTypes.string,\r\n Price: PropTypes.string,\r\n ListPrice: PropTypes.string,\r\n Quantity: PropTypes.number,\r\n TotalPrice: PropTypes.string,\r\n Id: PropTypes.number\r\n })\r\n )\r\n })\r\n ).isRequired,\r\n AddToCartEndpoint: PropTypes.string.isRequired,\r\n AddListToCartEndpoint: PropTypes.string.isRequired,\r\n UpdateProductEndpoint: PropTypes.string.isRequired,\r\n AddItemEndpoint: PropTypes.string.isRequired,\r\n RemoveItemEndpoint: PropTypes.string.isRequired,\r\n CreateListEndpoint: PropTypes.string.isRequired,\r\n RenameListEndpoint: PropTypes.string.isRequired,\r\n DeleteListEndpoint: PropTypes.string.isRequired\r\n};\r\n\r\nexport default WishlistsApp;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nclass QuickOrderEntry extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n onSelectSuggestedItem(sku) {\r\n this.props.onSkuSet(sku);\r\n }\r\n\r\n render() {\r\n const {\r\n translationUtility\r\n } = this.props;\r\n\r\n let quantityValue = this.props.quantity === -1 ? \"\" : this.props.quantity;\r\n\r\n let isSkuValidated = !!this.props.selectedSku && this.props.selectedSku === this.props.query;\r\n let showAutocomplete = this.props.hasFocus\r\n && this.props.searchCompleted\r\n && !!this.props.autocompleteItems\r\n && this.props.autocompleteItems.length > 0\r\n && !isSkuValidated;\r\n\r\n let itemLabel = translationUtility.translateResourceString(\"/QuickOrder/ItemNumberLabel\");\r\n if (!!this.props.query) {\r\n if (!this.props.searchCompleted || showAutocomplete)\r\n itemLabel = translationUtility.translateResourceString(\"/QuickOrder/Searching\");\r\n else if (isSkuValidated)\r\n itemLabel = this.props.itemName;\r\n else\r\n itemLabel = translationUtility.translateResourceString(\"/QuickOrder/ItemNotFound\");\r\n }\r\n\r\n let searchedQueryLength = this.props.searchedQuery.length;\r\n\r\n return (\r\n \r\n
\r\n
\r\n
\r\n
this.props.onFocusChanged(true)}\r\n onBlur={(e) => this.props.onFocusChanged(false)}\r\n value={this.props.query}\r\n onChange={(e) => this.props.onQueryChange(e.target.value)}\r\n />\r\n \r\n
\r\n {this.props.autocompleteItems.map((item, index) => {\r\n return - this.onSelectSuggestedItem(item.Sku)} >\r\n
\r\n {this.props.searchedQuery}\r\n {item.MatchedField === \"name\"\r\n ? (item.VariationName.length > searchedQueryLength ? item.VariationName.substring(searchedQueryLength) : \"\")\r\n : (item.Sku.length > searchedQueryLength ? item.Sku.substring(searchedQueryLength) : \"\")\r\n }\r\n \r\n })}\r\n
\r\n
\r\n
\r\n { this.props.onQuantityChange(e.target.value); }}\r\n onBlur={(e) => { this.props.onQuantityBlur(e.target.value); }} />\r\n
\r\n
\r\n {!this.props.hideCloseButton &&\r\n \r\n }\r\n
\r\n
\r\n
\r\n
\r\n {itemLabel}\r\n
\r\n
\r\n {translationUtility.translateResourceString(\"/QuickOrder/QuantityLabel\")}\r\n
\r\n
\r\n
{children}
)\r\n : (\r\n {(state) => (\r\n \r\n {children}\r\n
\r\n )}\r\n )\r\n );","import React from 'react'\r\nimport { findDOMNode } from 'react-dom'\r\nimport PropTypes from 'prop-types'\r\n\r\nimport { ERROR_USER_ALERT, UNKNOWN_USER_ALERT, INFO_USER_ALERT } from './userAlertTypes'\r\n\r\nimport { Fade } from '../componentAnimations'\r\n\r\nconst hasNewMessage = (oldMessages, newMessages) => {\r\n return !newMessages.every((cur) => oldMessages.some(msg => msg.id === cur.id))\r\n}\r\n\r\n// BBS DDD from https://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling?noredirect=1&lq=1\r\n// answer by bravedick\r\nconst isScrolledIntoView = (el) => {\r\n if (typeof window === 'undefined' || window.innerWidth === 'undefined')\r\n return false;\r\n var elemTop = el.getBoundingClientRect().top;\r\n var elemBottom = el.getBoundingClientRect().bottom;\r\n\r\n // Only completely visible elements return true:\r\n var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);\r\n // Partially visible elements return true:\r\n // isVisible = elemTop < window.innerHeight && elemBottom >= 0;\r\n return isVisible;\r\n}\r\n\r\nclass MessagesList extends React.Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = { visibleMessages: 0 }\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (hasNewMessage(this.props.messages, nextProps.messages)) {\r\n this.setState({ scrollToLast: true })\r\n }\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (this.state.scrollToLast) {\r\n const highestMessageId = this.props.messages.reduce((max, cur) => cur.id > max ? cur.id : max, 0)\r\n const messageWithHighestId = findDOMNode(this.refs[highestMessageId.toString(10)])\r\n isScrolledIntoView(messageWithHighestId) || messageWithHighestId.scrollIntoView({behavior: \"smooth\"})\r\n this.setState({scrollToLast: false})\r\n }\r\n }\r\n\r\n render() {\r\n const children = this.props.messages.map(message => {\r\n if (message.dismissed)\r\n return \"\";\r\n return (\r\n \r\n \r\n \r\n
e.preventDefault() || this.props.onDismiss(message.Id)}>\r\n ×\r\n \r\n {message.text.split('\\n').map((line, i) =>\r\n ({line}
))}\r\n ![]({\"/static/img/\"+resource.IconImage}/){kind=icon}
\r\n