\n
\n }\n\n \n {pageTitle}\n
\n\n {pageSubtitle && \n\n \n {pageSubtitle}\n \n
\n }\n \n );\n }\n}\n \nexport default Cin7FormHeading;","export default __webpack_public_path__ + \"static/media/Cover_Client_B2B.d5fad3e0.jpg\";","import React from \"react\";\n\nimport CoverClientB2B from \"../../../Images/Cover_Client_B2B.jpg\";\nimport { GetTenantImageUrl } from \"../../../Utils/LoginHelper\";\n\nimport \"./Styles/_SidePageBanner.scss\";\n\ntype Props = {\n customerBanner?: string;\n};\n\nconst SidePageBanner = (props: Props) => {\n const { customerBanner } = props;\n let backgroundImg = CoverClientB2B;\n\n if (customerBanner && customerBanner.length !== 0) {\n backgroundImg = GetTenantImageUrl(customerBanner);\n }\n\n const b2bCoverImageStyle = {\n backgroundImage: `url(\"${backgroundImg}\")`,\n };\n\n return (\n\n {!CoverClientB2B && (\n <>\n \n
\n );\n};\n\nexport default SidePageBanner;\n","import React, { Component } from 'react';\n\nclass EmailIcon extends Component {\n \n render() { \n\n const cls1 = {\n fill: 'none',\n stroke: '#373839',\n strokeLinejoin: 'round',\n strokeWidth: '1.5px'\n };\n\n const cls2 = {\n fill: 'none',\n stroke: '#373839',\n strokeLinejoin: 'round',\n strokeWidth: '1.5px',\n strokeLinecap: 'square'\n };\n\n const cls3 = {\n fill: 'none',\n stroke: '#373839',\n strokeLinejoin: 'round',\n strokeWidth: '1.5px',\n strokeLinecap: 'round'\n };\n\n return ( \n \n );\n }\n}\n \nexport default EmailIcon;","import React, { Component } from 'react';\n\ninterface componentProps {\n strokeColor?: string;\n}\n\ninterface componentState {\n strokeColor: string;\n}\n\nclass CircleTickIcon extends Component{`Order With A Click`}
\n \n )}\n \n {boxIcon && (\n
\n );\n }\n}\n\nexport default Cin7ConfirmationBox;\n","import * as types from \"../Types/BrandingTypes\";\nimport APIHost from \"../../APIHost\";\nimport axios from \"axios\";\n\nconst config = {\n headers: {\n \"Content-Type\": \"application/json\",\n },\n};\n\nconst host = new APIHost();\n\nexport interface contactRequestEmailTypes{\n name: string;\n email: string;\n companyName: string;\n phone: string;\n message: string;\n moduleId: number;\n}\n\nexport interface ReCaptchaValidationRequestTypes{\n token: string;\n moduleId: number;\n}\n\n//Get Store Details\nexport const GetStoreInformation = (brandFound: boolean) => (dispatch: any) => {\n if (!brandFound) {\n dispatch({ type: types.Getting_Brand_Info });\n\n axios\n .get(host.AuthAPI(\"StoreInformation\"), config)\n .then((res) => {\n let brandInfo = res.data;\n dispatch({\n type: types.Display_Store_Brand_Info,\n payload: {\n storeName: brandInfo.storeName,\n moduleId: brandInfo.moduleId,\n loginPageImageUrl: brandInfo.loginPageImageUrl,\n loginBannerImageUrl: brandInfo.loginBannerImageUrl,\n contactFormEnabled: brandInfo.contactFormEnabled\n },\n });\n })\n .catch(() => {\n dispatch({\n type: types.Display_Store_Brand_Not_Found,\n payload: {\n loginPageImageUrl: \"\",\n loginBannerImageUrl: \"\",\n },\n });\n });\n }\n};\n\nexport const ValidateGoogleReCaptcha = (reCaptchaValidationData: ReCaptchaValidationRequestTypes) =>(dispatch: any) => { \n if(reCaptchaValidationData.token && reCaptchaValidationData.moduleId){\n\n axios.post(host.ContactUsFormAPI('ValidateReCaptchaToken'),reCaptchaValidationData,config).then((res) => {\n dispatch({\n type: types.Update_ReCaptcha_Validation_Result,\n payload: res.data\n }) \n }).catch((error) => {\n dispatch({\n type: types.Update_ReCaptcha_Validation_Result,\n payload: {\n success: false\n }\n }) \n })\n }\n};\n\nexport const SendContactUsRequestEmail = (contactFormData: contactRequestEmailTypes) => (dispatch: any) => {\n\n dispatch({\n type: types.Contact_Form_Email_Requested\n })\n\n if(contactFormData.moduleId){\n axios.post(host.ContactUsFormAPI('SendRequestEmail'),contactFormData, config).then(res => {\n let data = res.data;\n dispatch({\n type: types.Update_Contact_Form_Email_Status,\n payload: data\n });\n dispatch({\n type: types.Contact_Form_Email_Request_Has_Response\n });\n }).catch((error) => {\n \n dispatch({\n type: types.Update_Contact_Form_Email_Status,\n payload: {\n success: false\n }\n });\n dispatch({\n type: types.Contact_Form_Email_Request_Has_Response\n });\n });\n }else{\n dispatch({\n type: types.Update_Contact_Form_Email_Status,\n payload: {\n success: false\n }\n });\n dispatch({\n type: types.Contact_Form_Email_Request_Has_Response\n });\n }\n}\n\nexport const ResetContactUsForm = () => (dispatch: any) => {\n dispatch({\n type: types.Reset_Contact_Form_Email_Status\n });\n}\n","import React, { Component } from 'react';\n\nimport './Styles/_Loading.scss';\n\ninterface componentProps {\n takeOver?: boolean;\n inLine?: boolean;\n text?: string;\n}\n\nclass Loading extends Component\n
\n )}\n \n {boxMessage}\n {boxSubMessage && {boxSubMessage}}\n
\n \n
\n );\n }\n}\n\nexport default Loading;","import React, {Component, CSSProperties} from 'react';\n\ninterface componentProps {\n fillColor?: string;\n size?: number;\n}\n\ninterface componentStates extends componentProps {}\n\nclass LoadingSpinnerIcon extends Component\n
\n \n \n \n \n
\n {text ? text : 'Loading...'}
\n \n
\n );\n }\n}\n\nexport default LoadingSpinner;","import React, { Component, CSSProperties } from 'react';\n\ninterface componentProps {\n strokeColor?: string;\n}\n\ninterface componentStates extends componentProps {}\n\nclass OpenBox extends Component\n
\n );\n }\n else {\n return (\n \n 
} unloader={
\n );\n } \n}\n\nexport default Image;","import React from \"react\";\nimport Image from \"../../../Components/Global/Image\";\n\ntype Props = {\n logoImageUrl: string;\n storeName?: string;\n};\n\nconst StoreHeading = (props: Props) => {\n if (props.logoImageUrl) {\n return (\n \n
\n );\n } else {\n return {props.storeName}
;\n }\n};\n\nexport default StoreHeading;\n","import React, { Component } from 'react';\n\nclass ClearInputIcon extends Component {\n render() { \n const cls1 = {\n fill: 'none',\n stroke: '#6d6e74',\n strokeWidth: '2px'\n };\n return ( \n \n\n );\n }\n}\n \nexport default ClearInputIcon;","import React, { Component } from 'react';\nimport { Button, FormGroup, Label, Input } from 'reactstrap';\n\n//Assets\nimport ClearInputIcon from './../../Images/Icons/ClearInputIcon';\n\ninterface componentProps {\n fieldClass?: string;\n fieldErrorId?: string;\n formGroupClass?: string;\n fieldId: string;\n fieldIndex?: number;\n fieldLabel?: string;\n fieldName?: string;\n fieldType?: string | any;\n onChange: (e: React.ChangeEvent\n \n
\n );\n }\n}\n \nexport default PasswordMeter;","import React, { Component } from 'react';\nclass ShowPasswordIcon extends Component {\n render() { \n\n const cls1 = {\n fill: 'none',\n stroke: '#373839',\n strokeLinecap: 'round',\n strokeLinejoin: 'round'\n };\n\n const cls2 = {\n fill: '#373839',\n stroke: '#373839',\n strokeMiterlimit:10\n };\n\n return ( \n \n );\n }\n}\n \nexport default ShowPasswordIcon;","import React, { Component } from 'react';\nclass HidePasswordIcon extends Component {\n render() { \n\n const cls1 = {\n fill: 'none',\n stroke: '#373839',\n strokeLinecap: 'round',\n strokeLinejoin: 'round'\n };\n\n const cls2 = {\n fill: '#373839',\n stroke: '#373839',\n strokeMiterlimit: 10\n };\n\n const cls3 = {\n fill: 'none',\n stroke: '#373839'\n }\n\n return ( \n \n );\n }\n}\n \nexport default HidePasswordIcon;\n\n","import React, { Component } from 'react';\nimport {FormGroup, Input, Label, Button} from 'reactstrap';\nimport PasswordMeter from './PasswordMeter';\n\nimport ShowPasswordIcon from '../../Images/Icons/ShowPasswordIcon.js';\nimport HidePasswordIcon from '../../Images/Icons/HidePasswordIcon.js';\n\ninterface componentProps {\n fieldClass?: string;\n fieldErrorId?: string;\n fieldId: string;\n fieldIndex?: number;\n fieldLabel?: string;\n fieldName: string;\n formGroupClass?: string;\n passwordStrength?: boolean;\n onChange: (e: React.ChangeEvent\n {passwordEntry && (\n {this._renderPasswordLabel(testedPassword)}\n )}\n
\n \n The password for {resetPassword.emailAddress} has been updated.\n
\n \n {ForgotPasswordConfirmationContent.default_message} {forgotPassword.emailAddress}\n
\n \n {ForgotPasswordConfirmationContent.default_buttonLabel}\n \n \n );\n }\n else {\n return (\n \n
\n );\n };\n\n if (hideBanner) {\n return \n
\n \n
\n \n
\n \n {tryAgainAction && (\n
\n \n
\n )}\n \n this._runAction(tryAgainAction, ev)}\n >\n Try Again\n \n
\n \n
\n );\n }\n }\n\n _runAction = (action: any, e: SyntheticEvent) => {\n e.preventDefault();\n action(e);\n };\n}\n\nexport default FailedView;\n","import React, { Component } from 'react';\nimport { NavLink } from 'reactstrap';\n\nimport './Styles/_SidePageBannerFooter.scss';\n\nclass SidePageBannerFooter extends Component {\n \n render() {\n\n return ( \n \n
\n \n
\n );\n }\n}\n \nexport default SidePageBannerFooter;","import React, { SyntheticEvent } from \"react\";\nimport \"./Styles/ContactUsFooter.scss\";\nimport { useHistory } from \"react-router\";\nimport { useDispatch } from \"react-redux\";\nimport { ResetContactUsForm } from \"../../../Redux/Actions/BrandingActions\";\n\nexport const ContactUsFooter = () => {\n const history = useHistory();\n const dispatch = useDispatch();\n\n const handleContactUsClick = (e: SyntheticEvent) => {\n dispatch(ResetContactUsForm());\n history.push(\"/contact-us\");\n };\n\n return (\n \n Powered by Cin7 \n
\n \n \n handleContactUsClick(e)}\n >\n Contact Us\n \n
\n );\n};\n","import React, { Component } from \"react\";\nimport { Route, Switch, Redirect, RouteComponentProps } from \"react-router-dom\";\nimport { connect } from \"react-redux\";\n\nimport Cin7FormHeading from \"../../Components/PageElements/Cin7FormHeading\";\nimport SidePageBanner from \"../../Components/PageElements/Login/SidePageBanner\";\nimport Cin7ConfirmationBox from \"../../Components/PageElements/Cin7ConfirmationBox\";\nimport { GetTenantImageUrl } from \"../../Utils/LoginHelper\";\nimport { GetStoreInformation } from \"../../Redux/Actions/BrandingActions\";\nimport Loading from \"../../Components/Global/Loading\";\nimport { B2BPageTitles } from \"../../Language/Default_Settings\";\nimport StoreHeading from \"./Views/StoreHeading\";\n\n//Pages\nimport SignIn from \"./Views/SignIn\";\nimport ForgotPassword from \"./Views/ForgotPassword\";\nimport ResetPassword from \"./Views/ResetPassword\";\nimport ResetPasswordConfirmation from \"../Notifications/Success/ResetPasswordConfirmation\";\nimport ForgotPasswordConfirmation from \"../Notifications/Success/ForgotPasswordConfirmation\";\nimport FailedView from \"../Notifications/Errors/FailedView\";\nimport SidePageBannerFooter from \"../../Components/PageElements/Login/SidePageBannerFooter\";\nimport { ContactUsFooter } from \"../../Components/PageElements/Login/ContactUsFooter\";\n\ninterface componentProps extends RouteComponentPropsDon't have an account?
\n \n
\n );\n }\n}\n\nconst MapStateToProps = (state: { brandingReducer: any }) => ({\n login: state.brandingReducer,\n});\n\nexport default connect(MapStateToProps, { GetStoreInformation })(Login);\n","import React, { Component } from 'react';\nimport { NavLink } from 'reactstrap';\n\n//Redux\nimport { connect } from 'react-redux';\nimport { RegistrationClearState } from '../../../Redux/Actions/IdentityActions';\n\ninterface componentProps {\n registration: {\n emailAddress: string;\n }\n RegistrationClearState: () => void;\n}\n\ninterface componentStates { }\n\nclass CreatePasswordConfirmation extends Component\n
\n \n
\n \n
\n \n \n \n {login.contactFormEnabled &&
\n \n The password for {registration.emailAddress} has been created.\n
\n \n {storeName} has invited you to create a Cin7 B2B account.\n
\n );\n }\n else {\n return (\n\n You have been invited to create a Cin7 B2B account.\n
\n );\n }\n }\n\n if (!emailAddress || registration.userStatus === -1) {\n return (\n\n
\n }\n \n Your email login will be: \n {emailAddress}\n
\n\n
\n \n );\n }\n }\n}\n\n//Redux Map Props\nconst MapStateToProps = (state: {identityReducer: any;}) => ({\n registration: state.identityReducer\n});\n \nexport default connect(MapStateToProps, { GetRegisteredUserDetails, ConfirmUserEmail, GetUserStatus })(Registration);","import React, { Component } from \"react\";\nimport { Route, Switch, Redirect, RouteComponentProps } from \"react-router-dom\";\nimport Cin7FormHeading from \"../../Components/PageElements/Cin7FormHeading\";\nimport SidePageBanner from \"../../Components/PageElements/Login/SidePageBanner\";\nimport Cin7ConfirmationBox from \"../../Components/PageElements/Cin7ConfirmationBox\";\nimport { GetStoreInformation } from \"../../Redux/Actions/BrandingActions\";\nimport { connect } from \"react-redux\";\nimport Loading from \"../../Components/Global/Loading\";\nimport FailedView from \"../Notifications/Errors/FailedView\";\nimport { GetTenantImageUrl } from \"../../Utils/LoginHelper\";\nimport StoreHeading from \"./Views/StoreHeading\";\n\n//Pages\nimport CreatePasswordConfirmation from \"../Notifications/Success/CreatePasswordConfirmation\";\nimport Registration from \"./Views/Registration\";\nimport SidePageBannerFooter from \"../../Components/PageElements/Login/SidePageBannerFooter\";\n\ninterface componentProps extends RouteComponentProps\n
\n );\n }\n}\n\nconst MapStateToProps = (state: { identityReducer: any; brandingReducer: any }) => ({\n registration: state.identityReducer,\n login: state.brandingReducer,\n});\n\nexport default connect(MapStateToProps, { GetStoreInformation })(Register);\n","import React, { Component } from 'react';\n\nclass PageNotFound extends Component {\n\n render() { \n return ( \n \n
\n \n
\n \n
\n \n \n \n
\n 404 - Oops page not found
\n );\n }\n}\n \nexport default PageNotFound;","import { useMemo } from \"react\";\nimport { useSelector } from \"react-redux\";\n\nimport { RootState } from \"..\";\nimport { CategoryType } from \"../Components/PageElements/Products/ProductCategoryFilter\";\n\n/**\n * Recursively flattens the pathnames of a category tree.\n * The first call of this function should ensure parent category path is empty or starts with a slash\n * @param parentCategory Path and ID of parent. Path should be \"\" if this is the first call of this function.\n * @param categoryArray An array of categories, each of which may contain subCategories of the same CategoryType\n * @returns Returns an array of route strings or [ ]\n */\nexport const getCategoryPaths = (parentCategory: { path: string; id: number }, categoryArray: CategoryType[]) => {\n if (categoryArray.length === 0) {\n return [];\n }\n const totalList: { path: string; id: number }[] = [];\n categoryArray.forEach((c) => {\n // Encode each category for use in the URL. Browsers needs help replacing ' with %27.\n const encodedName = encodeURIComponent(c.name).replace(/'/g, \"%27\");\n totalList.push({ id: c.id, path: `${parentCategory.path}/${encodedName}/` });\n if (c.subCategories.length !== 0) {\n totalList.push(\n ...getCategoryPaths({ path: `${parentCategory.path}/${encodedName}`, id: c.id }, c.subCategories)\n );\n }\n });\n return totalList;\n};\n\n// Searches recursively for the category belonging to the provided id\nexport const findCategoryFromId = (cat: CategoryType, id: number): CategoryType | undefined => {\n // Base case\n if (cat.id === id) {\n return cat;\n }\n if (cat.subCategories.length !== 0) {\n for (let c of cat.subCategories) {\n const result = findCategoryFromId(c, id);\n if (result) return result;\n }\n }\n};\n\n// Searches recursively for the category which has the provided Id as a child\nexport const findParent = (categoryToSearch: CategoryType, childId: number): CategoryType | undefined => {\n // If categoryToSearch and child match then there is no parent\n if (categoryToSearch.id === childId) {\n return undefined;\n }\n\n // These for loops could be combined but are seperate to improve speed (preventing prematurely searching deeper)\n if (categoryToSearch.subCategories.length !== 0) {\n for (let c of categoryToSearch.subCategories) {\n // Base case\n if (c.id === childId) {\n return categoryToSearch;\n }\n }\n for (let cat of categoryToSearch.subCategories) {\n const result = findParent(cat, childId);\n if (result) return result;\n }\n }\n};\n\n// Returns an array of all the parents, grandparents, ancestors of the given category(id)\nexport const findElders = (defaultParent: CategoryType, id: number): CategoryType[] => {\n if (id < 0) return [];\n const familyArray: CategoryType[] = [];\n const parent = findParent(defaultParent, id);\n if (parent) {\n if (parent.id < 0) return [defaultParent];\n familyArray.unshift(parent);\n familyArray.unshift(...findElders(defaultParent, parent.id));\n }\n return familyArray;\n};\n\n// Retrieves the given variable from the url query params\nexport function getQueryVariable(variable: string) {\n const query = window.location.search.substring(1);\n const variables = query.split(\"&\");\n for (let i = 0; i < variables.length; i++) {\n const pair = variables[i].split(\"=\");\n if (pair[0] === variable) {\n return pair[1];\n }\n }\n return undefined;\n}\n\n// Find if an array of category paths (with ID) contains a provided path.\n// categoryRoutes must start and end with a forward slash (/).\nexport const checkEquivalenceOfPath = (\n categoryRoutes: { id: number; path: string }[],\n pathToMatch: string\n): { id: number; path: string } | undefined => {\n for (const route of categoryRoutes) {\n // Ignore the start and end slahses, check for equivalence of the string\n if (route.path.substring(1, route.path.length - 1).localeCompare(pathToMatch) === 0) {\n return route;\n }\n }\n};\n\n// Check current page in query params exists\nexport const useMatchingCategory = () => {\n const defaultParent = useDefaultParent();\n const categoryRouteObjects = useCategoryRouteObjects();\n const pagePath = getQueryVariable(\"t\");\n const segments = [];\n if (!pagePath) {\n return { id: defaultParent.id, path: \"\" };\n }\n // Remove any slahses on the ends of the string\n segments.push(...pagePath.split(\"/\").filter(Boolean));\n const pathToMatch = segments.join(\"/\");\n return checkEquivalenceOfPath(categoryRouteObjects, pathToMatch);\n};\n\n// Returns the id's of all the descendents of a given category (must provide the whole tree)\nexport const getAllDescendents = (category: CategoryType) => {\n const children: number[] = [];\n category.subCategories.forEach((sub) => {\n children.push(sub.id);\n children.push(...getAllDescendents(sub));\n });\n return children;\n};\n\nexport const useCategoryRouteObjects = () => {\n return useSelector((state: RootState) => state.productListReducer.categoryRouteObjects);\n};\n\nexport const useCurrentCategory = () => {\n return useSelector((state: RootState) => state.categoryReducer.category);\n};\n\nexport const useCategories = () => {\n return useSelector((state: RootState) => state.productListReducer.categories);\n};\n\nexport const useDefaultParent = () => {\n const categories = useCategories();\n return useMemo(() => {\n return {\n id: -1,\n name: \"All Products\",\n subCategories: categories,\n };\n }, [categories]);\n};\n","import axios, { CancelTokenSource } from \"axios\";\n\nimport * as types from \"./../Types/ProductListTypes\";\nimport { RefreshUserToken } from \"./../Actions/AuthActions\";\nimport APIHost from \"./../../APIHost\";\nimport ApiUtil from \"../../Utils/ApiUtil\";\nimport { getCategoryPaths } from \"../../Utils/CategoriesHelper\";\nimport { CategoryType } from \"../../Components/PageElements/Products/ProductCategoryFilter\";\nimport { unauthorizeIfNeeded } from \"../../Utils/Global/UnauthorizeIfNeeded\";\n\nconst host = new APIHost();\nconst apiUtil = new ApiUtil();\n\nexport type ProductListItem = {\n brand: string;\n stock: number;\n currencyCode: string;\n taxStatus: string;\n minPrice: number;\n maxPrice: number;\n retailPrice: number;\n minSpecialPrice: number;\n maxSpecialPrice: number;\n image: string | null;\n images: string[];\n allowOverselling: boolean;\n isNonStock: boolean;\n hasMultipleOptions: boolean;\n hasPromotions: boolean;\n minRangeContractPrice: number;\n maxRangeContractPrice: number;\n sizeRangeId: number;\n incomingDate: string | null;\n id: number;\n name: string;\n styleCode: string;\n};\n\ntype PostBody = {\n moduleId: number;\n page: number;\n keyword: string;\n brandIds: number[];\n categoryIds: number[];\n};\n\nexport type ProductsListType = {\n brands: any[];\n brandsFetched: boolean;\n categories: CategoryType[];\n isFetchingCategories: boolean;\n categoriesFetched: boolean;\n categoryRouteObjects: {\n id: number;\n path: string;\n }[];\n numberOfCategories: number | null;\n filter: {\n filterMenuOpen: boolean;\n filterMenuToggledByUser: boolean;\n brandIds: number[];\n categoryIds: number[];\n };\n isFetchingProducts: boolean;\n message: string;\n productListViewStyle: string;\n products: ProductListItem[];\n serviceHasMore: boolean;\n};\n\nexport const ResetProductsList = () => (dispatch: any) => {\n dispatch({\n type: types.Reset_Products_List,\n });\n};\n\nlet source: CancelTokenSource;\nexport const GetProductsList = (\n token: string,\n page: number,\n query?: string,\n filters?: { brandIds?: number[]; categoryIds?: number[] }\n) => (dispatch: any) => {\n const headers = apiUtil.DefaultHeaders(token);\n if (headers === null) {\n return;\n }\n\n // If a token exists from a previous request, cancel it\n if (typeof source != typeof undefined && page === 1) {\n source.cancel(\"Operation canceled due to new request.\")\n }\n\n //Save the cancel token for the current request\n source = axios.CancelToken.source();\n\n dispatch({\n type: types.Fetching_Products_List,\n });\n\n const postBody: PostBody = {\n moduleId: apiUtil.GetModuleId(),\n page: page,\n keyword: \"\",\n brandIds: [],\n categoryIds: [],\n };\n\n if (query && query.length > 0) {\n postBody.keyword = query;\n }\n\n if (filters?.brandIds && filters?.brandIds?.length > 0) {\n postBody.brandIds = filters?.brandIds;\n }\n\n if (filters?.categoryIds && filters?.categoryIds?.length > 0) {\n postBody.categoryIds = filters?.categoryIds;\n }\n\n axios\n .post(host.ProductsAPI(\"GetProductsList\"), postBody, {...headers, cancelToken: source.token})\n .then((res) => {\n dispatch({\n type: types.Fetch_Products_List,\n payload: {\n products: res.data.products,\n },\n });\n })\n .catch((error) => {\n if (axios.isCancel(error)) {\n return;\n }\n if (error.response) {\n let errorStatus = error.response.status;\n\n switch (errorStatus) {\n case 401:\n dispatch({\n type: types.Fetch_Products_Error,\n payload: {\n message: \"\",\n },\n });\n dispatch(RefreshUserToken());\n break;\n\n default:\n dispatch({\n type: types.Fetch_Products_Error,\n payload: {\n message: error.message,\n },\n });\n break;\n }\n } else {\n dispatch({\n type: types.Fetch_Products_Error,\n payload: {\n message: error.message,\n },\n });\n }\n });\n};\n\nexport const GetBrandsList = (token: string) => (dispatch: any) => {\n var headers = apiUtil.DefaultHeaders(token);\n\n if (headers === null) {\n return;\n }\n\n const postBody = {\n moduleId: apiUtil.GetModuleId(),\n };\n\n axios\n .post(host.ProductsAPI(\"GetBrandsList\"), postBody, headers)\n .then((res) => {\n dispatch({\n type: types.Fetch_Brands_List,\n payload: {\n brands: res.data.brands,\n brandsFetched: res.data.success,\n },\n });\n });\n};\n\nexport const GetCategoriesList = (token: string) => (dispatch: any) => {\n const headers = apiUtil.DefaultHeaders(token);\n if (headers === null) {\n return;\n }\n\n const postBody = {\n moduleId: apiUtil.GetModuleId(),\n };\n\n dispatch({\n type: types.Fetch_Categories_List,\n payload: {\n categories: [],\n categoriesFetched: false,\n isFetchingCategories: true,\n },\n });\n \n axios\n .post(host.ProductsAPI(\"GetCategoriesList\"), postBody, headers)\n .then((res) => {\n dispatch({\n type: types.Fetch_Categories_List,\n payload: {\n categories: res.data.categories,\n categoriesFetched: res.data.success,\n isFetchingCategories: false,\n numberOfCategories: res.data.categories.length,\n },\n });\n const categoryRouteObjects = getCategoryPaths({path: \"\", id: -1}, res.data.categories);\n if (categoryRouteObjects.length !== 0) {\n dispatch({\n type: types.Create_Category_Route_Objects,\n payload: {\n routes: categoryRouteObjects,\n },\n });\n }\n })\n .catch((error) => {\n if (axios.isCancel(error)) {\n return;\n }\n unauthorizeIfNeeded(error, dispatch);\n dispatch({\n type: types.Fetch_Categories_Error,\n payload: {\n message: error.message,\n },\n });\n });\n \n};\n\nexport const UpdateProductsFilter = (filter: {\n brandIds?: number[];\n categoryIds?: number[];\n}) => (dispatch: any) => {\n dispatch({\n type: types.Update_Products_Filter,\n payload: {\n brandIds: filter.brandIds,\n categoryIds: filter.categoryIds,\n },\n });\n};\n\n//Toggle View Actions\nexport const ToggleProductListView = (viewType: string) => (dispatch: any) => {\n switch (viewType) {\n case \"gallery-view\":\n dispatch({\n type: types.Product_List_View_Gallery,\n });\n break;\n case \"list-view\":\n default:\n dispatch({\n type: types.Product_List_View_List,\n });\n break;\n }\n};\n\nexport const DisplayFilterMenu = (toggledByUser: boolean) => (dispatch: any) => {\n dispatch({\n type: types.Filter_Menu_Toggle_Status,\n payload: {\n filterMenuToggledByUser: toggledByUser\n }\n });\n};\n","import { AxiosError } from \"axios\";\nimport * as types from \"../../Redux/Types/AuthTypes\";\n\nexport const unauthorizeIfNeeded = (error: AxiosError, dispatch: any) => {\n if (error.response) {\n let errorStatus = error.response.status;\n\n if (errorStatus === 401) {\n dispatch({\n type: types.Deauthorize_B2B_User,\n payload: {\n message: \"Failed to authenticate user. Please login again.\",\n },\n });\n } else if (errorStatus === 403) {\n dispatch({\n type: types.Deauthorize_B2B_User,\n payload: {\n message: \"Failed to authenticate user. Please login again.\",\n },\n });\n }\n }\n};\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { UpdateProductsFilter, DisplayFilterMenu, ProductsListType } from \"../../../Redux/Actions/ProductListActions\";\nimport { GetCategoriesList } from \"../../../Redux/Actions/ProductListActions\";\nimport {\n Button,\n Checkbox,\n Input,\n Accordion,\n CloseCircleIcon,\n CloseIcon,\n SearchIcon,\n AccordionDetails,\n AccordionSummary,\n Typography,\n FormControlLabel,\n} from \"@cin7/ui\";\n\nimport \"./Styles/_ProductsListBrandFilter.scss\";\n\ninterface componentProps {\n productsList: ProductsListType;\n auth: {\n subscribedToken: string;\n };\n UpdateProductsFilter: (filter: { brandIds?: number[]; categoryIds?: number[] }) => void;\n DisplayFilterMenu: (toggledByUser: boolean) => void;\n}\n\ninterface componentState {\n brands: any[];\n brandIds: number[];\n brandSearchParameter: string;\n}\n\nclass ProductsListBrandFilter extends Component\n \n {productsList.filter.filterMenuOpen && (\n
\n \n )}\n \n \n \n );\n }\n\n _clearFilter = () => {\n this.setState({\n brands: this.props.productsList.brands,\n brandIds: [],\n brandSearchParameter: \"\",\n });\n\n const filter = {\n brandIds: [],\n };\n this.props.UpdateProductsFilter(filter);\n };\n\n _applyFilter = () => {\n const filter = {\n brandIds: this.state.brandIds,\n };\n\n this.props.UpdateProductsFilter(filter);\n this.props.DisplayFilterMenu(false);\n };\n\n _onChangeBrand = (e: React.ChangeEvent\n this.props.DisplayFilterMenu(false)}\n >\n
\n\n Filter
\n\n \n Apply Filter\n \n \n Clear\n \n
\n \n Filters \n
\n \n {productsList.brands.length > 0 ? (\n \n \n Brand \n \n \n
\n \n \n ) : null}\n \n this._onSearchBrand(e.target.value)}\n value={brandSearchParameter}\n InputProps={{\n startAdornment: (\n this._onSearchBrand(\"\")}\n >\n
\n ),\n }}\n />\n \n
\n ),\n endAdornment: brandSearchParameter && (\n \n {brands.map((brand: any) => (\n
\n ;\n }\n else {\n return null;\n }\n};\n\nexport default RetailPriceDisplay;\n","import React, {Component} from 'react';\nimport PriceDisplay from '../../Global/PriceDisplay';\n\nimport './Styles/_ProductPrice.scss';\nimport RetailPriceDisplay from '../../Global/RetailPriceDisplay';\n\ninterface componentProps {\n product: any;\n}\n \ninterface componentState {}\n \nclass ProductPrice extends Component
\n
\n );\n }\n }\n\n render() {\n const { product } = this.props;\n\n const ListPrice: any = () => {\n if (product.minPrice == null || product.maxPrice == null) {\n return null;\n }\n\n if (this.checkForSameMinAndMaxPrice(product.minPrice, product.maxPrice)) {\n return \n
\n \n );\n }\n else if(product.minRangeContractPrice && product.maxRangeContractPrice && ListContractPrice){\n return (\n <>\n {this.checkForRetailPrice(product)}\n \n {
\n \n )\n }\n else {\n return (\n <>\n {this.checkForRetailPrice(product)}\n \n {
\n \n );\n }\n }\n}\n \nexport default ProductPrice;","import React, { Component } from 'react';\n\ninterface componentProps {\n title: string;\n}\n\nclass DynamicTitleSection extends ComponentAvailable
\n );\n }\n\n if (productOption) { \n if (sizes) {\n optionGroupStock = productOption.reduce((totalStock: number, item: { uomId: number, stock: number; uomSize: number; }) => {\n return totalStock + (item.stock > 0 ? (item.uomId ? Math.floor(item.stock / item.uomSize) : item.stock) : 0);\n }, 0);\n\n if (productOption.some((option: { uomId: number; }) => option.uomId)) {\n // Only show an indicator for UOM group.\n indicators = true;\n }\n\n if (productOption.some((option: { incomingDate: string; }) => option.incomingDate)) {\n const optionsSortedByDate = productOption.slice().sort((a: any, b: any) => Number(new Date(a.incomingDate)) - Number(new Date(b.incomingDate)));\n incomingStockDate = optionsSortedByDate.find((option: { incomingDate: string; }) => option.incomingDate).incomingDate;\n }\n }\n else if (productOption.uomId) {\n // Calculate UOM stock.\n optionGroupStock = Math.floor(productOption.stock / productOption.uomSize);\n }\n }\n\n if (optionGroupStock <= 0) {\n if (product?.allowOverselling) {\n return (\n \n
\n );\n }\n else {\n if (incomingStockDate) {\n return (\n {identity.moduleSettings?.oversellStockIndicator || 'Available'}
\n {incomingStockDate && Incoming {FormatIncomingDate(incomingStockDate)}
}\n Incoming {FormatIncomingDate(incomingStockDate)}
\n );\n }\n else {\n return (\n Out of stock
\n );\n }\n }\n }\n\n const remainingStock = remainingOptionStock !== undefined && remainingOptionStock !== optionGroupStock ? FormatAmount(RoundStockNumber(remainingOptionStock)) : null;\n\n if (indicators) {\n if (!product?.allowOverselling) {\n if (optionGroupStock > 0 && optionGroupStock < 4) {\n return (\n {remainingStock !== null && (remainingStock + \" of \")}{FormatAmount(RoundStockNumber(optionGroupStock))} left in stock
\n );\n } else if (optionGroupStock < 11) {\n return (\n Low stock
\n );\n }\n }\n\n return (\n {optionGroupStock <= 0 && identity.moduleSettings?.oversellStockIndicator ? identity.moduleSettings.oversellStockIndicator : 'Available'}
\n );\n }\n else {\n return (\n {remainingStock !== null && (remainingStock + \" of \")}{FormatAmount(RoundStockNumber(optionGroupStock))} Available
\n );\n }\n } \n}\n\nconst MapStateToProps = (state: { identityReducer: any; }) => ({\n identity: state.identityReducer\n});\n\nexport default connect(MapStateToProps, {})(StockIndicator);","import React, { Component } from 'react';\n\ninterface componentProps {\n strokeColor?: string;\n}\n\ninterface componentState {\n strokeColor: string;\n}\n\nclass ArrowRightIcon extends Component\n
\n \n );\n }\n}\n\nexport default ProductTile;\n","import React, { SyntheticEvent, useEffect, useState } from \"react\";\nimport InfiniteScroll from \"react-infinite-scroll-component\";\nimport { useDispatch, useSelector } from \"react-redux\";\n\nimport { ProductsListPageContent } from \"../../../Language/Default_Settings\";\nimport Loading from \"../../Global/Loading\";\nimport Cin7ConfirmationBox from \"../Cin7ConfirmationBox\";\nimport ProductTile from \"./ProductTile\";\nimport { GetProductsList } from \"../../../Redux/Actions/ProductListActions\";\nimport { RootState } from \"../../..\";\nimport { useCurrentCategory } from \"../../../Utils/CategoriesHelper\";\n\nimport \"./Styles/_ProductsListItems.scss\";\n\ntype Props = {\n searchParameter: string;\n setProductDetailId: (e: SyntheticEvent, id: number | null) => void;\n};\n\nconst ProductsListItems = (props: Props) => {\n const dispatch = useDispatch();\n const auth = useSelector((state: RootState) => state.authReducer);\n const productsList = useSelector((state: RootState) => state.productListReducer);\n const category = useCurrentCategory();\n const [currentPage, setCurrentPage] = useState(1);\n const [hasMore, setHasMore] = useState(false);\n\n // Page number must reset if category or brand filter changes\n useEffect(() => {\n setCurrentPage(1);\n }, [category.id, setCurrentPage, productsList.filter.brandIds]);\n\n useEffect(() => {\n setHasMore(productsList.serviceHasMore);\n }, [productsList.serviceHasMore]);\n\n const loadMore = (e?: React.SyntheticEvent) => {\n e?.preventDefault();\n if (hasMore && !productsList.isFetchingProducts) {\n dispatch(\n GetProductsList(auth.subscribedToken, currentPage + 1, props.searchParameter, {\n brandIds: productsList.filter.brandIds,\n categoryIds: productsList.filter.categoryIds,\n })\n );\n setCurrentPage(currentPage + 1);\n }\n };\n\n if (productsList.message) {\n return productsList.message ? (\n \n {product.hasPromotions && (\n OpenAction(e, product.id)} />\n )}\n {\n OpenAction(e, product.id);\n }}\n >\n
\n \n
\n \n \n \n
\n \n
\n {product.styleCode}
\n \n
\n \n
\n {product.hasMultipleOptions && \"More Options\"}
\n \n
\n \n
\n {ProductsListPageContent.default_noResultsLabel}
;\n } else {\n let sortedList = productsList.products;\n return (\n \n {sortedList.map((product: any) => (\n
\n );\n }\n };\n\n const InfiniteScrollLoader = () => {\n if (currentPage === 1) {\n return null;\n } else {\n return \n
\n );\n } else {\n return (\n \n
\n );\n};\nexport default ProductsListItems;\n","import * as types from './../Types/ProductDetailsTypes';\nimport { RefreshUserToken } from './../Actions/AuthActions';\nimport APIHost from './../../APIHost';\nimport axios from 'axios';\nimport ApiUtil from '../../Utils/ApiUtil';\n\nconst host = new APIHost();\nconst apiUtil = new ApiUtil();\n\nexport const GetProductDetails = (token: string, productId: number) => (dispatch: any, getState: any) => {\n var headers = apiUtil.DefaultHeaders(token);\n\n if (headers === null) {\n return;\n }\n\n dispatch({\n type: types.Fetching_Product_Details\n });\n\n const postBody = {\n moduleId: apiUtil.GetModuleId(),\n id: productId\n };\n \n axios.post(host.ProductsAPI(\"GetProductDetails\"), postBody, headers).then(res => {\n dispatch({\n type: types.Fetch_Product_Details,\n payload: {\n product: res.data.product\n }\n });\n }).catch((error) => {\n if (error.response) {\n let errorStatus = error.response.status;\n\n switch (errorStatus) {\n case 404:\n dispatch({\n type: types.Fetch_Product_Error,\n payload: {\n message: 'This product is no longer available.',\n productNotFound: true\n }\n });\n break;\n case 401:\n dispatch({\n type: types.Fetch_Product_Error,\n payload: {\n message: ''\n }\n });\n dispatch(RefreshUserToken());\n break; \n default:\n dispatch({\n type: types.Fetch_Product_Error,\n payload: {\n message: error.message\n }\n });\n break;\n }\n } else {\n dispatch({\n type: types.Fetch_Product_Error,\n payload: {\n message: error.message\n }\n });\n }\n });\n}\n\nexport const ShowProductDetailsModal = (dispatch: any) => {\n dispatch({\n type: types.Show_Product_Details_Modal\n });\n}\n\n\nexport const HideProductDetailsModal = (dispatch: any) => {\n dispatch({\n type: types.Hide_Product_Details_Modal\n });\n}\n\nexport const ShowProductDetails = (productId: number) => (dispatch: any) => {\n dispatch({\n type: types.Set_Product_Id_To_Load,\n payload: productId\n });\n ShowProductDetailsModal(dispatch);\n}\n","import React, {Component, CSSProperties} from 'react';\n\ninterface componentProps {\n strokeColor?: string;\n}\n\ninterface componentStates extends componentProps {}\n\nclass CaretDownIcon extends Component\n
\n {productsList.serviceHasMore && !productsList.isFetchingProducts && productsList.products.length >= 24 && (\n \n
\n )}\n loadMore(e)}>\n Load More\n
\n \n
\n );\n }\n else {\n return ;\n }\n }\n\n _runAction = (action: any, e: SyntheticEvent) => {\n e.preventDefault();\n action(e);\n this._closeMenu();\n }\n\n _closeMenu = () => {\n this.setState({\n dropdownOpen: false\n });\n }\n\n _toggleActionsMenu = (e: SyntheticEvent) => {\n e.preventDefault();\n\n this.setState(prevState => ({\n dropdownOpen: !prevState.dropdownOpen\n }));\n }\n \n}\n\nexport default withRouter(MoreActionsDropdown);","import React, { Component } from \"react\";\nimport MoreActionsDropdown from \"./MoreActionsDropdown\";\n\nimport \"./Styles/_MoreActionsPanel.scss\";\n\ninterface componentProps {\n actions?: any;\n}\n\nclass MoreActionsPanel extends Component\n
\n {dropdownOpen &&\n <>\n \n More
\n \n {actions.map(\n (action: any) => \n )}\n
\n \n }\n \n
\n \n );\n }\n}\n\nexport default MoreActionsPanel;\n","import React, {Component} from 'react';\nimport StockIndicator from './StockIndicator';\nimport './Styles/_ProductInfoCard.scss';\n\ninterface componentProps {\n product: any;\n}\n \ninterface componentState {}\n \nclass ProductInfoCard extends Component\n {product?.brand && product.brand !== \"0\" &&\n
\n );\n }\n}\n \nexport default ProductInfoCard;","import React, { Component } from 'react';\n\ninterface componentProps {\n strokeColor?: string;\n}\n\ninterface componentState {\n strokeColor: string;\n}\n\nclass CloseIcon extends Component\n
}\n {product.brand}
\n \n
\n {product.name}
\n \n {product.styleCode &&
\n {product.styleCode} -
}\n \n
\n );\n });\n \n return (\n <>\n \n \n
\n \n );\n }\n\n _handleKeyPress = (event: KeyboardEvent) => {\n if (event.code === \"Escape\") {\n this.props._props.closeModal();\n }\n else if (event.code === \"ArrowLeft\") {\n this.props._props.prevImage();\n }\n else if (event.code === \"ArrowRight\") {\n this.props._props.nextImage();\n }\n }\n}\n\nexport default ProductGalleryModal;\n","import React, {Component, SyntheticEvent} from 'react';\nimport ProductGalleryModal from './ProductGalleryModal';\nimport { GetProductImageUrl } from '../../../Utils/ProductsHelper';\nimport Image from '../../Global/Image';\nimport NextArrowIcon from '../../../Images/Icons/NavigationIcons/NextArrowIcon';\nimport PrevArrowIcon from '../../../Images/Icons/NavigationIcons/PrevArrowIcon';\n\n//Styles\nimport './Styles/_ProductGallery.scss';\n\ninterface componentProps {\n productImages: any[];\n}\n \ninterface componentState {\n imagePath: string;\n activeModal: boolean;\n selectedImage: number;\n}\n \nclass ProductGallery extends Component\n
\n \n
\n \n {renderGalleryOptions}\n
\n {_props.currentImage < totalImages && \n
}\n {_props.currentImage !== 0 && \n
}\n {this._switchImageView(e, productImageUrl)}}>\n {
\n )\n });\n\n const galleryModalProps = { \n closeModal: this._toggleGalleryView,\n prevImageClick: this._prevImageClick,\n prevImage: this._prevImage,\n nextImageClick: this._nextImageClick,\n nextImage: this._nextImage,\n galleryImages: productImages,\n currentImage: selectedImage,\n }\n\n if (window.innerWidth > 768) {\n return ( \n \n
\n );\n }\n else {\n return ( \n \n
\n \n
\n \n {productOptions}\n
\n {activeModal && \n
\n );\n }\n }\n\n _switchImageView = (e:SyntheticEvent, productImage:string) => {\n e.preventDefault();\n let clickedSrcImage = productImage;\n let currentIndex = e.currentTarget.getAttribute('image-index');\n let thumbnailElements = document.querySelectorAll('.product-options.active');\n\n if(thumbnailElements) {\n thumbnailElements.forEach((item) => {\n if(!e.currentTarget.classList.contains('active')) {\n item.classList.remove('active');\n item.classList.add('inactive');\n }\n });\n }\n\n if(clickedSrcImage && currentIndex) {\n if(clickedSrcImage !== this.state.imagePath) {\n this.setState({\n imagePath: clickedSrcImage,\n selectedImage: parseInt(currentIndex)\n });\n\n e.currentTarget.classList.remove('inactive');\n e.currentTarget.classList.add('active');\n }\n }\n }\n\n _toggleGalleryViewClick = (e:SyntheticEvent) => {\n e.preventDefault();\n this._toggleGalleryView();\n }\n\n _toggleGalleryView = () => {\n this.setState(prevState => ({\n activeModal: !prevState.activeModal\n }));\n }\n\n _prevImageClick = (e:SyntheticEvent) => {\n e.preventDefault();\n this._prevImage();\n }\n\n _prevImage = () => {\n let currentIndex = this.state.selectedImage;\n\n if(currentIndex > 0) {\n let currentImages = document.querySelectorAll('#productImages');\n this.setState(prevState => ({\n selectedImage: prevState.selectedImage - 1,\n imagePath: GetProductImageUrl(this.props.productImages[prevState.selectedImage - 1].full)\n }));\n\n if(currentImages) {\n currentImages.forEach((item) => {\n if(item.classList.contains('active')) {\n item.classList.toggle('active');\n item.classList.toggle('inactive');\n }\n\n let imageIndex = item.getAttribute('index-item');\n\n if(imageIndex) {\n if(parseInt(imageIndex) === (currentIndex - 1)) {\n item.classList.toggle('active');\n item.classList.toggle('inactive');\n }\n }\n })\n }\n } \n }\n\n _nextImageClick = (e:SyntheticEvent) => {\n e.preventDefault();\n this._nextImage();\n }\n\n _nextImage = () => {\n let currentIndex = this.state.selectedImage;\n let currentImageCount = this.props.productImages.length-1;\n\n if(currentIndex < currentImageCount) {\n let currentImages = document.querySelectorAll('#productImages');\n this.setState(prevState => ({\n selectedImage: prevState.selectedImage + 1,\n imagePath: GetProductImageUrl(this.props.productImages[this.state.selectedImage + 1].full)\n }));\n\n if(currentImages) {\n currentImages.forEach((item) => {\n\n if(item.classList.contains('active')) {\n item.classList.toggle('active');\n item.classList.toggle('inactive');\n }\n\n let imageIndex = item.getAttribute('index-item');\n\n if(imageIndex) {\n if(parseInt(imageIndex) === (currentIndex + 1)) {\n item.classList.toggle('active');\n item.classList.toggle('inactive');\n }\n }\n })\n }\n } \n }\n}\n \nexport default ProductGallery;","export const showProductDetailsModal = (state:any): boolean => {\n return state.productDetailsReducer?.showProductDetailsModal;\n}\n\nexport const getProductDetailsId = (state: any): number => {\n return state.productDetailsReducer?.productIdToLoad;\n}\n\nexport const getProductDetailsProductId = (state: any): number => {\n return state.productDetailsReducer?.product?.id;\n}\n\nexport const getProductDetailsDescription = (state: any): string => {\n return state.productDetailsReducer?.product?.description;\n}","import React, {Component} from 'react';\n\nimport './Styles/_HtmlBlock.scss';\n\ninterface componentProps {\n content: any;\n htmlBlock: any;\n}\n \ninterface componentState {}\n \nclass HtmlBlock extends Component\n\n
\n {activeModal && \n {selectedImage !== 0 &&
\n \n
\n \n {selectedImage < totalImages &&
\n \n {productOptions}\n
\n \n {content.indexOf('\n
\n )\n : content\n }\n \n );\n } else {\n return null;\n }\n }\n}\n \nexport default HtmlBlock;","import React, { useState } from 'react';\nimport { useSelector } from 'react-redux';\nimport { getProductDetailsDescription } from '../../../Redux/Selectors/ProductDetailsSelectors';\nimport HtmlBlock from '../../Global/HtmlBlock';\nimport './Styles/_ProductTeaser.scss';\n\nexport const ProductTeaser = () => {\n\tconst [showMore, setShowMore] = useState(false);\n const [htmlBlock, setHtmlBlock] = useState(\"html-block--less\");\n\tconst description = useSelector(getProductDetailsDescription);\n\n const toggleDescription = () => {\n setHtmlBlock(showMore? \"html-block--less\" : \"html-block\");\n setShowMore(!showMore);\n }\n\n\n if (description) {\n return (\n \n \n
\n );\n } else {\n return (\n Description
\n\n {showMore ? \"Show less\" : \"Show more\"}\n
\n No description available.
\n );\n }\n}","import React, {Component} from 'react';\nimport { FormatAmount } from '../../../Utils/OrderHelper';\nimport PriceDisplay from '../../Global/PriceDisplay';\nimport { GetTotalProductOptionPrice } from '../../../Utils/ProductsHelper';\n\n//Redux\nimport { connect } from 'react-redux';\n\n//Styles\nimport './Styles/_ProductInfoCart.scss';\n\ninterface componentProps {\n cartItems: {\n orderItems: any;\n };\n productId: number;\n}\n \ninterface componentState {\n}\n \nclass ProductDetailsCart extends Component\n
\n );\n }\n}\n\nconst MapStateToProps = (state: {orderReducer: any;}) => ({\n cartItems: state.orderReducer\n});\n \nexport default connect(MapStateToProps)(ProductDetailsCart);","import React, { Component } from 'react';\nclass CircleDecrementIcon extends Component {\n constructor(props) {\n super(props);\n this.state = {\n fillColor: '#000'\n }\n }\n\n componentDidMount() {\n if(this.props.fillColor) {\n this.setState({\n fillColor: this.props.fillColor\n });\n }\n }\n\n render() { \n const {fillColor} = this.state;\n \n const cls1 = {\n fill: fillColor\n }\n\n return (\n \n );\n }\n}\n \nexport default CircleDecrementIcon;","import React, { Component } from 'react';\nclass CircleIncrementIcon extends Component {\n constructor(props) {\n super(props);\n this.state = {\n fillColor: '#000'\n }\n }\n\n componentDidMount() {\n if(this.props.fillColor) {\n this.setState({\n fillColor: this.props.fillColor\n });\n }\n }\n\n render() { \n const {fillColor} = this.state;\n \n const cls1 = {\n fill: fillColor\n }\n\n return (\n \n );\n }\n}\n \nexport default CircleIncrementIcon;","import React, { Component, SyntheticEvent, ChangeEvent } from 'react';\nimport { connect } from 'react-redux';\nimport { IncrementOrderQuantity, DecrementOrderQuantity, SetOrderQuantity, CalculatePromotions } from '../../../Redux/Actions/OrderActions';\nimport { FormatAmount, UndoFormatAmount } from '../../../Utils/OrderHelper';\n\n// Images\nimport CircleDecrementIcon from '../../../Images/Icons/CircleDecrementIcon';\nimport CircleIncrementIcon from '../../../Images/Icons/CircleIncrementIcon';\n\nimport './Styles/_ProductOptionQuantity.scss';\n\ninterface componentProps {\n order: {\n orderItems: any[];\n };\n option: any;\n product: any;\n tabIndex?: number;\n IncrementOrderQuantity: (productOption: any, product: any) => void;\n DecrementOrderQuantity: (productOption: any, product: any) => void;\n SetOrderQuantity: (productOption: any, product: any, quantity: number) => void;\n CalculatePromotions: () => void;\n}\n \ninterface componentState {\n allowOverselling: boolean;\n quantity: number;\n hasFocus: boolean;\n}\n\nconst remainingStock = (product: any, option: any, orderItems: any) => {\n let remaining: number = option.stock;\n\n if (option.uomId) {\n remaining = Math.floor(option.stock / option.uomSize);\n }\n\n const childItemProductInCart = orderItems.find((item: any) => item.productId === product.id);\n\n if (childItemProductInCart) {\n\n const childItemsInCart = childItemProductInCart.productOptions.filter((itemOption: any) => itemOption.optionId === option.optionId);\n\n if (childItemsInCart) {\n\n let normalQuantity = childItemsInCart.reduce((counter: number, item: any) => {\n return counter += item.uomId ? item.productQuantity * item.uomSize : item.productQuantity;\n }, 0);\n\n if (option.uomId) {\n remaining = Math.floor((option.stock - normalQuantity) / option.uomSize);\n }\n else {\n remaining -= normalQuantity;\n }\n }\n }\n\n return remaining;\n}\n\nclass ProductOptionQuantity extends Component\n Items\n {FormatAmount(totalItems)}\n
\n {\n discountedPromoPrice > 0 &&\n \n Discount\n {
\n }\n \n Total\n {
\n \n \n this._updateQuantity(e, this._inputQuantity)} tabIndex={tabIndex} onFocus={() => {this.setFocus(true); this.updateQuantity()}} onBlur={(e) => {this.setFocus(false); this._updateQuantity(e, this._updateInputQuantity)}} />\n \n
\n );\n }\n\n _incrementQuantity = (e: SyntheticEvent) => {\n e.preventDefault();\n const quantity = this.getCartQuantity();\n\n if (quantity >= 9999999) {\n return;\n }\n\n this.props.IncrementOrderQuantity(this.props.option, this.props.product);\n this.props.CalculatePromotions();\n }\n\n _decrementQuantity = (e: SyntheticEvent) => {\n e.preventDefault();\n const quantity = this.getCartQuantity();\n\n if (quantity <= 0) {\n return;\n }\n\n this.props.DecrementOrderQuantity(this.props.option, this.props.product);\n this.props.CalculatePromotions();\n }\n\n _updateQuantity = (e: ChangeEvent\n {ListSpecialPrice(minSpecialPrice, maxSpecialPrice)} {ListPrice(minPrice, maxPrice)}\n
\n );\n } else {\n return (\n \n {ListPrice(minPrice, maxPrice)}\n
\n );\n }\n}\n\nexport default ProductOptionPriceRange;\n","import React, {Component} from 'react';\nimport PriceDisplay from '../../Global/PriceDisplay';\nimport { connect } from 'react-redux';\n\nimport './Styles/_ProductOptionPrice.scss';\nimport { ProductDetailsOption } from '../../../Redux/Reducers/App_Reducers/ProductDetailsReducer';\n\ntype ProductDetailsReducerProduct = {\n minRangeContractPrice: number;\n maxRangeContractPrice: number;\n}\n\ninterface componentProps {\n option: ProductDetailsOption;\n forceHideSpecialPrice?: boolean;\n hidePriceWhileFetchingPromotionCalculations: boolean;\n productDetailsReducerProduct: ProductDetailsReducerProduct;\n}\n \ninterface componentState {}\n \nclass ProductOptionPrice extends Component{\n hidePriceWhenNotAddingProductDetailsReducerProductToCalcPromos ? <> :\n <>{
\n );\n } else {\n return (\n \n {hidePriceWhenAddingProductDetailsReducerProductToCalcPromos ? <> :
\n );\n }\n }\n}\n\nconst MapStateToProps = (state: {orderReducer: any; productDetailsReducer : any;}) => ({\n hidePriceWhileFetchingPromotionCalculations: state.orderReducer?.hidePriceWhileFetchingPromotionCalculations,\n productDetailsReducerProduct: state.productDetailsReducer?.product\n});\n \nexport default connect(MapStateToProps, {})(ProductOptionPrice);","import React from 'react';\nimport { connect } from 'react-redux';\nimport StockIndicator from './StockIndicator';\n\nimport './Styles/_StockIndicator.scss';\n\ninterface UOMStockIndicatorProps {\n product?: any;\n productOption?: any;\n order: {\n orderItems: any;\n };\n}\n\nconst remainingStock = (product: any, option: any, orderItems: any) => {\n let remaining: number = option.stock;\n\n if (option.uomId) {\n remaining = Math.floor(option.stock / option.uomSize);\n }\n\n const childItemProductInCart = orderItems.find((item: any) => item.productId === product.id);\n\n if (childItemProductInCart) {\n\n const childItemsInCart = childItemProductInCart.productOptions.filter((itemOption: any) => itemOption.optionId === option.optionId);\n\n if (childItemsInCart) {\n\n let normalQuantity = childItemsInCart.reduce((counter: number, item: any) => {\n return counter += item.uomId ? item.productQuantity * item.uomSize : item.productQuantity;\n }, 0);\n\n if (option.uomId) {\n remaining = Math.floor((option.stock - normalQuantity) / option.uomSize);\n }\n else {\n remaining -= normalQuantity;\n }\n }\n }\n\n return remaining;\n}\n\nexport const UOMStockIndicator: React.FC{FormatAmount(totalItems)}
\n )\n\n }\n}\n\nconst MapStateToProps = (state: {orderReducer: any;}) => ({\n cartItems: state.orderReducer\n});\n\nexport default connect(MapStateToProps)(ProductOptionSectionInfo);","import React, { Component } from 'react';\n\ninterface componentProps {\n strokeColor?: string;\n}\n\ninterface componentState {\n strokeColor: string;\n}\n\nclass ExpandArrowIcon extends Component\n {showHeaderTitle &&
\n }\n \n )\n}","import * as React from \"react\";\nimport ContractPricePromotionDisplay from \"../../../Interfaces/PromoMatrix/ContractPricePromotionDisplay\";\n\nimport \"./Styles/_ProductContractPricePromotion.scss\"\n\ninterface IProductContractPricePromotionsProps {\n descriptions : ContractPricePromotionDisplay[];\n showHeaderTitle? : boolean;\n}\n\nexport const ProductContractPricePromotion : React.FCCurrent Promotions
}\n {descriptions.map((pd:StandardPromotionDisplay, i:number) => {\n return - {ReactHtmlParser(pd.promotionDescription)}
\n })}\n \n {showHeaderTitle &&
\n }\n \n )\n}","import * as React from 'react';\nimport { Popover } from '@cin7/ui';\n\nimport \"./Styles/_ProductsPromotionsTooltip.scss\";\n\ninterface IProductsPromotionsTooltip{\n content: JSX.Element;\n}\n\nexport const ProductsPromotionsTooltip : React.FCVolume Pricing
}\n \n
\n {descriptions.map((cpd:ContractPricePromotionDisplay, i:number) => {\n return (\n Quantity
\n Price
\n \n
\n )\n })}\n {cpd.quantityRange}
\n {cpd.price}
\n \n
\n )\n }\n return (<>);\n}\n","import React, { Component, SyntheticEvent } from \"react\";\nimport { ContainsUoms, GetProductImageUrl } from \"../../../Utils/ProductsHelper\";\nimport ProductOptionQuantity from \"../../../Components/PageElements/Products/ProductOptionQuantity\";\nimport ProductOptionPriceRange from \"./ProductOptionPriceRange\";\nimport ProductOptionPrice from \"../../../Components/PageElements/Products/ProductOptionPrice\";\nimport StockIndicator from \"./StockIndicator\";\nimport UOMStockIndicator from \"./UOMStockIndicator\";\nimport ProductOptionSectionInfo from \"./ProductOptionSectionInfo\";\nimport ExpandArrowIcon from \"../../../Images/Icons/Products/ExpandArrowIcon\";\nimport Image from \"../../Global/Image\";\nimport { ProductStandardPromotion } from \"./ProductStandardPromotion\";\nimport { ProductContractPricePromotion } from \"./ProductContractPricePromotion\";\nimport ContractPricePromotionDisplay from \"../../../Interfaces/PromoMatrix/ContractPricePromotionDisplay\";\nimport StandardPromotionDisplay from \"../../../Interfaces/PromoMatrix/StandardPromotionDisplay\";\nimport { ProductsPromotionsTooltip } from \"./ProductPromotionsTooltip\";\nimport PromotionsHelper from \"../../../Utils/PromotionsHelper\";\nimport { IProductPromotionsSectionProps } from \"./ProductPromotionsSection\";\nimport ProductGalleryModal from \"./ProductGalleryModal\";\n\nimport \"./Styles/_ProductOptionSection.scss\";\nimport { ProductOptionUOMUnitPrice } from \"./ProductOptionUOMUnitPrice\";\nimport RetailPriceDisplay from \"../../Global/RetailPriceDisplay\";\nimport { ProductDetailsOption } from \"../../../Redux/Reducers/App_Reducers/ProductDetailsReducer\";\n\ninterface componentProps {\n option: ProductDetailsOption[];\n sizes: boolean;\n product: any;\n tabIndex?: number;\n}\n\ninterface componentState {\n active: boolean;\n imageModalOpen: boolean;\n}\n\nclass ProductOptionSection extends Component\n
\n );\n }\n }\n\n render() {\n const activeClass = this.state.active ? \"active\" : \"inactive\";\n const { option, sizes, product, tabIndex } = this.props;\n let standardPromotions: StandardPromotionDisplay[] = option?.standardPromotions;\n let contractPricePromotions: ContractPricePromotionDisplay[] = option?.contractPricePromotions;\n\n const productOption = option;\n\n const ProductOptionAction: any = () => {\n if (sizes) {\n return (\n \n \n
\n \n );\n } else {\n return null;\n }\n };\n\n let productImageUrl = \"\";\n let optionImageItem;\n\n if (product.images && product.images[0]) {\n productImageUrl = product.images[0].thumbnail;\n optionImageItem = product.images[0];\n }\n\n let optionImageUrl = GetProductImageUrl(productImageUrl);\n\n let parentItem = null;\n\n if (sizes) {\n parentItem = option[0];\n\n if (parentItem.image) {\n optionImageItem = parentItem.image;\n optionImageUrl = GetProductImageUrl(parentItem.image.thumbnail);\n }\n\n standardPromotions = (parentItem.commonPromotions as IProductPromotionsSectionProps)\n ?.standardPromotionDescriptions;\n contractPricePromotions = (parentItem.commonPromotions as IProductPromotionsSectionProps)\n ?.contractPricePromoDescriptions;\n } else {\n if (productOption.image) {\n optionImageItem = productOption.image;\n optionImageUrl = GetProductImageUrl(productOption.image.thumbnail);\n }\n }\n\n const galleryModalProps = { \n closeModal: () => this._toggleImageModal(),\n prevImageClick: () => null,\n prevImage: () => null,\n nextImageClick: () => null,\n nextImage: () => null,\n galleryImages: [optionImageItem],\n currentImage: 0,\n }\n\n const hasUoms = ContainsUoms(Array.isArray(product?.options) ? Array.from(product.options) : []);\n\n const productOptionId: number = parentItem != null ? parentItem.optionId : productOption.optionId;\n return (\n \n {productOptions.map((productOption3: any) => {\n const standardPromotions: StandardPromotionDisplay[] =\n productOption3?.standardPromotions;\n const contractPricePromotions: ContractPricePromotionDisplay[] =\n productOption3?.contractPricePromotions;\n return (\n \n
\n );\n })}\n \n
\n \n {productOption3.size ?? productOption3.option1}\n {!!productOption3.uomSize && ` (${productOption3.uomSize})`}{\" \"}\n {productOption3.option2} {productOption3.option3}\n
\n {(productOption3.uomId || !productOption3.sizeId) && (\n \n (
\n )}\n {(productOption3.uomId || !productOption3.sizeId) && (\n {productOption3.code}
\n )}\n {productOption3.sizeId ? (\n \n
\n \n sizes && this._toggleSizes()}\n >\n
\n \n this._toggleImageModalClick(e)}\n >\n \n
\n \n
\n \n {parentItem != null\n ? parentItem.uomId == null\n ? parentItem.option1\n : null\n : productOption.option1}{\" \"}\n {parentItem != null\n ? parentItem.uomId == null\n ? parentItem.option2\n : null\n : productOption.option2}{\" \"}\n {parentItem != null\n ? parentItem.uomId == null\n ? parentItem.option3\n : null\n : productOption.option3}\n {productOption.uomSize && ` (${productOption.uomSize})`}\n
\n \n
\n \n
\n {parentItem != null && (\n \n {parentItem != null ? (\n hasUoms && !product?.maxRangeContractPrice ? (\n
\n {sizes && (\n <>\n {this.checkForRetailPrice(productOption[0])}\n \n (
\n )}\n \n )}\n {productOption[0].optionCode}
\n \n )}\n {parentItem == null && (\n <>\n {this.checkForRetailPrice(productOption)}\n {productOption.code}
\n \n )}\n \n
\n {PromotionsHelper.ShouldShowContractPriceDescriptions(\n contractPricePromotions\n ) ? (\n \n
\n \n
\n \n {this.state.imageModalOpen && optionImageItem && (\n \n {\n Array.from(groupedOptions2).map(\n (option: ProductDetailsOption[]) =>\n
\n );\n }\n else {\n return (\n \n {\n Array.from(groupedOptions2).map(\n (option: any) =>\n (option.map((option2: any) =>\n (
\n );\n }\n }\n\n return ('No options available.');\n }\n}\n\nconst MapStateToProps = (state: {productDetailsReducer: any;}) => ({\n options: state.productDetailsReducer.product?.options\n});\n\nexport default connect(MapStateToProps)(ProductOptionsList);","import * as React from \"react\";\nimport { Accordion, AccordionSummary, Typography, AccordionDetails, } from \"@cin7/ui\";\nimport ContractPricePromotionDisplay from \"../../../Interfaces/PromoMatrix/ContractPricePromotionDisplay\";\nimport StandardPromotionDisplay from \"../../../Interfaces/PromoMatrix/StandardPromotionDisplay\";\nimport { ProductStandardPromotion } from \"./ProductStandardPromotion\";\nimport { ProductContractPricePromotion } from \"./ProductContractPricePromotion\";\nimport PromotionsHelper from \"../../../Utils/PromotionsHelper\";\n\nimport \"./Styles/_ProductPromotionsSection.scss\"\n\nexport interface IProductPromotionsSectionProps {\n contractPricePromoDescriptions : ContractPricePromotionDisplay[];\n standardPromotionDescriptions : StandardPromotionDisplay[];\n}\n\nexport const ProductPromotionsSection : React.FC\n { PromotionsHelper.ShouldShowContractPriceDescriptions(contractPricePromoDescriptions) ?\n \n Volume Pricing \n \n :\n PromotionsHelper.ShouldShowPromotionDescriptions(standardPromotionDescriptions) && contractPricePromoDescriptions.length === 0 ?\n \n \n {standardPromotionDescriptions ? standardPromotionDescriptions.length : 0} Available {standardPromotionDescriptions.length > 1 ? \"Promotions\" : \"Promotion\"} \n \n \n : \n <>\n } \n
\n )\n}","import { Link } from '@cin7/ui';\nimport React from 'react';\nimport { GetProductImageUrl } from '../../../Utils/ProductsHelper';\nimport './Styles/_ProductAttachment.scss';\n\ntype Props = {\n attachment?: {\n description: string;\n path: string;\n }\n};\n\nexport const ProductAttachment = (props: Props) => {\n if (!props.attachment) {\n return null;\n }\n\n const attachmentLink = GetProductImageUrl(props.attachment.path);\n\n return (\n \n
\n );\n};\n","import React, { SyntheticEvent } from \"react\";\nimport { useHistory } from \"react-router\";\nimport { CategoriesRoute } from \"../../../Routes\";\n\n// Styles\nimport \"./Styles/_ProductDetailsContent.scss\";\nimport \"../../../Components/Global/Styles/_Buttons.scss\";\nimport { getOrderReducer } from \"../../../Redux/Selectors/OrderSelectors\";\nimport { useSelector } from \"react-redux\";\nimport { getProductDetailsProductId } from \"../../../Redux/Selectors/ProductDetailsSelectors\";\nimport { GetTotalProductOptionPrice } from \"../../../Utils/ProductsHelper\";\nimport PriceDisplay from \"../../Global/PriceDisplay\";\n\ntype Props = {\n version: \"mobile\" | \"desktop\";\n CloseAction?: (e: SyntheticEvent\n
\n \n \n {props.attachment.description}\n \n
\n {props.version === \"mobile\" &&
\n );\n};\n\nexport default ProductDetailsStickyFooter;\n","import React, { Component, SyntheticEvent } from \"react\";\nimport ProductInfoCard from \"./ProductInfoCard\";\nimport ProductGallery from \"./ProductGallery\";\nimport { ProductTeaser } from \"./ProductTeaser\";\nimport ProductDetailsCart from \"./ProductDetailsCart\";\nimport ProductOptionsList from \"./ProductOptionsList\";\nimport { ProductPromotionsSection } from \"./ProductPromotionsSection\";\nimport { ProductAttachment } from \"./ProductAttachment\";\nimport { B2BPageTitles } from \"../../../Language/Default_Settings\";\n\nimport \"./Styles/_ProductDetailsContent.scss\";\nimport ProductDetailsStickyFooter from \"./ProductDetailsStickyFooter\";\n\ninterface componentProps {\n productDetails: {\n isFetchingProductDetails: boolean;\n product: any;\n message: string;\n };\n goBackSettings?: {\n specificRoute: string;\n linkText: string;\n };\n CloseAction?: (e: SyntheticEvent\n
}\n {totalItems} items
\n \n \n \n
\n \n
\n );\n }\n\n _setDefaultPageTitle() {\n document.title = `${B2BPageTitles.root_title} - ${B2BPageTitles.product_details_title}`;\n }\n}\n\nexport default ProductDetailsContent;\n","import React, { Component, CSSProperties } from 'react';\n\ninterface componentProps {\n strokeColor?: string;\n}\n\ninterface componentStates extends componentProps { }\n\nclass EmptyBox extends Component\n
\n \n
\n \n {(window.innerWidth < 768) &&
\n \n
\n \n
\n \n
\n \n {(window.innerWidth >= 768) &&
\n \n
\n \n {commonPromotionData &&\n Array.isArray(commonPromotionData.contractPriceDescriptions) &&\n Array.isArray(commonPromotionData.standardPromotionDescriptions) && (\n
\n \n
\n );\n }\n}\n \nexport default ProductNotFound;","import React, { Component, SyntheticEvent } from \"react\";\nimport { connect } from \"react-redux\";\nimport { GetProductDetails } from \"../../../Redux/Actions/ProductDetailsActions\";\nimport { RemoveOrderProduct, CalculatePromotions } from \"../../../Redux/Actions/OrderActions\";\nimport { ProductActionsContent } from \"../../../Language/Default_Settings\";\nimport MoreActionsPanel from \"../../Global/MoreActionsPanel\";\nimport Loading from \"../../Global/Loading\";\nimport ProductDetailsContent from \"./ProductDetailsContent\";\nimport Cin7ConfirmationBox from \"../Cin7ConfirmationBox\";\nimport ProductNotFound from \"./ProductNotFound\";\n\nimport \"./Styles/_ProductDetailsModal.scss\";\n\ninterface componentProps {\n productId?: number;\n productDetails: {\n isFetchingProductDetails: boolean;\n product: any;\n message: string;\n productNotFound: boolean;\n };\n auth: {\n subscribedToken: string;\n };\n CloseAction: (e: SyntheticEvent, productId: number | null) => void;\n CalculatePromotions: (addProductDetailsReducerProduct: boolean) => void;\n GetProductDetails: (token: string, productId: number) => void;\n RemoveOrderProduct: (\n productId: number,\n optionId: number | null,\n sizeId: number | null,\n uomId: number | null\n ) => void;\n}\n\ninterface componentState {\n productId: number;\n isFetchingProductDetails: boolean;\n product: any;\n message: string;\n userToken: string;\n}\n\nclass ProductDetailsModal extends Component{message}
\n\n
\n )}\n \n );\n }\n }\n\n if (productDetails.isFetchingProductDetails) {\n return \n
\n \n )}\n \n
\n \n );\n }\n\n _setProductDetailId = (e: SyntheticEvent | null, id: number | null) => {\n e?.preventDefault();\n\n this.setState({ productDetailId: id });\n };\n\n _setDefaultPageTitle() {\n document.title = `${B2BPageTitles.root_title} - ${B2BPageTitles.products_list_title}`;\n }\n}\n\nconst MapStateToProps = (state: { productListReducer: any; authReducer: any }) => ({\n productsList: state.productListReducer,\n auth: state.authReducer,\n});\n\nexport default connect(MapStateToProps, {\n ResetProductsList,\n GetProductsList,\n GetBrandsList,\n})(ProductsList);\n","import { CategoryType } from \"../../Components/PageElements/Products/ProductCategoryFilter\";\nimport { getAllDescendents } from \"../../Utils/CategoriesHelper\";\nimport * as types from \"./../Types/CategoryTypes\";\nimport { UpdateProductsFilter } from \"./ProductListActions\";\n\nexport const ChangeCurrentCategory = (newCategory: CategoryType) => (dispatch: any) => {\n dispatch({\n type: types.Change_Current_Category,\n payload: {\n category: newCategory,\n },\n });\n dispatch(\n UpdateProductsFilter({\n categoryIds: newCategory.id === -1 ? [] : [newCategory.id, ...getAllDescendents(newCategory)],\n })\n );\n};\n\nexport const ResetCurrentCategory = () => (dispatch: any) => {\n dispatch({\n type: types.Reset_Current_Category,\n });\n};\n\nexport const SetGoBack = (goBack: boolean) => (dispatch: any) => {\n dispatch({\n type: types.Go_Back,\n payload: {\n goBack: goBack,\n },\n });\n};\n","import React from \"react\";\nimport { CloseCircleIcon } from \"@cin7/ui\";\n\nimport \"./Styles/_Chip.scss\";\n\nexport interface ChipProps {\n label: string;\n onDelete?: VoidFunction;\n onClick?: VoidFunction;\n color?: string;\n deletable?: boolean;\n className?: string;\n variant?: \"primary\" | \"secondary\";\n}\n\nexport const Chip = (props: ChipProps) => {\n const {\n label,\n onDelete,\n color = \"#004FA9\",\n deletable = false,\n className = \"\",\n onClick,\n variant = \"primary\",\n } = props;\n const styles =\n variant === \"primary\" ? { backgroundColor: color, color: \"#fff\" } : { border: `1px solid ${color}`, color };\n return (\n \n
\n );\n};\n","import React, { useEffect, useState } from \"react\";\nimport { useHistory } from \"react-router\";\nimport { useDispatch, useSelector } from \"react-redux\";\n\nimport { CategoryType } from \"../../../Components/PageElements/Products/ProductCategoryFilter\";\nimport ProductsListBrandFilter from \"../../../Components/PageElements/Products/ProductsListBrandFilter\";\nimport {\n findElders,\n useCategoryRouteObjects,\n useCurrentCategory,\n useDefaultParent,\n useMatchingCategory,\n} from \"../../../Utils/CategoriesHelper\";\nimport ProductsList from \"./ProductsList\";\nimport {\n DisplayFilterMenu,\n ToggleProductListView,\n UpdateProductsFilter,\n} from \"../../../Redux/Actions/ProductListActions\";\nimport { RootState } from \"../../..\";\nimport { SetGoBack } from \"../../../Redux/Actions/CategoryActions\";\nimport { GetUrlParameters } from \"../../../Utils/B2BHelpers\";\nimport ProductNotFound from \"../../../Components/PageElements/Products/ProductNotFound\";\nimport { Chip } from \"../../../Components/Global/Chip\";\n\nimport \"../Styles/_Category.scss\";\nimport \"../../../Components/Global/Styles/_Buttons.scss\";\n\nconst Category = (props: any): JSX.Element => {\n const currentCategory = useCurrentCategory();\n const matchingCategory = useMatchingCategory();\n const defaultParent = useDefaultParent();\n const cro = useCategoryRouteObjects();\n const history = useHistory();\n const dispatch = useDispatch();\n const viewType = useSelector((state: RootState) => state.productListReducer.productListViewStyle);\n const brands = useSelector((state: RootState) => state.productListReducer.brands);\n const categoriesFetched = useSelector((state: RootState) => state.productListReducer.categoriesFetched);\n const brandsFetched = useSelector((state: RootState) => state.productListReducer.brandsFetched);\n const filter = useSelector((state: RootState) => state.productListReducer.filter);\n const brandsAvailable = brandsFetched && brands.length > 0;\n\n const [searchParameter, setSearchParameter] = useState(\"\");\n const parameters = GetUrlParameters([\"query\"]);\n\n useEffect(() => {\n if (parameters.query) {\n setSearchParameter(decodeURIComponent(parameters.query));\n } else {\n setSearchParameter(\"\");\n }\n }, [setSearchParameter, parameters]);\n\n const elders = findElders(defaultParent, currentCategory.id);\n const breadcrumbs = [];\n if (elders.length > 1) {\n // Exclude defaultParent from the breadcrumbs with slice\n breadcrumbs.push(...elders.slice(1), currentCategory);\n }\n\n const onClickBreadcrumb = async (categorySelected: CategoryType) => {\n const newPath = cro.find((routeObject) => routeObject.id === categorySelected.id)?.path;\n history.push(`/products/?t=${newPath}`);\n // Someone tell me why this works\n await dispatch(SetGoBack(true));\n };\n\n const crumbList: React.ReactElement[] = [];\n breadcrumbs.forEach((crumbCategory, i) => {\n crumbList.push(\n {label}
\n {deletable && (\n \n
\n )}\n \n
\n );\n }\n\n return (\n <>\n {brandsAvailable && \n
\n {filter.brandIds.length >= 1 && (\n
\n \n );\n};\n\nexport default Category;\n","import React, { Component } from 'react';\n\ninterface componentProps {\n strokeColor?: string;\n}\n\ninterface componentState {\n strokeColor: string;\n}\n\nclass QuoteIcon extends Component\n
\n \n
\n \n {(searchParameter && `Search results for \"${searchParameter}\"`) ||\n currentCategory.name ||\n \"All Products\"}\n
\n- {crumbList}
\n {searchParameter && (\n \n )}\n
\n \n {brandsAvailable && (\n dispatch(DisplayFilterMenu(true))}\n >\n \n dispatch(\n ToggleProductListView(viewType === \"list-view\" ? \"gallery-view\" : \"list-view\")\n )\n }\n >\n
\n \n Filter\n
\n \n )}\n \n \n Change View\n
\n \n \n {filter.brandIds.length >= 1 && (\n
\n
\n
\n )}\n {/* Don't load the Products until there is a category confirmed */}\n {currentCategory.name && \n \n
\n \n {filter.brandIds.map((brandId) => {\n return (\n brand.id === brandId)?.name || \"\"}\n onDelete={() => removeBrandFilter(brandId)}\n deletable\n />\n );\n })}\n
\n \n
\n \n
\n \n
\n )\n}","import { Button, Dialog, Typography, BemHelper, AddToCartIcon, ReplaceCartIcon, ActionCard, UploadIcon, Divider, DialogContent } from '@cin7/ui';\nimport React from 'react';\nimport { useSelector } from 'react-redux';\nimport { FailedImportRecord, FailedReadRecord } from '../../../Domain/BulkImportCSV';\nimport { ConfirmBulkOrderModalContent } from '../../../Language/Default_Settings';\nimport { getOrderItemCount } from '../../../Redux/Selectors/OrderSelectors';\nimport { IssuesCard, IssuesCardVariant } from './IssuesCard';\n\nimport './Styles/_ConfirmBulkOrderModal.scss';\n\nexport interface ConfirmBulkOrderModalProps {\n onCloseClick: VoidFunction;\n onAddToCart: VoidFunction;\n onReplaceCart: VoidFunction;\n onReuploadClick: VoidFunction;\n csvReadErrors: FailedReadRecord[];\n importErrors: FailedImportRecord[];\n stockErrors: string[];\n stockWarnings: string[];\n hasSuccessfullRows: boolean;\n}\n\nexport interface Error {\n product: string,\n sku: string,\n error: string\n}\n\nconst bem = new BemHelper('confirm-bulk-order-modal')\n\nexport const ConfirmBulkOrderModal: React.FC\n {title} \n {sections.map((section, i) => {\n if (section.issues.length === 0) return null;\n return (\n
\n {!!action && \n {section.title} \n
\n )\n })}\n - \n {section.issues} \n
{action}
}\n \n {smallScreen && (\n onClickCategoryMenuItem(undefined, \"/products/\")}\n className={`menu-item top-item ${matchingCategory?.id === -1 && \"current\"} ${\n currentParent.id !== defaultParent.id && \"desktop-only\"\n }`}\n >\n {\"All Products\"}\n \n )}\n {grandparent && currentParent.id >= 0 && (\n <>\n {!smallScreen &&
}\n onClickGoBack()}>\n {}\n {\"Back\"}\n \n \n )}\n
\n {smallScreen && currentParent.id >= 0 && (\n{currentParent.name} \n )}\n {currentParent.id >= 0 && (\n onClickCategoryMenuItem(currentParent)}\n >\n {`All ${currentParent.name}`}\n \n )}\n {currentParent.subCategories.map((child) => {\n return (\n onClickCategoryMenuItem(child)}\n key={child.id}\n >\n {child.name}\n {child.subCategories.length !== 0 && }\n \n );\n })}\n
\n \n }\n
\n {smallScreen && currentParent.id >= 0 && (\n
\n
\n );\n};\n\nexport default NavigationMenu;\n","import React, { Component, SyntheticEvent } from \"react\";\nimport { Link, RouteComponentProps, withRouter } from \"react-router-dom\";\nimport { NavLink } from \"reactstrap\";\nimport { connect } from \"react-redux\";\nimport download from \"downloadjs\";\nimport { History } from \"history\";\nimport { Button, UploadSimpleIcon } from \"@cin7/ui\";\n\nimport QuoteIcon from \"../../Images/Icons/Account/QuoteIcon\";\nimport { UserIcon } from \"../../Images/Icons/Account/UserIcon\";\nimport { LogoutIcon } from \"../../Images/Icons/Account/LogoutIcon\";\nimport { GenericIcon } from \"../../Images/Icons/Account/GenericIcon\";\nimport { LogoutB2BUser } from \"./../../Redux/Actions/AuthActions\";\nimport { GetUserDetails } from \"./../../Redux/Actions/IdentityActions\";\nimport { ToggleSideMenu } from \"./../../Redux/Actions/HeaderActions\";\nimport { B2BPageTitles } from \"../../Language/Default_Settings\";\nimport { UploadBulkOrder } from \"../PageElements/Orders/UploadBulkOrder\";\nimport { BulkImportCSV } from \"../../Domain/BulkImportCSV\";\nimport { OrderReviewRoute } from \"../../Routes\";\nimport NavigationMenu from \"./NavigationMenu\";\n\nimport \"./Styles/_SideMenu.scss\";\n\ninterface componentProps {\n history: History;\n header: {\n isMenuOpen: boolean;\n };\n identity: {\n userInfo: {\n firstName: string;\n lastName: string;\n company: string;\n };\n moduleSettings: {\n termsAndConditionsContent: string;\n customPage1Title: string;\n customPage1Content: string;\n customPage2Title: string;\n customPage2Content: string;\n };\n };\n auth: {\n subscribedToken: string;\n };\n ToggleSideMenu: () => void;\n GetUserDetails: (token: string) => void;\n LogoutB2BUser: () => void;\n}\n\nclass SideMenu extends Component<\n RouteComponentProps & componentProps,\n { showBulkOrder: boolean; smallScreen: boolean | undefined; height: number }\n> {\n constructor(props: RouteComponentProps & componentProps) {\n super(props);\n this.state = { showBulkOrder: false, smallScreen: undefined, height: 0 };\n }\n\n componentDidMount() {\n if (!this.props.identity.userInfo.firstName && !this.props.identity.userInfo.company) {\n this.props.GetUserDetails(this.props.auth.subscribedToken);\n }\n\n window.addEventListener(\"resize\", this.handleResize);\n this.handleResize();\n }\n componentWillUnmount() {\n window.removeEventListener(\"resize\", this.handleResize);\n }\n\n componentDidUpdate(prevProps: any) {\n if (prevProps.auth.subscribedToken !== this.props.auth.subscribedToken) {\n this.props.GetUserDetails(this.props.auth.subscribedToken);\n }\n }\n\n handleResize = () => {\n this.setState({ height: window.innerHeight });\n if (window.innerWidth < 768) {\n this.setState({ smallScreen: true });\n } else {\n this.setState({ smallScreen: false });\n }\n };\n\n render() {\n const { header, identity } = this.props;\n const hasNameAndCompany =\n identity.userInfo.company && (identity.userInfo.firstName || identity.userInfo.lastName);\n const stickyContainerHeight = document.querySelector(\".account-sticky-container\")?.clientHeight;\n\n const ProfileInfo = (\n - {Menu}
\n
\n );\n\n const TermsContainer = (\n \n {identity.userInfo.firstName} {identity.userInfo.lastName}\n {hasNameAndCompany ? \" — \" : \"\"}\n {identity.userInfo.company}\n
\n \n \n Powered by Cin7\n \n
\n );\n\n const AccountLinks = (\n <>\n \n \n
\n \n \n
\n \n {\n this.setState({ showBulkOrder: true });\n this.props.ToggleSideMenu();\n }}\n >\n
\n \n );\n\n const Desktop = () => {\n return (\n <>\n \n
\n Upload a Bulk Order\n \n \n {ProfileInfo}\n
\n \n {AccountLinks}\n\n
\n \n \n
\n \n {identity.moduleSettings && identity.moduleSettings.customPage1Content && (\n
\n \n );\n };\n\n const Mobile = () => {\n return (\n <>\n \n \n {identity.moduleSettings.customPage1Title\n ? identity.moduleSettings.customPage1Title\n : B2BPageTitles.custom_page_1_title}\n \n
\n )}\n {identity.moduleSettings && identity.moduleSettings.customPage2Content && (\n \n \n {identity.moduleSettings.customPage2Title\n ? identity.moduleSettings.customPage2Title\n : B2BPageTitles.custom_page_2_title}\n \n
\n )}\n {identity.moduleSettings && identity.moduleSettings.termsAndConditionsContent && (\n \n \n {B2BPageTitles.seller_terms_and_conditions_title}\n \n
\n )}\n {TermsContainer}\n \n {ProfileInfo}\n
\n {TermsContainer}\n \n );\n };\n\n return (\n <>\n \n {AccountLinks}\n\n {identity.moduleSettings && identity.moduleSettings.customPage1Content && (\n
\n \n \n
\n )}\n {identity.moduleSettings && identity.moduleSettings.customPage2Content && (\n \n \n
\n )}\n {identity.moduleSettings && identity.moduleSettings.termsAndConditionsContent && (\n \n \n
\n )}\n\n \n \n
\n \n \n {this.state.smallScreen &&
\n \n {header.isMenuOpen && !this.state.smallScreen && (\n \n )}\n {this.state.showBulkOrder && (\n \n {this.state.smallScreen ?
\n \n {identity && identity.userInfo && identity.userInfo.priceTier &&\n
\n );\n }\n}\n\nconst MapStateToProps = (state: { identityReducer: any; }) => ({\n identity: state.identityReducer\n});\n\nexport default connect(MapStateToProps)(MiniCartTax);","import React from 'react';\n\nexport const SearchIcon: React.FC = () => {\n return (\n \n );\n}\n","import React, { SyntheticEvent } from \"react\";\nimport { useDispatch } from \"react-redux\";\nimport { SearchIcon } from \"../../Images/Icons/Global/SearchIcon\";\nimport { ResetSideMenu } from \"../../Redux/Actions/HeaderActions\";\n\nimport \"./Styles/_HeaderSearch.scss\";\n\ntype Props = {\n closeModal: (e: SyntheticEvent) => void;\n};\n\nconst HeaderSearch = (props: Props) => {\n const dispatch = useDispatch();\n\n const onClickSearchBox = (e: SyntheticEvent) => {\n props.closeModal(e);\n dispatch(ResetSideMenu());\n };\n\n return (\n \n
}\n {identity.userInfo.priceTier.currencyCode}
\n {GetTaxLabel(identity.userInfo.priceTier.taxStatus)}
\n onClickSearchBox(e)}>\n
\n );\n};\n\nexport default HeaderSearch;\n","import React, { Component } from 'react';\n\ninterface componentProps {\n fillColor?: string;\n}\n\ninterface componentState {\n fillColor: string;\n}\n\nclass ClearInputBoldIcon extends ComponentSearch
\n \n \n \n
\n )\n}\n\nexport default SearchModal;","import React from 'react';\n\nexport const MenuIcon: React.FC = () => {\n return (\n \n );\n}","import React from 'react';\n\nexport const CartIcon: React.FC = () => {\n return (\n \n );\n}\n","import React, { SyntheticEvent, useState } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { useHistory } from \"react-router\";\n\nimport { ResetSideMenu, ToggleSideMenu } from \"./../../Redux/Actions/HeaderActions\";\nimport Image from \"./Image\";\nimport MiniCartTax from \"../PageElements/MiniCartTax\";\nimport HeaderSearch from \"../Global/HeaderSearch\";\nimport SearchModal from \"./SearchModal\";\nimport { MenuIcon } from \"../../Images/Icons/Global/MenuIcon\";\nimport { CartIcon } from \"../../Images/Icons/Orders/CartIcon\";\nimport CloseIcon from \"../../Images/Icons/Global/CloseIcon\";\nimport { FormatAmount } from \"../../Utils/OrderHelper\";\nimport { getCartItemsTotal, getOrderItemCount } from \"../../Redux/Selectors/OrderSelectors\";\nimport { getStoreLogo } from \"../../Redux/Selectors/SettingsSelectors\";\nimport PriceDisplay from \"./PriceDisplay\";\nimport { useIsWindowSmall } from \"../../Utils/Global/UseWindowSizeHook\";\nimport { RootState } from \"../..\";\n\nimport \"./Styles/_Header.scss\";\n\nexport const Header = () => {\n const [activeModal, setActiveModal] = useState(false);\n const maxTotalItems = 9999999;\n const totalCartItems = useSelector(getOrderItemCount);\n const cartItemsTotal = useSelector(getCartItemsTotal);\n const logoImageUrl = useSelector(getStoreLogo);\n const isMenuOpen = useSelector((state: RootState) => state.appSettingsReducer.isMenuOpen);\n const storeName = useSelector((state: RootState) => state.brandingReducer.storeName);\n const smallScreen = useIsWindowSmall();\n const history = useHistory();\n const dispatch = useDispatch();\n\n const toggleMenu = (e: SyntheticEvent) => {\n e.preventDefault();\n dispatch(ToggleSideMenu());\n };\n\n const toggleModal = (e?: SyntheticEvent) => {\n e?.preventDefault();\n\n setActiveModal(!activeModal);\n };\n\n const onClickLink = (e: SyntheticEvent, to: string) => {\n e.preventDefault();\n dispatch(ResetSideMenu());\n history.push(to);\n };\n\n const totalCartItemsDisplay = () => {\n if (totalCartItems > maxTotalItems) {\n return `${FormatAmount(maxTotalItems)}+`;\n } else {\n return FormatAmount(totalCartItems);\n }\n };\n\n return (\n <>\n \n
\n \n
\n _navigate(e, query)}>
\n \n Cancel
\n \n {query.length > 0 && (\n <>\n
\n \n {fetching ? (\n Sorry, we were unable to load products \n Please try again or contact us with a screenshot \n \n \n ) : (\n <>\n
\n \n )}\n \n {autoCompleteResults.length === 0 && (\n No products found matching \"{query}\" \n )}\n {autoCompleteResults.map((result: any) => {\n return
\n \n {autoCompleteResults.length === 12 && (\n \n )}\n \n )\n )}\n _handleOptionSelected(e, result.id) } dangerouslySetInnerHTML={{ __html: withBoldMatchedChars(StripHTMLFromInputs(result.title)) + \"\" + withBoldMatchedChars(StripHTMLFromInputs(getProductCodeText(result.code))) + \"\" }}>
\n })}\n \n
\n {activeModal && \n \n
\n \n
\n \n onClickLink(e, \"/\")}>\n\n {logoImageUrl ? (
\n {storeName}
)}\n\n \n\n
\n \n
\n \n
\n \n onClickLink(e, \"/cart\")}>\n
\n {totalCartItemsDisplay()}
\n \n
\n \n
\n \n {totalCartItemsDisplay()} Item{totalCartItems === 1 ? \"\" : \"s\"}\n
\n {
\n \n \n
\n \n \n
\n \n );\n }\n}\n\nexport default (ReturnPanel);","import React, { Component, SyntheticEvent } from \"react\";\n\nimport ReturnPanel from \"../../../Components/Global/ReturnPanel\";\nimport * as PageContent from \"../../../Language/Default_Settings\";\nimport * as PageRoutes from \"../../../Routes\";\n\n//Redux\nimport { connect } from \"react-redux\";\nimport { GetProductDetails } from \"../../../Redux/Actions/ProductDetailsActions\";\nimport { RemoveOrderProduct, CalculatePromotions } from \"../../../Redux/Actions/OrderActions\";\n\n//Assets\nimport { ProductActionsContent } from \"../../../Language/Default_Settings\";\n\n//Page Elements\nimport \"./../Styles/_ProductDetail.scss\";\n\n//Assets\nimport Cin7ConfirmationBox from \"../../../Components/PageElements/Cin7ConfirmationBox\";\nimport Loading from \"../../../Components/Global/Loading\";\nimport ProductDetailsContent from \"../../../Components/PageElements/Products/ProductDetailsContent\";\nimport ProductNotFound from \"../../../Components/PageElements/Products/ProductNotFound\";\n\ninterface componentProps {\n match: {\n params: {\n id: number;\n };\n };\n productDetails: {\n isFetchingProductDetails: boolean;\n product: any;\n message: string;\n productNotFound: boolean;\n };\n auth: {\n subscribedToken: string;\n };\n\n GetProductDetails: (token: string, productId: number) => void;\n RemoveOrderProduct: (\n productId: number,\n optionId: number | null,\n sizeId: number | null,\n uomId: number | null\n ) => void;\n CalculatePromotions: () => void;\n}\n\ninterface componentState {\n productId: number;\n isFetchingProductDetails: boolean;\n product: any;\n message: string;\n userToken: string;\n}\n\nconst GoBackButton = {\n specificRoute: PageRoutes.CategoriesRoute,\n linkText: PageContent.ProductDetailsPageContent.default_backButtonLabel,\n};\n\nclass ProductDetail extends Component{title}
}\n \n
\n );\n } else {\n return (\n \n
\n );\n }\n }\n\n if (productDetails.isFetchingProductDetails) {\n return \n
\n )}\n \n
\n );\n }\n }\n\n _resetProductQuantity = (e: SyntheticEvent) => {\n e.preventDefault();\n this.props.RemoveOrderProduct(this.state.productId, null, null, null);\n\n //Re renders the details page\n this.setState(this.state);\n };\n}\n\nconst MapStateToProps = (state: { productDetailsReducer: any; orderReducer: any; authReducer: any }) => ({\n productDetails: state.productDetailsReducer,\n auth: state.authReducer,\n});\n\nexport default connect(MapStateToProps, { GetProductDetails, RemoveOrderProduct, CalculatePromotions })(ProductDetail);\n","import React from \"react\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { RootState } from \"../../..\";\nimport { DisplayFilterMenu } from \"../../../Redux/Actions/ProductListActions\";\n\nimport \"./Styles/_ProductFilterBackground.scss\";\n\nconst ProductFilterBackground = () => {\n const productsList = useSelector((state: RootState) => state.productListReducer);\n const dispatch = useDispatch();\n\n return productsList.filter?.filterMenuOpen ? (\n dispatch(DisplayFilterMenu(false))}>
\n ) : null;\n};\n\nexport default ProductFilterBackground;\n","import React, { useEffect } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Redirect, Route, Switch } from \"react-router-dom\";\n\nimport Category from \"./Views/Category\";\nimport SideMenu from \"../../Components/Global/SideMenu\";\nimport { Header } from \"../../Components/Global/Header\";\nimport { GetCategoriesList } from \"../../Redux/Actions/ProductListActions\";\nimport NavigationMenu from \"../../Components/Global/NavigationMenu\";\nimport { useCategoryRouteObjects } from \"../../Utils/CategoriesHelper\";\nimport { useIsWindowSmall } from \"../../Utils/Global/UseWindowSizeHook\";\nimport ProductDetail from \"./Views/ProductDetail\";\nimport ProductFilterBackground from \"../../Components/PageElements/Products/ProductFilterBackground\";\n\nimport \"./Styles/_ProductDetails.scss\";\n\ntype Props = {\n auth: {\n subscribedToken: string;\n };\n GetCategoriesList: (token: string) => void;\n};\n\nconst Products = (props: Props) => {\n const categoryRouteObjects = useCategoryRouteObjects();\n const smallScreen = useIsWindowSmall();\n\n useEffect(() => {\n GetCategoriesList(props.auth.subscribedToken);\n }, [props.auth.subscribedToken]);\n\n return (\n <>\n \n
\n \n );\n};\n\nconst MapStateToProps = (state: { authReducer: any }) => ({\n auth: state.authReducer,\n});\n\nexport default connect(MapStateToProps, { GetCategoriesList })(Products);\n","import React, { Component } from 'react';\nimport { connect } from 'react-redux';\nimport { B2BPageTitles } from '../../../Language/Default_Settings';\nimport ReturnPanel from '../../../Components/Global/ReturnPanel';\nimport HtmlBlock from '../../../Components/Global/HtmlBlock';\n\ninterface componentProps {\n identity: {\n moduleSettings: {\n customPage1Title: string;\n customPage1Content: string;\n }\n };\n}\n\ninterface componentState {}\n\nclass CustomPage1 extends Component\n \n \n )}\n
\n \n
\n \n );\n }\n\n setPageTitle() {\n document.title = `${B2BPageTitles.root_title} - ${this.props.identity.moduleSettings.customPage1Title ? this.props.identity.moduleSettings.customPage1Title : B2BPageTitles.custom_page_1_title}`;\n }\n}\n\nconst MapStateToProps = (state: {identityReducer: any;}) => ({\n identity: state.identityReducer\n});\n\nexport default connect(MapStateToProps,{})(CustomPage1);\n","import React, { Component } from 'react';\nimport { connect } from 'react-redux';\nimport { B2BPageTitles } from '../../../Language/Default_Settings';\nimport ReturnPanel from '../../../Components/Global/ReturnPanel';\nimport HtmlBlock from '../../../Components/Global/HtmlBlock';\n\ninterface componentProps {\n identity: {\n moduleSettings: {\n customPage2Title: string;\n customPage2Content: string;\n }\n };\n}\n\ninterface componentState {}\n\nclass CustomPage2 extends Component\n
\n \n
\n \n );\n }\n\n setPageTitle() {\n document.title = `${B2BPageTitles.root_title} - ${this.props.identity.moduleSettings.customPage2Title ? this.props.identity.moduleSettings.customPage2Title : B2BPageTitles.custom_page_2_title}`;\n }\n}\n\nconst MapStateToProps = (state: {identityReducer: any;}) => ({\n identity: state.identityReducer\n});\n\nexport default connect(MapStateToProps,{})(CustomPage2);\n","import React, { Component } from 'react';\nimport { connect } from 'react-redux';\nimport { B2BPageTitles } from '../../../Language/Default_Settings';\nimport ReturnPanel from '../../../Components/Global/ReturnPanel';\nimport HtmlBlock from '../../../Components/Global/HtmlBlock';\n\ninterface componentProps {\n identity: {\n moduleSettings: {\n termsAndConditionsContent: string;\n }\n };\n}\n\ninterface componentState {}\n\nclass TermsAndConditions extends Component\n
\n \n
\n \n );\n }\n\n setPageTitle() {\n document.title = `${B2BPageTitles.root_title} - ${B2BPageTitles.seller_terms_and_conditions_title}`;\n }\n}\n\nconst MapStateToProps = (state: {identityReducer: any;}) => ({\n identity: state.identityReducer\n});\n\nexport default connect(MapStateToProps,{})(TermsAndConditions);\n","import React, { Component } from 'react';\nimport { Route, Switch, Redirect, RouteComponentProps } from 'react-router-dom';\nimport SideMenu from '../../Components/Global/SideMenu';\nimport { Header } from '../../Components/Global/Header';\nimport CustomPage1 from './Views/CustomPage1';\nimport CustomPage2 from './Views/CustomPage2';\nimport TermsAndConditions from './Views/TermsAndConditions';\n\nimport './Styles/_SellerContent.scss';\n\ninterface componentProps extends RouteComponentProps\n
\n \n \n \n
\n \n );\n }\n}\n\nexport default SellerContent;\n","import React from 'react';\nimport { useSelector } from 'react-redux';\nimport { AccountOnHoldContent } from '../../../Language/Default_Settings';\nimport { getCartItemsTotal } from '../../../Redux/Selectors/OrderSelectors';\nimport { getIsPaymentsPortalEnabled, getUserIsOnHold, getUserRemainingCreditLimit } from '../../../Redux/Selectors/UserSelectors';\nimport Cin7ConfirmationBox from '../Cin7ConfirmationBox';\n\nimport './Styles/_AccountOnHoldBanner.scss';\n\nexport const AccountOnHoldBanner: React.FC = () => {\n\n const userIsOnHold = useSelector(getUserIsOnHold);\n const userRemainingCreditLimit = useSelector(getUserRemainingCreditLimit);\n const cartItemsTotal = useSelector(getCartItemsTotal);\n const isPaymentsPortalEnabled = useSelector(getIsPaymentsPortalEnabled).active;\n\n if (userRemainingCreditLimit && userRemainingCreditLimit <= 0) {\n return (\n \n
\n );\n }\n else if (userIsOnHold) {\n return (\n \n
\n );\n }\n else if (userRemainingCreditLimit && userRemainingCreditLimit > 0 && cartItemsTotal > 0 && cartItemsTotal > userRemainingCreditLimit) {\n return (\n \n
\n );\n }\n else {\n return null;\n }\n}\n","import React, { Component } from 'react';\nimport { connect } from 'react-redux';\nimport { Link } from 'react-router-dom';\nimport { LogoutB2BUser } from '../../../Redux/Actions/AuthActions';\nimport { AccountDetailsPageContent, B2BPageTitles } from '../../../Language/Default_Settings';\nimport { AccountOnHoldBanner } from '../../../Components/PageElements/Account/AccountOnHoldBanner';\n\nimport '../Styles/_AccountDetails.scss';\n\ninterface componentProps {\n identity: {\n userInfo: {\n company: string;\n firstName: string;\n lastName: string;\n email: string;\n }\n };\n LogoutB2BUser: () => void;\n}\n\ninterface componentState {}\n\nclass AccountDetails extends Component\n
\n );\n }\n\n _logoutUser = (e: React.SyntheticEvent) => {\n e.preventDefault();\n this.props.LogoutB2BUser();\n }\n}\n\nconst MapStateToProps = (state: {identityReducer: any;}) => ({\n identity: state.identityReducer,\n});\n\nexport default connect(MapStateToProps,{LogoutB2BUser})(AccountDetails);\n","import { BemHelper, Button, Divider, Dialog, DialogContent, Typography } from '@cin7/ui';\nimport React, { useEffect } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport CircleTickIcon from '../../../Images/Icons/Global/CircleTickIcon';\nimport AlertCircleIcon from '../../../Images/Icons/Global/AlertCircleIcon';\nimport { Reorder as ReorderAction, ResetReorderState } from '../../../Redux/Actions/OrderActions';\nimport { getOrderItemCount, getReorderItemsCount, getReorderUnavailableItemsCount, getIsFetchingReorderDetails, getIsReorderComplete, getReorderErrorMessage } from '../../../Redux/Selectors/OrderSelectors';\nimport Loading from '../../Global/Loading';\nimport Cin7ConfirmationBox from '../Cin7ConfirmationBox';\nimport { ReorderModalContent } from '../../../Language/Default_Settings'\nimport './Styles/_ReorderModal.scss';\n\ninterface ReorderModalProps {\n orderId: number,\n orderRef: string,\n CloseAction: VoidFunction;\n}\n\nconst bem = new BemHelper('reorder-modal')\n\nexport const ReorderModal: React.FC\n
\n {AccountDetailsPageContent.default_detailsSectionHeading}
\n {AccountDetailsPageContent.default_detailsSectionNote}
\n \n \n
\n \n
\n {userInfo.firstName} {userInfo.lastName}
\n {userInfo.company}
\n {userInfo.email}
\n Log out
View your order history
\n {OrderHistoryListPageContent.default_noResultsLabel}
\n );\n }\n else {\n return (\n \n \n \n
\n
\n );\n }\n }\n return (\n | Order Ref | \nCreated Date | \nOrder Status | \nPO Number | \nOrder Qty | \nOrder Total | \nOutstanding Amt | \nAction | \n
|---|
\n
\n );\n }\n\n _changePage = (_: React.ChangeEvent { e.key === 'Enter' && this._onSearch(this.state.searchTerm)}}>\n this.setState({searchTerm: e.target.value})}\n InputProps={{\n startAdornment:
\n {reorderModalOpen && Search
\n this._onClear()}>
\n }}\n value={this.state.searchTerm}\n placeholder={\"Order Ref or PO Number\"}\n />\n Recent orders may not display immediately.
\n \n
\n );\n }\n}\n\nexport default OrderHistory;\n","import React, { Component } from 'react';\nimport { Redirect, Switch, Route, RouteComponentProps } from 'react-router-dom';\nimport SideMenu from '../../Components/Global/SideMenu';\nimport { Header } from '../../Components/Global/Header';\nimport ReturnPanel from '../../Components/Global/ReturnPanel';\nimport { B2BPageTitles } from '../../Language/Default_Settings';\nimport AccountDetails from './Views/AccountDetails';\nimport OrderHistory from './Views/OrderHistory';\n\nimport './Styles/_Account.scss';\n\ninterface componentProps extends RouteComponentProps\n
\n \n
\n \n );\n }\n\n _getPageHeading() {\n switch (this.props.location.pathname) {\n case \"/account/orders\":\n return B2BPageTitles.order_history_title;\n default:\n return B2BPageTitles.my_account_title;\n }\n }\n}\n\nexport default Account;\n","import { useSelector } from \"react-redux\";\nimport { RootState } from \"..\";\nimport APIHost from \"../APIHost\";\n\nexport const useModuleId = () => {\n return useSelector((state: RootState) => state.brandingReducer?.moduleId);\n};\n\nexport const useHomepageImageUrl = () => {\n\n const apiHost = new APIHost();\n const appSettings = apiHost.GetEnvironmentConfig();\n const moduleId = useModuleId();\n\n return `${appSettings.AssetsHost}/module/${moduleId}/homepage/`;\n};","import React from 'react';\n\nexport const EmptyCategoryImage = () => {\n return (\n \n\n );\n};\n","import React from 'react';\nimport Img from 'react-image';\nimport { EmptyCategoryImage } from '../../../Images/Icons/CustomHomepage/EmptyCategoryImage';\nimport LoadingSpinner from '../../Global/LoadingSpinner';\n\nimport './Styles/_CustomHomepageImage.scss';\n\ntype CustomHomepageImageProps = {\n imagePath: string;\n altText: string;\n};\n\nexport const CustomHomepageImage = (props: CustomHomepageImageProps) => {\n\n return (\n \n \n \n
\n \n 
} unloader={
\n );\n};","import React from \"react\";\nimport { useSelector } from \"react-redux\";\nimport { useHistory } from \"react-router\";\nimport { FeaturedCategoryType } from \"../../../Redux/Reducers/App_Reducers/IdentityReducer\";\nimport { getIsFetchingCategories } from \"../../../Redux/Selectors/ProductSelectors\";\nimport { getCustomHomepageSettings } from \"../../../Redux/Selectors/SettingsSelectors\";\nimport { GetCurrentUrl } from \"../../../Utils/B2BHelpers\";\nimport { findCategoryFromId, useCategoryRouteObjects, useDefaultParent } from \"../../../Utils/CategoriesHelper\";\nimport { useHomepageImageUrl } from \"../../../Utils/CustomHomepageHelper\";\nimport Loading from \"../../Global/Loading\";\nimport { CustomHomepageImage } from \"./CustomHomepageImage\";\nimport \"./Styles/_CustomHomepageContent.scss\";\n\nexport const CustomHomepageContent = () => {\n const history = useHistory();\n const customHomepageSettings = useSelector(getCustomHomepageSettings);\n const isFetchingCategories = useSelector(getIsFetchingCategories);\n\n const Banner = () => {\n const currentHost = GetCurrentUrl();\n const banner = customHomepageSettings.banner;\n const homepageImagePath = useHomepageImageUrl();\n const bannerImagePath = GetHomepageImageUrl(homepageImagePath, banner?.imageName ?? null);\n\n if (banner && bannerImagePath) {\n const bannerImage = \n \n {bannerImage}\n \n
\n );\n }\n else {\n return (\n \n {bannerImage}\n
\n );\n }\n }\n else {\n return null;\n }\n };\n\n const GetHomepageImageUrl = (path: string, imageName: string | null) => {\n if (imageName === null || imageName === \"\") return null;\n return `${path}${imageName}`;\n };\n\n const GetCategoryName = (defaultParent: any, categoryId: number) => {\n const category = findCategoryFromId(defaultParent, categoryId);\n return category?.name;\n };\n\n const GetCategoryLink = (categoryRouteObjects: any, categoryId: number) => { \n const categoryRoute = categoryRouteObjects.find((cat: any) => cat.id === categoryId);\n return categoryRoute?.path;\n };\n\n const onClickCategoryTile = async (toPath: string | undefined) => {\n if (toPath === undefined) history.push(\"/products/\");\n history.push(`/products/?t=${toPath}`);\n };\n\n const FeaturedCategories = () => {\n const heading = customHomepageSettings.featuredCategoriesHeading;\n const featuredCategories = customHomepageSettings.featuredCategories;\n const defaultParent = useDefaultParent();\n const categoryRouteObjects = useCategoryRouteObjects();\n const homepageImagePath = useHomepageImageUrl();\n\n if (featuredCategories?.some) {\n\n const activeCategories = featuredCategories.filter((cat) => findCategoryFromId(defaultParent, cat.categoryID) !== undefined);\n\n if (activeCategories.length > 0) {\n return (\n \n {heading &&
\n );\n }\n }\n\n return null;\n };\n\n return (\n {heading}
}\n\n {activeCategories.map((category: FeaturedCategoryType, index) => {\n const id = category.categoryID;\n const name = GetCategoryName(defaultParent, id);\n const imageUrl = GetHomepageImageUrl(homepageImagePath, category.imageName ?? null);\n const route = GetCategoryLink(categoryRouteObjects, id);\n\n return (\n
\n onClickCategoryTile(route)}>\n
\n );\n })}\n \n {
\n \n {name}\n
\n \n
\n );\n};\n","import React from \"react\";\nimport { useSelector } from \"react-redux\";\nimport { Redirect } from \"react-router-dom\";\nimport { Header } from \"../../Components/Global/Header\";\nimport Loading from \"../../Components/Global/Loading\";\nimport NavigationMenu from \"../../Components/Global/NavigationMenu\";\nimport SideMenu from \"../../Components/Global/SideMenu\";\nimport { CustomHomepageContent } from \"../../Components/PageElements/CustomHomepage/CustomHomepageContent\";\nimport { getIsCustomHomepageEnabled } from \"../../Redux/Selectors/SettingsSelectors\";\nimport { getUserInfoFetched } from \"../../Redux/Selectors/UserSelectors\";\nimport { CategoriesRoute } from \"../../Routes\";\nimport { useIsWindowSmall } from \"../../Utils/Global/UseWindowSizeHook\";\n\nexport const CustomHomepage = () => {\n const smallScreen = useIsWindowSmall();\n const isCustomHomepageEnabled = useSelector(getIsCustomHomepageEnabled);\n const isUserInfoFetched = useSelector(getUserInfoFetched);\n\n if (isUserInfoFetched && !isCustomHomepageEnabled) {\n return \n {isFetchingCategories &&
\n \n
\n \n );\n }\n};","import React, { useState } from 'react';\nimport { useHistory } from \"react-router\";\nimport { createPortal } from 'react-dom';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { BemHelper, Button } from '@cin7/ui';\nimport { CreateOrder } from '../../../Redux/Actions/OrderActions';\nimport { getIsPaymentsPortalEnabled, getUserInfo, getUserIsOnHold, getUserRemainingCreditLimit } from '../../../Redux/Selectors/UserSelectors';\nimport { getCartItemsTotal, getFullOrder, getIsFetchingPromotions, getOrderItemCount, getPaymentMethod } from '../../../Redux/Selectors/OrderSelectors';\nimport Loading from '../../Global/Loading';\nimport { useCurrentFreightDescription, useCurrentFreightPrice, useHasFilteredZones, useHasFreightOptions } from '../../../Utils/FreightHelper';\nimport './Styles/_CheckoutFooter.scss';\nimport { PaymentMethodType } from '../../../Enums/PaymentMethods/PaymentMethodType';\nimport { getIsPayAccountOnHold } from '../../../Utils/OrderHelper';\n\nconst bem = new BemHelper('checkout-footer');\n\nexport interface CheckoutFooterProps {\n displayCompleteButton?: boolean;\n ShouldContinue?: () => Promise\n {!smallScreen &&
}\n \n {loading && createPortal(
\n );\n}\n","import React, { useState } from 'react';\nimport { useSelector } from \"react-redux\";\nimport { Button, Typography } from '@cin7/ui'\nimport './Styles/_EmptyCart.scss';\nimport { OrderReviewPageContent } from '../../../Language/Default_Settings';\nimport { useHistory } from 'react-router';\nimport { UploadBulkOrder } from './UploadBulkOrder';\nimport { BulkImportCSV } from '../../../Domain/BulkImportCSV';\nimport download from 'downloadjs';\nimport { CustomHompepageRoute, CategoriesRoute } from '../../../Routes';\nimport { getIsCustomHomepageEnabled } from \"../../../Redux/Selectors/SettingsSelectors\";\nimport { getUserInfoFetched } from \"../../../Redux/Selectors/UserSelectors\";\n\nexport const EmptyCart: React.FC = () => {\n const history = useHistory();\n const [showUploadBulkOrder, setShowUploadBulkOrder] = useState(false);\n const isCustomHomepageEnabled = useSelector(getIsCustomHomepageEnabled);\n const isUserInfoFetched = useSelector(getUserInfoFetched);\n \n return (\n \n \n {OrderReviewPageContent.default_emptyCartTitle}\n \n \n {OrderReviewPageContent.default_emptyCartMessage}\n \n {download('Sku, Barcode, Quantity, Size', 'template.csv', 'text/csv')}} onClose={() => setShowUploadBulkOrder(false)} importCSV={BulkImportCSV} />}\n
\n )\n}","import React, { Component } from 'react';\n\ninterface componentProps {\n fillColor?: string;\n}\n\ninterface componentState {\n fillColor: string;\n}\n\nclass RemoveIcon extends Component\n {(isUserInfoFetched && isCustomHomepageEnabled) ? (\n history.push(CustomHompepageRoute)}\n >{OrderReviewPageContent.default_returntohomepageButtonLabel}\n ) : (\n history.push(CategoriesRoute)}\n >{OrderReviewPageContent.default_browseProductsButtonLabel}\n )}\n \n
\n {showUploadBulkOrder && \n {hasNote && <>\n
\n )\n}","import { Button, Dialog, DialogContent, Typography } from '@cin7/ui';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { OrderNotesModalContent } from '../../../Language/Default_Settings';\nimport { StripHTMLFromInputs } from '../../../Utils/B2BHelpers';\n\nimport './Styles/_AddNoteModal.scss';\n\nexport interface AddNoteModalProps {\n onCloseClick: VoidFunction;\n updateNote: (note: string) => void;\n deleteNote: () => void;\n note?: string;\n}\n\nexport const AddNoteModal: React.FCNote: {itemOptionNote?.notes}
\n }\n